fix(payments): Rewrite composePayment with graphql

src/api/billing/index.ts

@@ -1,6 +1,7 @@
-import { MUTATION_PAY_WITH_CARD, QUERY_BUSINESS_OPERATIONS } from './queries';
+import { MUTATION_PAY_WITH_CARD, QUERY_BUSINESS_OPERATIONS, QUERY_COMPOSE_PAYMENT } from './queries';
 import * as api from '../';
 import { BusinessOperation } from '../../types/business-operation';
+import { BeforePaymentPayload } from '@/types/before-payment-payload';
 
 /**
  * Request business operations list for passed workspaces
@@ -39,3 +40,20 @@ export interface PayWithCardInput {
 export async function payWithCard(input: PayWithCardInput): Promise<unknown> {
   return (await api.callOld(MUTATION_PAY_WITH_CARD, { input })).payWithCard.record;
 }
+
+/**
+ * Prepare payment data (compose payment)
+ *
+ * @param workspaceId - id of workspace
+ * @param tariffPlanId - id of plan
+ * @param shouldSaveCard - whether to save the card
+ */
+export async function composePayment(
+  workspaceId: string,
+  tariffPlanId: string,
+  shouldSaveCard = false
+): Promise<unknown> {
+  return await api.call(QUERY_COMPOSE_PAYMENT, {
+    input: { workspaceId, tariffPlanId, shouldSaveCard },
+  });
+}

src/api/billing/queries.ts

@@ -63,3 +63,24 @@ export const MUTATION_PAY_WITH_CARD = `
 
   ${FRAGMENT_BUSINESS_OPERATION}
 `;
+
+// language=GraphQL
+/**
+ * Query to prepare payment data (GraphQL version of composePayment)
+ */
+export const QUERY_COMPOSE_PAYMENT = `
+  query ComposePayment($input: ComposePaymentInput!) {
+    composePayment(input: $input) {
+      invoiceId
+      plan {
+        id
+        name
+        monthlyCharge
+      }
+      isCardLinkOperation
+      currency
+      checksum
+      nextPaymentDate
+    }
+  }
+`;

src/components/modals/ChooseTariffPlanPopup.vue

@@ -73,7 +73,6 @@ import { Plan } from '@/types/plan';
 import { RESET_MODAL_DIALOG, SET_MODAL_DIALOG } from '../../store/modules/modalDialog/actionTypes';
 import notifier from 'codex-notifier';
 import { ActionType } from '../utils/ConfirmationWindow/types';
