[Feature] Changing plan confirmation window

src/components/modals/ChooseTariffPlanPopup.vue

@@ -43,8 +43,9 @@ import TariffPlan from '../utils/TariffPlan.vue';
 import UiButton from '../utils/UiButton.vue';
 import { Workspace } from '@/types/workspaces';
 import { Plan } from '@/types/plan';
-import { SET_MODAL_DIALOG, RESET_MODAL_DIALOG } from '../../store/modules/modalDialog/actionTypes';
+import { RESET_MODAL_DIALOG, SET_MODAL_DIALOG } from '../../store/modules/modalDialog/actionTypes';
 import notifier from 'codex-notifier';
+import { ActionType } from '../utils/ConfirmationWindow/types';
 
 export default Vue.extend({
   name: 'ChooseTariffPlanPopup',
@@ -106,39 +107,67 @@ export default Vue.extend({
      */
     async onContinue(): Promise<void> {
       if (this.selectedPlan.monthlyCharge === 0) {
-        const result = await this.$store.dispatch('CHANGE_WORKSPACE_PLAN_FOR_FREE_PLAN', {
-          workspaceId: this.workspaceId,
-          planId: this.selectedPlan.id,
+        this.$confirm.open({
+          actionType: ActionType.SUBMIT,
+          description: this.$i18n.t('workspaces.chooseTariffPlanDialog.confirmSetToFreePlanDescription').toString(),
+          onConfirm: async () => {
+            const result = await this.$store.dispatch('CHANGE_WORKSPACE_PLAN_FOR_FREE_PLAN', {
+              workspaceId: this.workspaceId,
+              planId: this.selectedPlan.id,
+            });
+
+            if (!result) {
+              notifier.show({
+                message: this.$t('workspaces.chooseTariffPlanDialog.onError') as string,
+                style: 'error',
+                time: 5000,
+              });
+
+              return;
+            }
+
+            notifier.show({
+              message: this.$t('workspaces.chooseTariffPlanDialog.onSuccess') as string,
+              style: 'success',
+              time: 5000,
+            });
+
+            await this.$store.dispatch(RESET_MODAL_DIALOG);
+
+            return;
+          }
         });
+        return;
+      }
 
-        if (!result) {
-          notifier.show({
-            message: this.$t('workspaces.chooseTariffPlanDialog.onError') as string,
-            style: 'error',
-            time: 5000,
-          });
-
-          return;
-        }
-
-        notifier.show({
-          message: this.$t('workspaces.chooseTariffPlanDialog.onSuccess') as string,
-          style: 'success',
-          time: 5000,
+      /**
+       * Don't show confirmation window if user changes free plan to paid
+       */
+      if (this.workspace.plan.monthlyCharge === 0) {
+        await this.$store.dispatch(SET_MODAL_DIALOG, {
+          component: 'PaymentDetailsDialog',
+          data: {
+            workspaceId: this.workspaceId,
+            tariffPlanId: this.selectedPlan.id,
+            isRecurrent: !!this.workspace.subscriptionId,
+          },
         });
-
-        this.$store.dispatch(RESET_MODAL_DIALOG);
-
         return;
       }
 
-      this.$store.dispatch(SET_MODAL_DIALOG, {
-        component: 'PaymentDetailsDialog',
-        data: {
-          workspaceId: this.workspaceId,
-          tariffPlanId: this.selectedPlan.id,
-          isRecurrent: !!this.workspace.subscriptionId,
-        },
+      this.$confirm.open({
+        actionType: ActionType.SUBMIT,
+        description: this.$i18n.t('workspaces.chooseTariffPlanDialog.confirmSetToPaidPlanDescription').toString(),
+        onConfirm: async () => {
+          await this.$store.dispatch(SET_MODAL_DIALOG, {
+            component: 'PaymentDetailsDialog',
+            data: {
+              workspaceId: this.workspaceId,
+              tariffPlanId: this.selectedPlan.id,
+              isRecurrent: !!this.workspace.subscriptionId,
+            },
+          });
+        }
       });
     },
   },

src/i18n/messages/en.json

@@ -176,7 +176,9 @@
       "title": "Choose a plan",
       "description": "All plans includes all available <a href=\"{featuresUrl}\">features</a>. If you want a free unlimited access for non-profit products, contact us by <a href=\"mailto:[email protected]\">[email protected]</a>",
       "onSuccess": "Workspace plan has been successfully changed",
-      "onError": "Unable to change workspace plan due to an error, please try again later"
+      "onError": "Unable to change workspace plan due to an error, please try again later",
+      "confirmSetToFreePlanDescription": "The old plan will be canceled. Unused errors and time will not be refunded.",
+      "confirmSetToPaidPlanDescription": "The old plan will be canceled. Unused errors and time will not be refunded. You will need to pay for a new tariff plan."
     },
     "creationDialog": {
       "description": "Workspace will contain your projects. You’ll able to invite team members to join workspace and access projects.",

src/i18n/messages/ru.json

@@ -176,7 +176,9 @@
       "title": "Выберите план",
       "description": "Все тарифные планы включают в себя все <a href=\"{featuresUrl}\">возможности</a> сервиса. Если вы хотите получить неограниченный доступ к сервису для некоммерческих проектов, напишите нам на <a href=\"mailto:[email protected]\">[email protected]</a>",
       "onSuccess": "Тарифный план был успешно изменён",
-      "onError": "Произошла ошибка, пожалуйста попробуйте ещё раз немного позже"
+      "onError": "Произошла ошибка, пожалуйста попробуйте ещё раз немного позже",
+      "confirmSetToFreePlanDescription": "Старый план будет отменён. Деньги за неиспользованные ошибки и время не будут возвращены.",
+      "confirmSetToPaidPlanDescription": "Старый план будет отменён. Деньги за неиспользованные ошибки и время не будут возвращены. Вам будет необходимо оплатить новый тарифный план."
     },
     "creationDialog": {
       "description": "Воркспейс объединяет несколько проектов. Вы сможете добавить коллег с доступом ко всем проектам внутри воркспейса.",