feat(VCST-3955): Add datatrans payment method

client-app/pages/account/order-payment.vue

@@ -247,22 +247,29 @@
                   <PaymentProcessingManual v-if="paymentMethodCode === 'DefaultManualPaymentMethod'" />
 
                   <PaymentProcessingAuthorizeNet
-                    v-if="paymentMethodCode === 'AuthorizeNetPaymentMethod'"
+                    v-else-if="paymentMethodCode === 'AuthorizeNetPaymentMethod'"
                     :order="order"
                     :disabled="loading"
                     @success="success = true"
                     @fail="failure = true"
                   />
 
                   <PaymentProcessingSkyflow
-                    v-if="paymentMethodCode === 'SkyflowPaymentMethod'"
+                    v-else-if="paymentMethodCode === 'SkyflowPaymentMethod'"
                     :order="order"
                     @success="success = true"
                     @fail="failure = true"
                   />
 
                   <PaymentProcessingCyberSource
-                    v-if="paymentMethodCode === 'CyberSourcePaymentMethod'"
+                    v-else-if="paymentMethodCode === 'CyberSourcePaymentMethod'"
+                    :order="order"
+                    @success="success = true"
+                    @fail="failure = true"
+                  />
+
+                  <PaymentProcessingDatatrans
+                    v-else-if="paymentMethodCode === 'DatatransPaymentMethod'"
                     :order="order"
                     @success="success = true"
                     @fail="failure = true"
@@ -321,6 +328,7 @@ import type { Optional } from "utility-types";
 import AddOrUpdateAddressModal from "@/shared/account/components/add-or-update-address-modal.vue";
 import PaymentProcessingAuthorizeNet from "@/shared/payment/components/payment-processing-authorize-net.vue";
 import PaymentProcessingCyberSource from "@/shared/payment/components/payment-processing-cyber-source.vue";