-import { composePayment } from '@/api/billing/requests';
 
 export default Vue.extend({
   name: 'ChooseTariffPlanPopup',

src/components/modals/PaymentDetailsDialog.vue

@@ -22,7 +22,7 @@
 
         <!--Description-->
         <div
-          v-if="paymentData.isCardLinkOperation"
+          v-if="paymentData && paymentData.isCardLinkOperation"
           class="payment-details__description"
         >
           <p>{{ $t('billing.cardLinking.description') }}&nbsp;{{ nextPaymentDateInSeconds | prettyFullDate(false) }}</p>
@@ -208,15 +208,14 @@ import { BeforePaymentPayload } from '../../types/before-payment-payload';
 import { PlanProlongationPayload } from '../../types/plan-prolongation-payload';
 import { FETCH_BANK_CARDS } from '@/store/modules/user/actionTypes';
 import { RESET_MODAL_DIALOG } from '@/store/modules/modalDialog/actionTypes';
-import { PAY_WITH_CARD, GET_BUSINESS_OPERATIONS, FETCH_WORKSPACE } from '@/store/modules/workspaces/actionTypes';
+import { PAY_WITH_CARD, GET_BUSINESS_OPERATIONS, FETCH_WORKSPACE, COMPOSE_PAYMENT } from '@/store/modules/workspaces/actionTypes';
 import { BankCard } from '../../types/bankCard';
 import CustomSelectOption from '../../types/customSelectOption';
 import { PayWithCardInput } from '../../api/billing';
 import { BusinessOperation } from '../../types/business-operation';
 import { BusinessOperationStatus } from '../../types/business-operation-status';
 import UiCheckboxWithLabel from '../forms/UiCheckboxWithLabel/UiCheckboxWithLabel.vue';
 import { getCurrencySign } from '@/utils';
-import { composePayment } from '@/api/billing/requests';
 
 /**
  * Id for the 'New card' option in select
@@ -445,17 +444,23 @@ export default Vue.extend({
       document.head.appendChild(widgetScript);
     }
 
-    this.$store.dispatch(FETCH_BANK_CARDS);
-
     try {
-      // Fetch payment data when component is mounted
-      this.paymentData = await composePayment(this.workspaceId, this.tariffPlanId, this.shouldSaveCard);
+      // Fetch payment data when component is mounted via store
+      this.paymentData = await this.$store.dispatch(COMPOSE_PAYMENT, {
+        workspaceId: this.workspaceId,
+        tariffPlanId: this.tariffPlanId,
+        shouldSaveCard: this.shouldSaveCard,
+      });
     } catch (e) {
+      const key = 'errors.' + (e as Error).message;
+      const message = this.$te(key) ? this.$t(key) as string : this.$t('billing.notifications.error');
+
       notifier.show({
-        message: this.$t('billing.notifications.error') as string,
+        message: message as string,
         style: 'error',
         time: 5000,
       });
+
       this.$emit('close');
     } finally {
       this.isLoading = false;

src/components/workspace/settings/BillingOverview.vue

@@ -134,7 +134,6 @@ import { CANCEL_SUBSCRIPTION } from '../../../store/modules/workspaces/actionTyp
 import { FETCH_PLANS } from '../../../store/modules/plans/actionTypes';
 import { getCurrencySign } from '@/utils';
 import { ActionType } from '@/components/utils/ConfirmationWindow/types';
-import { composePayment } from '@/api/billing/requests';
 
 export default Vue.extend({
   name: 'BillingOverview',

src/i18n/messages/en.json

@@ -539,6 +539,7 @@
     "readMore": "Read more"
   },
   "errors": {
-    "Something went wrong": "Error occurred. Hawk just informed us about it."
+    "Something went wrong": "Error occurred. Hawk just informed us about it.",
+    "You need to refresh your tokens": "Your session has expired. Please log in again."
   }
 }

src/i18n/messages/ru.json

@@ -539,6 +539,7 @@
     "readMore": "Подробнее"
   },
   "errors": {
-    "Something went wrong": "Произошла ошибка. Хоук уже сообщил нам о ней."
+    "Something went wrong": "Произошла ошибка. Хоук уже сообщил нам о ней.",
+    "You need to refresh your tokens": "Ваша сессия завершена. Чтобы продолжить, авторизуйтесь снова."
   }
 }

src/store/modules/workspaces/actionTypes.js

@@ -77,3 +77,8 @@ export const CANCEL_SUBSCRIPTION = 'CANCEL_SUBSCRIPTION';
  * Process payment via saved card
  */
 export const PAY_WITH_CARD = 'PAY_WITH_CARD';
+
+/**
+ * Prepare payment data
+ */
+export const COMPOSE_PAYMENT = 'COMPOSE_PAYMENT';

src/store/modules/workspaces/index.js

@@ -14,7 +14,8 @@ import {
   GET_BALANCE,
   CHANGE_WORKSPACE_PLAN_FOR_FREE_PLAN,
   CANCEL_SUBSCRIPTION,
-  PAY_WITH_CARD
+  PAY_WITH_CARD,
+  COMPOSE_PAYMENT
 } from './actionTypes';
 import { REMOVE_PROJECTS_BY_WORKSPACE_ID } from '../projects/actionTypes';
 import { RESET_STORE } from '../../methodsTypes';
@@ -366,6 +367,28 @@ const actions = {
     return operation;
   },
 
+  /**
+   * Prepare payment data before opening payment widget
+   *
+   * @param {Function} commit - standard Vuex commit method
+   * @param {object} payload - compose payment payload
+   * @param {string} payload.workspaceId - workspace id
+   * @param {string} payload.tariffPlanId - plan id
+   * @param {boolean} [payload.shouldSaveCard] - whether to save a card
+   * @returns {Promise<import('@/types/before-payment-payload').BeforePaymentPayload>}
+   */
+  async [COMPOSE_PAYMENT](context, { workspaceId, tariffPlanId, shouldSaveCard = false }) {
+    const result = await billingApi.composePayment(workspaceId, tariffPlanId, shouldSaveCard);
+
+    const { data, errors } = result;
+
+    if (errors) {
+      throw new Error(errors[0].message);
+    }
+
+    return data.composePayment;
+  },
+
   /**
    * Fetch balance of workspace or workspaces
    *