\n
{t(\"ChangeTrialModalBody.無料トライアル申し込み\")}
\n\n
\n
\n
{t(\"ChangeTrialModalBody.プラン\")}
\n
\n {t(\"ChangeTrialModalBody.trialPlanNameプラン\", { trialPlanName })}\n
\n
\n
\n
{t(\"ChangeTrialModalBody.期間\")}
\n
\n {t(\"ChangeTrialModalBody.〜YYYY年MM月DD日\", { date: moment().add(14, \"days\").format(\"YYYY/MM/DD\") })}\n
\n
\n
\n\n
\n - \n \n ),\n }}\n />\n
\n - \n {is_internal\n ? t(\"ChangeTrialModalBody.タスク数・ライセンス数の無料枠は適用されません。\")\n : t(\"ChangeTrialModalBody.タスク数の無料枠は適用されません。\")}\n
\n - \n \n ),\n }}\n />\n
\n - {t(\"ChangeTrialModalBody.トライアルは1度のみ体験が可能です。\")}
\n - \n ,\n }}\n />\n
\n - \n {is_internal\n ? t(\n \"ChangeTrialModalBody.トライアル期間中に実行されたタスク、追加したライセンスは、通常通りカウントされます。\",\n )\n : t(\"ChangeTrialModalBody.トライアル期間中に実行されたタスクは、通常通りカウントされます。\")}\n
\n
\n\n
\n {\n handleTrialClose();\n }}\n style={{ color: \"#222222\" }}\n />\n {\n updateTrialPlan();\n }}\n style={{ whiteSpace: \"nowrap\" }}\n />\n
\n
\n >\n );\n};\n\nChangeTrialModalBody.propTypes = {\n client: PropTypes.string,\n trialPlanName: PropTypes.string,\n trialPlanCode: PropTypes.string,\n isLoading: PropTypes.bool,\n handleTrialClose: PropTypes.func,\n setNotice: PropTypes.func,\n is_internal: PropTypes.bool,\n};\n","// @ts-nocheck\nimport React from \"react\";\nimport style from \"./ChangePlan.module.scss\";\nimport PropTypes from \"prop-types\";\nimport { SecondaryBtn } from \"../../common/Payment/SecondaryBtn\";\nimport { InfoBtn } from \"../../common/Payment/InfoBtn\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const ChangeFreePlanModalBody = ({\n afterPlanInfo,\n updatePlanErrMessage,\n isLoading,\n handleClose,\n updatePlan,\n}) => {\n const { t } = useTranslation();\n return (\n <>\n \n
{t(\"ChangeFreePlanModalBody.プラン変更申し込み\")}
\n
\n {t(\"ChangeFreePlanModalBody.フリープランへの変更は\")}\n
\n {t(\"ChangeFreePlanModalBody.次回更新日より適用\")}\n \n {t(\"ChangeFreePlanModalBody.されます。\")}\n
\n {t(\"ChangeFreePlanModalBody.下記ご注意をお願いいたします。\")}\n
\n {t(\"ChangeFreePlanModalBody.・有料プランで提供している機能等は自動的にご利用できなくなります\")}\n
\n
\n {t(\n \"ChangeFreePlanModalBody.・ライセンス数・データベース数・フローボット数等がフリープランの制限を超えている場合、削除するまで正常にご利用いただけないことがございます。\",\n )}\n
\n
\n {t(\"ChangeFreePlanModalBody.内容に問題がない場合は、申し込むをクリックしてください。\")}\n
\n\n
\n
\n
\n {afterPlanInfo?.plan_name}\n
\n
\n
\n
{t(\"ChangeFreePlanModalBody.基本月額料金\")}
\n
\n
\n
{t(\"ChangeFreePlanModalBody.無料\")}
\n
\n
\n
\n
\n
\n
\n {t(\"ChangeFreePlanModalBody.月間タスク実行上限\")}\n
\n
{afterPlanInfo?.task_count}
\n
\n
\n
\n
{t(\"ChangeFreePlanModalBody.ライセンス\")}
\n
\n
\n
{afterPlanInfo?.license_count}
\n
\n
\n
\n
\n
\n
\n \n {t(\"ChangeFreePlanModalBody.適用日\")}\n \n \n {afterPlanInfo?.start_date}\n \n
\n
\n
\n
\n <>\n {updatePlanErrMessage.length ? (\n
\n {updatePlanErrMessage.map((errMessage, i) => (\n
{errMessage}
\n ))}\n
\n ) : (\n <>>\n )}\n >\n
\n
handleClose()}\n style={{ color: \"#222222\" }}\n />\n \n updatePlan()}\n />\n
\n \n
\n >\n );\n};\n\nChangeFreePlanModalBody.propTypes = {\n afterPlanInfo: PropTypes.object,\n updatePlanErrMessage: PropTypes.array,\n isLoading: PropTypes.bool,\n handleClose: PropTypes.func,\n updatePlan: PropTypes.func,\n};\n","// @ts-nocheck\nimport React, { useState } from \"react\";\nimport style from \"./ChangePlan.module.scss\";\nimport PropTypes from \"prop-types\";\nimport { SecondaryBtn } from \"../../common/Payment/SecondaryBtn\";\nimport { InfoBtn } from \"../../common/Payment/InfoBtn\";\nimport { useTranslation } from \"react-i18next\";\nimport { getImageUrl } from \"../../../commons/assets_path\";\n\nexport const ChangePaidPlanModalBody = ({\n currentPlan,\n currentPaymentPeriod,\n afterPlanName,\n afterPlanInfo,\n selectPaymentPeriod,\n downGradeFlag,\n isLoading,\n handleClose,\n updatePlan,\n setCurrentPageNumber,\n changeModalCss,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const { t } = useTranslation();\n\n return (\n <>\n \n
{t(\"ChangePaidPlanModalBody.プラン変更申し込み (1/2)\")}
\n {downGradeFlag ? (\n <>\n
\n {currentPlan.plan_name === afterPlanName ? (\n
\n {currentPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : currentPaymentPeriod === \"half_year\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : currentPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.から\")}\n {afterPlanName === \"サクセス\" && selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : selectPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.への変更は\")}\n \n {t(\"ChangePaidPlanModalBody.次回更新日より適用\")}\n \n {t(\"ChangePaidPlanModalBody.されます。\")}\n
\n ) : (\n <>\n {currentPlan.plan_name === \"フリー\"\n ? t(\"ChangePaidPlanModalBody.フリープラン\")\n : t(\"ChangePaidPlanModalBody.currentPlan.plan_nameプラン\", { plan_name: currentPlan.plan_name })}\n {t(\"ChangePaidPlanModalBody.から\")}\n {afterPlanName}\n {t(\"ChangePaidPlanModalBody.プラン(\")}\n {afterPlanName === \"サクセス\" && selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : selectPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.)への変更は\")}\n
\n {t(\"ChangePaidPlanModalBody.次回更新日より適用\")}\n \n {t(\"ChangePaidPlanModalBody.されます。\")}\n {!(\n (currentPlan.plan_name === \"ミニ\" && afterPlanName === \"チーム\") ||\n (currentPlan.plan_name === \"ミニ\" && afterPlanName === \"サクセス\") ||\n (currentPlan.plan_name === \"チーム\" && afterPlanName === \"サクセス\")\n ) && (\n
\n {t(\n \"ChangePaidPlanModalBody.currentPlan.plan_nameプランから${afterPlanName}プランへ変更が完了すると、\",\n { plan_name: currentPlan.plan_name, afterPlanName: afterPlanName },\n )}\n \n {t(\n \"ChangePaidPlanModalBody.currentPlan.plan_nameプランで提供している機能等は自動的にご利用できなくなります。\",\n { plan_name: currentPlan.plan_name },\n )}\n \n
\n )}\n
\n >\n )}\n
\n >\n ) : (\n <>\n {currentPlan.plan_name === afterPlanName ? (\n
\n {currentPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : currentPaymentPeriod === \"half_year\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : currentPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.から\")}\n {afterPlanName === \"サクセス\" && selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : selectPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.への変更は即時行われます。取り消すことはできません。\")}\n
\n
\n ) : (\n <>\n
\n {currentPlan.plan_name === \"フリー\"\n ? t(\"ChangePaidPlanModalBody.フリープラン\")\n : t(\"ChangePaidPlanModalBody.currentPlan.plan_nameプラン\", { plan_name: currentPlan.plan_name })}\n {t(\"ChangePaidPlanModalBody.から\")}\n {afterPlanName}\n {t(\"ChangePaidPlanModalBody.プラン(\")}\n {afterPlanName === \"サクセス\" && selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.半年契約\")\n : selectPaymentPeriod === \"year\"\n ? t(\"ChangePaidPlanModalBody.年間契約\")\n : selectPaymentPeriod === \"month\"\n ? t(\"ChangePaidPlanModalBody.月間契約\")\n : \"\"}\n {t(\"ChangePaidPlanModalBody.)への変更は即時行われます。取り消すことはできません。\")}\n
\n
\n >\n )}\n >\n )}\n {Object.keys(afterPlanInfo).length ? (\n <>\n
\n <>\n {downGradeFlag ? (\n <>\n
\n
\n
\n
{afterPlanInfo?.plan_name}\n
\n
{afterPlanInfo?.contract_type}
\n
\n
\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.基本月額料金\")}\n
\n
\n
\n
\n ¥{afterPlanInfo?.basic_price.toLocaleString()}\n
\n
\n
\n
\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.追加タスク料金\")}\n
\n
\n ¥{afterPlanInfo?.operation_additional_boot_price}\n
\n
\n {afterPlanName !== \"ミニ\" && (\n <>\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.追加ライセンス月額料金\")}\n
\n
\n
\n
\n ¥{afterPlanInfo?.license_unit_amount.toLocaleString()}\n
\n
\n
\n
\n >\n )}\n
\n
\n
\n \n {t(\"ChangePaidPlanModalBody.契約期間\")}\n \n \n {afterPlanInfo?.contract_term}\n \n
\n
\n \n {t(\"ChangePaidPlanModalBody.請求予定日\")}\n \n \n {afterPlanInfo?.next_payment_date}\n \n
\n
\n
\n >\n ) : (\n <>\n
\n
\n
\n
{afterPlanInfo?.plan_name}\n
\n
{afterPlanInfo?.contract_type}
\n
\n
\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.基本月額料金\")}\n
\n
\n
\n
\n ¥{afterPlanInfo?.basic_price.toLocaleString()}\n
\n
\n
\n
\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.追加タスク料金\")}\n
\n
\n ¥{afterPlanInfo?.operation_additional_boot_price}\n
\n
\n {afterPlanName !== \"ミニ\" && (\n <>\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.追加ライセンス月額料金\")}\n
\n
\n
\n
\n ¥{afterPlanInfo?.license_unit_amount.toLocaleString()}\n
\n
\n
\n
\n >\n )}\n
\n
\n
\n \n {t(\"ChangePaidPlanModalBody.契約期間\")}\n \n \n {afterPlanInfo?.contract_term}\n \n
\n
\n \n {t(\"ChangePaidPlanModalBody.請求予定日\")}\n \n \n {afterPlanInfo?.next_payment_date}\n \n
\n
\n
\n >\n )}\n >\n
\n
\n
\n
\n
\n {t(\"ChangePaidPlanModalBody.次回請求金額\")}\n \n
\n \n ¥{afterPlanInfo?.total_price.toLocaleString()}~\n \n
setIsOpen(!isOpen)}\n />\n \n
\n {isOpen && (\n <>\n
\n
\n
\n
{t(\"ChangePaidPlanModalBody.基本料金\")}
\n
\n {t(\"ChangePaidPlanModalBody.通貨記号\")}\n {afterPlanInfo?.basic_price.toLocaleString()} × {afterPlanInfo.billable_month_count}\n {t(\"ChangePaidPlanModalBody.ヶ月\")}\n {afterPlanInfo?.discount_amount > 0 && (\n <>\n - {t(\"ChangePaidPlanModalBody.通貨記号\")}\n {afterPlanInfo.discount_amount.toLocaleString()} (\n {t(\"ChangePaidPlanModalBody.初月割引\")})\n >\n )}\n
\n
\n
¥{afterPlanInfo?.total_basic_price.toLocaleString()}
\n
\n
\n
\n
{t(\"ChangePaidPlanModalBody.タスク料金\")}
\n
\n ¥{afterPlanInfo?.operation_additional_boot_price} × {afterPlanInfo?.billable_month_count}\n {t(\"ChangePaidPlanModalBody.ヶ月\")}\n
\n
\n
\n
\n {afterPlanName !== \"ミニ\" && (\n
\n
\n
{t(\"ChangePaidPlanModalBody.ライセンス料金\")}
\n
\n ¥{afterPlanInfo?.license_unit_amount} × {afterPlanInfo?.billable_month_count}\n {t(\"ChangePaidPlanModalBody.ヶ月\")}\n
\n
\n
\n
{t(\"ChangePaidPlanModalBody.通貨記号\")}-
\n
※
\n
\n
\n )}\n {afterPlanInfo?.repayable_total_basic_price > 0 && (\n
\n
\n
{t(\"ChangePaidPlanModalBody.前プラン残期間割引\")}
\n {afterPlanInfo?.current_basic_price > 0 && (\n
\n -{t(\"ChangePaidPlanModalBody.通貨記号\")}\n {afterPlanInfo?.current_basic_price.toLocaleString()} ×\n {afterPlanInfo?.repayable_month_count} {t(\"ChangePaidPlanModalBody.ヶ月\")}\n
\n )}\n {afterPlanInfo?.repayable_total_license_price > 0 && (\n
\n -{t(\"ChangePaidPlanModalBody.通貨記号\")}\n {afterPlanInfo?.repayable_total_license_price.toLocaleString()} ×\n {afterPlanInfo?.repayable_month_count} {t(\"ChangePaidPlanModalBody.ヶ月\")} ×{\" \"}\n {afterPlanInfo?.repayable_license_count} {t(\"ChangePaidPlanModalBody.人\")}\n
\n )}\n
\n
-¥{afterPlanInfo?.repayable_total_basic_price.toLocaleString()}
\n
\n )}\n
\n
{t(\"ChangePaidPlanModalBody.消費税\")}
\n
¥{afterPlanInfo?.tax_price.toLocaleString()}
\n
\n
\n
\n >\n )}\n
\n {isOpen && (\n
\n
{t(\"ChangePaidPlanModalBody.合計金額\")}
\n
¥{afterPlanInfo?.total_price.toLocaleString()}
\n
\n )}\n
\n {t(\"ChangePaidPlanModalBody.請求日までの追加タスク・ライセンス料金が追加されます\")}\n
\n
\n
\n
\n
\n handleClose()}\n style={{ color: \"#222222\" }}\n />\n {currentPlan?.is_via_partner ? (\n updatePlan(true)}\n />\n ) : (\n {\n setCurrentPageNumber(1);\n changeModalCss(\"auto\", \"auto\");\n }}\n />\n )}\n
\n >\n ) : (\n
\n updatePlan(true)}\n />\n
\n )}\n
\n >\n );\n};\n\nChangePaidPlanModalBody.propTypes = {\n currentPlan: PropTypes.object,\n currentPaymentPeriod: PropTypes.string,\n afterPlanName: PropTypes.string,\n afterPlanInfo: PropTypes.object,\n selectPaymentPeriod: PropTypes.string,\n downGradeFlag: PropTypes.bool,\n isLoading: PropTypes.bool,\n handleClose: PropTypes.func,\n updatePlan: PropTypes.func,\n setCurrentPageNumber: PropTypes.func,\n changeModalCss: PropTypes.func,\n};\n","// @ts-nocheck\nimport React, { useState, useEffect } from \"react\";\nimport style from \"./ChangePlan.module.scss\";\nimport axios from \"axios\";\naxios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nimport PropTypes from \"prop-types\";\nimport { Modal } from \"react-bootstrap\";\nimport { InfoBtn } from \"../../common/Payment/InfoBtn\";\nimport { PageLoader } from \"../../common/Loaders/PageLoader\";\nimport { SecondaryBtn } from \"../../common/Payment/SecondaryBtn\";\nimport { Stripe } from \"../../common/Payment/DashBoardStripe\";\nimport { InfoCard } from \"../../common/Payment/InfoCard\";\nimport { ChangePlanPriceList } from \"./ChangePlanPriceList\";\nimport { ChangeTrialModalBody } from \"./ChangeTrialModalBody\";\nimport { ChangeFreePlanModalBody } from \"./ChangeFreePlanModalBody\";\nimport { ChangePaidPlanModalBody } from \"./ChangePaidPlanModalBody\";\nimport { getImageUrl } from \"../../../commons/assets_path\";\nimport { useTranslation } from \"react-i18next\";\nimport { prefectures } from \"../../../hooks/prefectures\";\n\nimport type { NoticeType } from \"../../../types/settingsTypes\";\n\ntype Props = {\n client: string;\n client_id: number;\n plans: object;\n plan_prices: object;\n available_trial_plans: [];\n past_trial_plans: [];\n current_trial_plan: string;\n setNotice: (notice: NoticeType) => void;\n handleModalShow: (setShow: (show: boolean) => void, width: string, height: string) => void;\n handleModalClose: (setShow: (show: boolean) => void) => void;\n changeModalCss: (width: string, height: string) => void;\n cardStatus: string;\n};\n\nconst ChangePlan = ({\n client,\n plans,\n plan_prices,\n client_id,\n available_trial_plans,\n past_trial_plans,\n current_trial_plan,\n setNotice,\n handleModalShow,\n handleModalClose,\n changeModalCss,\n cardStatus,\n}: Props) => {\n const { t } = useTranslation();\n const [currentPlan, setCurrentPlan] = useState();\n const [inProgress, setInProgress] = useState(true);\n const [show, setShow] = useState(false);\n const [trialShow, setTrialShow] = useState(false);\n const [errMessage, setErrMessage] = useState(\"\");\n const [updatePlanErrMessage, setUpdatePlanErrMessage] = useState([]);\n const [beforeUpdatePlanErrMessage, setBeforeUpdatePlanErrMessage] = useState([]);\n // 現在の契約期間を固定で保持するためのstate\n const [currentPaymentPeriod, setCurrentPaymentPeriod] = useState(\"year\");\n\n const [selectPaymentPeriod, setSelectPaymentPeriod] = useState(\"year\");\n const [currentPageNumber, setCurrentPageNumber] = useState(0);\n const [id, setId] = useState(\"\");\n const [card, setCard] = useState(\"\");\n const [isUpdate, setIsUpdate] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [isBeforeUpdatePlanLoading, setIsBeforeUpdatePlanLoading] = useState(false);\n\n const [paymentOption, setPaymentOption] = useState(\"credit_card\");\n const [afterPlanName, setAfterPlanName] = useState(\"\");\n const [afterPlanCode, setAfterPlanCode] = useState(\"\");\n const [downGradeFlag, setDownGradeFlag] = useState(false);\n const [afterPlanInfo, setAfterPlanInfo] = useState({});\n const [planDowngradeInfo, setPlanDowngradeInfo] = useState({});\n const [trialPlanName, setTrialPlanName] = useState(\"\");\n const [trialPlanCode, setTrialPlanCode] = useState(\"\");\n const [isUpdating, setIsUpdating] = useState(false);\n const [isUpdateTrial, setIsUpdateTrial] = useState(false);\n const [isUpdatePlan, setIsUpdatePlan] = useState(false);\n\n const handleClose = () => {\n setCurrentPageNumber(0);\n setUpdatePlanErrMessage([]);\n setBeforeUpdatePlanErrMessage([]);\n setAfterPlanInfo({});\n handleModalClose(setShow);\n setShow(false);\n };\n const handleShow = () => {\n handleModalShow(setShow, \"650px\", \"auto\");\n };\n const handleTrialShow = () => {\n handleModalShow(setTrialShow, \"480px\", \"548px\");\n };\n const handleTrialClose = () => {\n handleModalClose(setTrialShow);\n };\n\n const getCurrentPlan = async () => {\n await axios\n .get(`/${client}/settings/client_plan_log/current_period_plan`)\n .then((res) => {\n setCurrentPlan(res.data);\n setCurrentPaymentPeriod(\n res.data.interval === t(\"ChangePlan.年間契約\")\n ? \"year\"\n : res.data.interval === t(\"ChangePlan.半年契約\")\n ? \"half_year\"\n : \"month\",\n );\n })\n .catch((_) => {\n return;\n });\n };\n\n const registerCard = async (token) => {\n setIsLoading(true);\n await axios\n .post(`/${client}/api_cards`, {\n token_id: token,\n default: true,\n })\n .then((res) => {\n // 登録したクレジットカードで決済テストを実行して3Dスキャンを実施する\n requestThreeDSecure(res.data.stripe_card_id, res.data.stripe_customer_id);\n })\n .catch((_) => {\n setIsLoading(false);\n setErrMessage(t(\"ChangePlan.クレジットカードの登録に失敗しました。\"));\n return;\n });\n };\n\n const updateCard = async (token) => {\n setIsLoading(true);\n await axios\n .post(`/${client}/api_cards`, {\n token_id: token,\n default: false,\n })\n .then((res) => {\n // 登録したクレジットカードで決済テストを実行して3Dスキャンを実施する\n requestThreeDSecure(res.data.stripe_card_id, res.data.stripe_customer_id);\n })\n .catch((_) => {\n setIsLoading(false);\n setErrMessage(t(\"ChangePlan.クレジットカードの更新に失敗しました。\"));\n return;\n });\n };\n\n const requestThreeDSecure = async (stripe_card_id, stripe_customer_id) => {\n let period = selectPaymentPeriod;\n if (afterPlanCode === \"success\" && selectPaymentPeriod === \"month\") {\n period = \"half_year\";\n }\n\n await axios\n .post(`/${client}/api_cards/request_three_d_secure`, {\n current_url: window.location.href,\n stripe_card_id: stripe_card_id,\n stripe_customer_id: stripe_customer_id,\n payment_method: paymentOption,\n code: afterPlanCode,\n period_type: period,\n })\n .then((res) => {\n if (res.data.redirect_to_url !== \"\") {\n // 3Dスキャンの実行ページを表示する。\n window.location.href = res.data.redirect_to_url;\n }\n setErrMessage(\"\");\n setIsLoading(false);\n getCard();\n })\n .catch((_) => {\n setPaymanetMethodErrMessage(t(\"ChangePlan.request_three_d_secure_result.failed_plan_update\"));\n setIsLoading(false);\n return;\n });\n };\n\n const changeCard = () => {\n setIsUpdate(true);\n };\n\n const getCard = async () => {\n await axios\n .get(`/${client}/api_cards/default_card`, {\n params: {\n default_only: true,\n },\n })\n .then((res) => {\n if (!res.data.id) {\n return;\n } else {\n setId(res.data.id);\n setCard(res.data);\n setErrMessage(\"\");\n }\n })\n .catch((_) => {\n return;\n });\n };\n\n const initConnect = async () => {\n await getCurrentPlan();\n await getCard();\n await fetchPlanDowngradeInfo();\n await setInProgress(false);\n };\n\n const updatePlan = async (isViaPartner = false) => {\n if (isUpdating) return;\n\n setIsUpdating(true);\n setIsLoading(true);\n let params = {};\n if (afterPlanCode === \"free\") {\n params = {\n code: afterPlanCode,\n period_type: \"month\",\n payment_method: currentPlan.payment_method,\n };\n } else if (afterPlanCode === \"success\" && selectPaymentPeriod === \"month\") {\n params = {\n code: afterPlanCode,\n period_type: \"half_year\",\n payment_method: isViaPartner ? \"send_invoice\" : paymentOption,\n };\n } else {\n params = {\n code: afterPlanCode,\n period_type: selectPaymentPeriod,\n payment_method: isViaPartner ? \"send_invoice\" : paymentOption,\n };\n }\n\n await axios\n .patch(`/clients/${client_id}/update_plan`, params)\n .then((res) => {\n const currentUrl = new URL(window.location.href);\n currentUrl.searchParams.set(\"category\", \"plan-and-billing\");\n window.location.href = currentUrl;\n })\n .catch(({ response }) => {\n setUpdatePlanErrMessage(Object.values(response.data));\n setIsLoading(false);\n setIsUpdating(false);\n return;\n });\n };\n\n const changePlanCheck = async (selectAfterPlanCode) => {\n setIsBeforeUpdatePlanLoading(true);\n if (currentPlan.plan_name === t(\"ChangePlan.フリー\")) {\n applyChangePlan(selectAfterPlanCode);\n } else {\n await axios\n .get(`/clients/${client_id}/validate_update_plan`, {\n params: {\n code: selectAfterPlanCode,\n },\n })\n .then((res) => {\n if (Object.keys(res.data).length) {\n setBeforeUpdatePlanErrMessage(Object.values(res.data));\n setIsBeforeUpdatePlanLoading(false);\n } else {\n applyChangePlan(selectAfterPlanCode);\n }\n })\n .catch((_) => {\n setIsBeforeUpdatePlanLoading(false);\n return;\n });\n }\n };\n\n const applyChangePlan = async (selectAfterPlanCode) => {\n const after_period_type =\n selectAfterPlanCode === \"success\" && selectPaymentPeriod === \"month\"\n ? \"half_year\"\n : selectAfterPlanCode === \"free\"\n ? \"month\"\n : selectPaymentPeriod;\n\n await axios\n .get(\n `/${client}/settings/client_plan_log/apply_change_plan?after_plan_code=${selectAfterPlanCode}&after_period_type=${after_period_type}¤cy=jpy`,\n )\n .then((res) => {\n setAfterPlanInfo(res.data);\n setIsBeforeUpdatePlanLoading(false);\n })\n .catch((_) => {\n setIsBeforeUpdatePlanLoading(false);\n return;\n });\n };\n\n const upOrDownCheck = (currentPlan, afterPlan, currentPeriod, afterPeriod) => {\n if (\n (currentPeriod === \"year\" && afterPeriod === \"half_year\") ||\n (currentPeriod === \"year\" && afterPeriod === \"month\") ||\n (currentPeriod === \"half_year\" && afterPeriod === \"month\") ||\n (currentPlan === t(\"ChangePlan.サクセス\") && afterPlan === t(\"ChangePlan.チーム\")) ||\n (currentPlan === t(\"ChangePlan.サクセス\") && afterPlan === t(\"ChangePlan.ミニ\")) ||\n (currentPlan === t(\"ChangePlan.チーム\") && afterPlan === t(\"ChangePlan.ミニ\"))\n ) {\n setDownGradeFlag(true);\n } else {\n setDownGradeFlag(false);\n }\n };\n\n const fetchPlanDowngradeInfo = async () => {\n await axios\n .get(`/${client}/settings/client_plan_log/scheduled_downgrade`)\n .then((res) => {\n setPlanDowngradeInfo(res.data);\n })\n .catch((_) => {\n return;\n });\n };\n\n const handlePlanDowngradeRedirect = (e: React.MouseEvent) => {\n e.preventDefault();\n const currentUrl = new URL(window.location.href);\n currentUrl.searchParams.set(\"category\", \"plan-and-billing\");\n window.location.href = currentUrl;\n };\n\n useEffect(() => {\n initConnect();\n }, []);\n\n return (\n