+import PaymentProcessingDatatrans from "@/shared/payment/components/payment-processing-datatrans.vue";
 import PaymentProcessingSkyflow from "@/shared/payment/components/payment-processing-skyflow.vue";
 
 interface IProps {
@@ -374,6 +382,9 @@ const paymentMethodType = computed<number | undefined>(() => payment.value?.paym
 const paymentMethodCode = computed<string | undefined>(() => payment.value?.paymentMethod?.code);
 
 function tryAgain() {
+  const url = new URL(globalThis.location.href);
+  url.search = "";
+  globalThis.history.replaceState({}, document.title, url.toString());
   location.reload();
 }
 

client-app/pages/checkout/payment.vue

@@ -26,18 +26,28 @@
             @success="onPaymentResult(true)"
             @fail="onPaymentResult(false)"
           />
+
           <PaymentProcessingSkyflow
             v-else-if="paymentTypeName === 'SkyflowPaymentMethod'"
             :order="placedOrder"
             @success="onPaymentResult(true)"
             @fail="onPaymentResult(false)"
           />
+
           <PaymentProcessingCyberSource
             v-else-if="paymentTypeName === 'CyberSourcePaymentMethod'"
             :order="placedOrder"
             @success="onPaymentResult(true)"
             @fail="onPaymentResult(false)"
           />
+
+          <PaymentProcessingDatatrans
+            v-else-if="paymentTypeName === 'DatatransPaymentMethod'"
+            :order="placedOrder"
+            @success="onPaymentResult(true)"
+            @fail="onPaymentResult(false)"
+          />
+
           <ExtensionPointList
             v-else-if="
               paymentTypeName &&
@@ -70,6 +80,7 @@ import { PaymentActionType, PaymentProcessingRedirection } from "@/shared/paymen
 import type { PaymentInType } from "@/core/api/graphql/types";
 import PaymentProcessingAuthorizeNet from "@/shared/payment/components/payment-processing-authorize-net.vue";
 import PaymentProcessingCyberSource from "@/shared/payment/components/payment-processing-cyber-source.vue";
+import PaymentProcessingDatatrans from "@/shared/payment/components/payment-processing-datatrans.vue";
 import PaymentProcessingSkyflow from "@/shared/payment/components/payment-processing-skyflow.vue";
 
 const router = useRouter();

client-app/shared/payment/components/bank-card-form.test.ts

@@ -23,7 +23,7 @@ vi.mock("vue-i18n", () => {
 
 const EXPIRATION_FIELD_LABEL = "shared.payment.bank_card_form.expiration_date_label";
 const ERROR_MESSAGES = {
-  MONTH: "shared.payment.authorize_net.errors.month",
+  MONTH: "shared.payment.bank_card_form.errors.month",
   MONTH_INCOMPLETE: "shared.payment.bank_card_form.month_label must be exactly 2 characters",
   YEAR_INCOMPLETE: "shared.payment.bank_card_form.year_label must be exactly 2 characters",
 } as const;

client-app/shared/payment/components/bank-card-form.vue

@@ -139,7 +139,7 @@ const monthYupSchema = yup
   .string()
   .required()
   .length(2)
-  .matches(/^(0?[1-9]|1[0-2])$/, t("shared.payment.authorize_net.errors.month"))
+  .matches(/^(0?[1-9]|1[0-2])$/, t("shared.payment.bank_card_form.errors.month"))
   .label(labels.value.monthLabel);
 
 const validationSchema = toTypedSchema(

client-app/shared/payment/components/index.ts

@@ -1,3 +1,4 @@
+export { default as PaymentProcessingDatatrans } from "./payment-processing-datatrans.vue";
 export { default as PaymentProcessingManual } from "./payment-processing-manual.vue";
 export { default as PaymentProcessingRedirection } from "./payment-processing-redirection.vue";
 export { default as PaymentProcessingSkyflow } from "./payment-processing-skyflow.vue";

client-app/shared/payment/components/payment-processing-authorize-net.vue

@@ -29,7 +29,7 @@
         data-test-id="pay-now-button"
         @click="sendPaymentData"
       >
-        {{ $t("shared.payment.authorize_net.pay_now_button") }}
+        {{ $t("shared.payment.bank_card_form.pay_now_button") }}
       </VcButton>
     </div>
   </div>
@@ -118,27 +118,27 @@ function showErrors(messages: Accept.Message[]) {
   messages.forEach(({ code, text }) => {
     switch (code) {
       case "E_WC_05":
-        bankCardErrors.value.number = t("shared.payment.authorize_net.errors.number");
+        bankCardErrors.value.number = t("shared.payment.bank_card_form.errors.card_number");
         break;
 
       case "E_WC_06":
-        bankCardErrors.value.month = t("shared.payment.authorize_net.errors.month");
+        bankCardErrors.value.month = t("shared.payment.bank_card_form.errors.month");
         break;
 
       case "E_WC_07":
-        bankCardErrors.value.year = t("shared.payment.authorize_net.errors.year");
+        bankCardErrors.value.year = t("shared.payment.bank_card_form.errors.year");
         break;
 
       case "E_WC_08":
-        bankCardErrors.value.year = t("shared.payment.authorize_net.errors.expiration_date");
+        bankCardErrors.value.year = t("shared.payment.bank_card_form.errors.expiration_date");
         break;
 
       case "E_WC_15":
-        bankCardErrors.value.securityCode = t("shared.payment.authorize_net.errors.security_code");
+        bankCardErrors.value.securityCode = t("shared.payment.bank_card_form.errors.security_code");
         break;
 
       case "E_WC_17":
-        bankCardErrors.value.cardholderName = t("shared.payment.authorize_net.errors.cardholder_name");
+        bankCardErrors.value.cardholderName = t("shared.payment.bank_card_form.errors.cardholder_name");
         break;
 
       default:

client-app/shared/payment/components/payment-processing-cyber-source.vue

@@ -63,7 +63,7 @@
       data-test-id="pay-now-button"
       @click="sendPaymentData"
     >
-      {{ $t("shared.payment.authorize_net.pay_now_button") }}
+      {{ $t("shared.payment.bank_card_form.pay_now_button") }}
     </VcButton>
   </div>
 </template>
@@ -259,7 +259,6 @@ async function createToken(options: Record<string, unknown>): Promise<string> {
   return new Promise((resolve, reject) => {
     microform.createToken(options, (err: unknown, token: string) => {
       if (err) {
-        // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
         reject(err);
       } else {
         resolve(token);
@@ -376,8 +375,8 @@ async function useDynamicScript(url: string, integrity?: string): Promise<void>
 }
 
 function removeScript() {
-  if (scriptTag.value && scriptTag.value.parentNode) {
-    scriptTag.value.parentNode.removeChild(scriptTag.value);
+  if (scriptTag.value) {
+    scriptTag.value.remove();
   }
 }