\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\";\nimport { useDispatch } from \"react-redux\";\nimport { setCurrentPage, setIsModal, setFullPageFlg } from \"../../../reducks/store/Settings/slices\";\n\nimport type { NoticeType } from \"../../../types/settingsTypes\";\nimport type { AppDispatch } from \"../../../reducks/store/Settings/store\";\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 dispatch = useDispatch