@akinon/pz-masterpass 1.19.0

package/src/masterpass-provider.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import Script from 'next/script';
+import { useEffect } from 'react';
+import { checkMasterpass } from './utils/check-masterpass';
+import { init } from './utils/init';
+import {
+  setAccountStatus,
+  setCredentials,
+  setError,
+  setIsDirectPurchase,
+  setLanguage,
+  setMsisdn,
+  setReferenceNo,
+  setToken
+} from './redux/reducer';
+import { MasterpassStatus } from './types';
+import { Image, Modal } from '@akinon/next/components';
+import masterpassLogo from '../assets/img/mp_masterpass-logo.png';
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+
+interface MasterpassProviderProps {
+  children: React.ReactNode;
+  translations?: {
+    genericErrorMessage?: string;
+  };
+}
+
+const getLanguage = (locale: string) => {
+  switch (locale) {
+    case 'en':
+      return 'eng';
+    case 'tr':
+      return 'tur';
+    default:
+      return 'eng';
+  }
+};
+
+export const MasterpassProvider = (props: MasterpassProviderProps) => {
+  const { children } = props;
+  const { preOrder } = useAppSelector((state) => state.checkout);
+  const { otp, error } = useAppSelector((state) => state.masterpass);
+  const { locale } = useLocalization();
+  const dispatch = useAppDispatch();
+
+  const prepareState = async () => {
+    dispatch(setLanguage(getLanguage(locale)));
+
+    const data = await init();
+
+    if (!data) {
+      return;
+    }
+
+    dispatch(setCredentials(data));
+
+    const { status, response, msisdn, token, referenceNo } =
+      await checkMasterpass();
+
+    if (status !== 200) {
+      dispatch(
+        setError(
+          props.translations?.genericErrorMessage ??
+            'An error occurred while initializing Masterpass.'
+        )
+      );
+      return;
+    }
+
+    const accountStatus = response.accountStatus.substring(
+      0,
+      6
+    ) as MasterpassStatus;
+
+    dispatch(setToken(token));
+    dispatch(setMsisdn(msisdn));
+    dispatch(setReferenceNo(referenceNo));
+    dispatch(setAccountStatus(accountStatus));
+
+    if (accountStatus === MasterpassStatus.ListCards) {
+      dispatch(setIsDirectPurchase(false));
+    }
+  };
+
+  useEffect(() => {
+    if (preOrder?.payment_option?.payment_type !== 'masterpass') {
+      return;
+    }
+
+    prepareState();
+  }, [preOrder?.payment_option?.payment_type]);
+
+  useEffect(() => {
+    if (!otp.response) {
+      return;
+    }
+
+    if (
+      otp.response.token &&
+      (otp.response.responseCode === '0000' || otp.response.responseCode === '')
+    ) {
+      dispatch(
+        checkoutApi.endpoints.completeMasterpassPayment.initiate({
+          token: otp.response.token
+        }) as any
+      );
+    }
+  }, [otp.response]);
+
+  if (preOrder?.payment_option?.payment_type !== 'masterpass') {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      <Script src="/mfs-client.min.js" strategy="afterInteractive" />
+      <Script src="/zepto.min.js" strategy="afterInteractive" />
+
+      <Modal
+        portalId="masterpass-error-modal"
+        title={
+          <Image
+            width={140}
+            height={25}
+            src={masterpassLogo.src}
+            alt="Masterpass Logo"
+          />
+        }
+        open={!!error}
+        setOpen={() => dispatch(setError(undefined))}
+      >
+        <div className="p-6">{error}</div>
+      </Modal>
+
+      {children}
+    </>
+  );
+};

package/src/redux/reducer.ts

@@ -0,0 +1,126 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  MasterpassCredentials,
+  MasterpassResponse,
+  MasterpassResponseCardType,
+  MasterpassStatus
+} from '../types';
+
+export interface MasterpassState {
+  error?: string;
+  token?: string;
+  msisdn?: string;
+  referenceNo?: string;
+  language: string;
+  credentials?: MasterpassCredentials;
+  accountStatus?: MasterpassStatus;
+  cards: MasterpassResponseCardType[];
+  selectedCard?: MasterpassResponseCardType;
+  isDirectPurchase?: boolean;
+  otp: {
+    isModalVisible: boolean;
+    modalTitle?: string;
+    response?: MasterpassResponse;
+  };
+  deletion: {
+    isModalVisible: boolean;
+    cardAliasName?: string;
+  };
+}
+
+const initialState: MasterpassState = {
+  language: 'eng',
+  cards: [],
+  otp: {
+    isModalVisible: false
+  },
+  isDirectPurchase: true,
+  deletion: {
+    isModalVisible: false
+  }
+};
+
+const rootSlice = createSlice({
+  name: 'masterpass',
+  initialState,
+  reducers: {
+    setError: (state, { payload }: PayloadAction<string>) => {
+      state.error = payload;
+    },
+    setToken: (state, { payload }: PayloadAction<string>) => {
+      state.token = payload;
+    },
+    setMsisdn: (state, { payload }: PayloadAction<string>) => {
+      state.msisdn = payload;
+    },
+    setReferenceNo: (state, { payload }: PayloadAction<string>) => {
+      state.referenceNo = payload;
+    },
+    setLanguage: (state, { payload }: PayloadAction<string>) => {
+      state.language = payload;
+    },
+    setCredentials: (
+      state,
+      { payload }: PayloadAction<MasterpassCredentials>
+    ) => {
+      state.credentials = payload;
+    },
+    setAccountStatus: (state, { payload }: PayloadAction<MasterpassStatus>) => {
+      state.accountStatus = payload;
+    },
+    setCards: (
+      state,
+      { payload }: PayloadAction<MasterpassResponseCardType[]>
+    ) => {
+      state.cards = payload;
+    },
+    setSelectedCard: (
+      state,
+      { payload }: PayloadAction<MasterpassResponseCardType>
+    ) => {
+      state.selectedCard = payload;
+    },
+    setIsDirectPurchase: (state, { payload }: PayloadAction<boolean>) => {
+      state.isDirectPurchase = payload;
+
+      if (payload) {
+        state.selectedCard = undefined;
+      }
+    },
+    setOtpModalVisible: (state, { payload }: PayloadAction<boolean>) => {
+      state.otp.isModalVisible = payload;
+    },
+    setOtpModalTitle: (state, { payload }: PayloadAction<string>) => {
+      state.otp.modalTitle = payload;
+    },
+    setOtpResponse: (state, { payload }: PayloadAction<MasterpassResponse>) => {
+      state.otp.response = payload;
+    },
+    setDeletionModalVisible: (state, { payload }: PayloadAction<boolean>) => {
+      state.deletion.isModalVisible = payload;
+    },
+    setDeletionCardAliasName: (state, { payload }: PayloadAction<string>) => {
+      state.deletion.cardAliasName = payload;
+    }
+  }
+});
+
+export const {
+  setError,
+  setToken,
+  setMsisdn,
+  setReferenceNo,
+  setLanguage,
+  setCredentials,
+  setAccountStatus,
+  setCards,
+  setSelectedCard,
+  setIsDirectPurchase,
+  setOtpModalVisible,
+  setOtpModalTitle,
+  setOtpResponse,
+  setDeletionModalVisible,
+  setDeletionCardAliasName
+} = rootSlice.actions;
+
+export default rootSlice.reducer;

package/src/types/index.ts

@@ -0,0 +1,111 @@
+declare global {
+  interface Window {
+    // TODO: Add types for MFS
+    MFS: {
+      addCardToMasterPass: (a: any, b: any) => void;
+      checkMasterPass: (a: any, b: MasterpassResponseCallback) => void;
+      commit: (a: any) => void;
+      completeRegistration: (a: any, b: any, c: any) => void;
+      deleteCard: MasterpassAction;
+      directPurchase: (a: any, b: any) => void;
+      forgotPassword: (a: any, b: any) => void;
+      getLastToken: () => string;
+      initiateRecurringPayment: (a: any, b: any) => void;
+      linkCardToClient: MasterpassAction;
+      listCards: (a: any, b: any, c: any) => void;
+      parseQrCode: (a: any, b: any) => void;
+      purchase: (a: any, b: any) => void;
+      purchaseAndRegister: (a: any, b: any) => void;
+      register: MasterpassAction;
+      resendOtp: (a: any, b: any, c: any) => void;
+      setAdditionalParameters: (a: any) => void;
+      setAddress: (address: string) => void;
+      setClientId: (clientId: string) => void;
+      setFingerprint: (a: any) => void;
+      setToken: (a: any) => void;
+      updateUser: (a: any, b: any) => void;
+      validateTransaction: MasterpassAction;
+      verifyPin: (a: any, b: any) => void;
+    };
+    $: any;
+  }
+}
+
+export enum MasterpassStatus {
+  NoAccount = '000000',
+  ListCards = '011100',
+  ShowLinkModal = '011000'
+}
+
+export type MasterpassResponse = {
+  responseCode: string;
+  responseDescription: string;
+  referenceNo?: string;
+  token?: string;
+  transactionId?: string;
+  cardUniqueId?: string;
+};
+
+export type MasterpassResponseCallback<T = MasterpassResponse> = (
+  statusCode: number,
+  response: T
+) => Promise<void> | void;
+
+export type MasterpassAction = (
+  a: JQuery<Element>,
+  b: MasterpassResponseCallback
+) => Promise<void> | void;
+
+export type MasterpassCredentials = {
+  client_id: string;
+  js: string;
+  merchant_id: string;
+  osessionid: string;
+  s3d_return_url: string;
+};
+
+export type MasterpassTokenResponse = {
+  msisdn?: string;
+  req_ref_no?: string;
+  token?: string;
+};
+
+export type CheckMasterpassResponse = {
+  accountStatus: string;
+  amount: string;
+  cards: Array<MasterpassResponseCardType>;
+  installmentCount: string;
+  internalResponseCode: string;
+  internalResponseDescription: string;
+  newMsisdn: string;
+  orderNo: string;
+  referenceNo: string;
+  responseCode: string;
+  responseDescription: string;
+  token: string;
+  transactionId: string;
+  url3D: string;
+  url3DError: string;
+  url3DSuccess: string;
+};
+
+export type MasterpassResponseCardType = {
+  BankIca: string;
+  CardStatus: string;
+  Name: string;
+  ProductName: string;
+  UniqueId: string;
+  Value1: string;
+};
+
+export interface RemoveModalProps {
+  isOpen: boolean;
+  setOpen: (arg: boolean) => void;
+  onConfirm: () => void;
+  isLoading: boolean;
+}
+
+export interface OtpModalProps {
+  title?: string;
+  isOpen?: boolean;
+}

package/src/utils/check-masterpass.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { formCreator } from '.';
+import { CheckMasterpassResponse, MasterpassTokenResponse } from '../types';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+
+export const checkMasterpass = () =>
+  new Promise<{
+    status: number;
+    response?: CheckMasterpassResponse;
+    msisdn?: string;
+    token?: string;
+    referenceNo?: string;
+  }>(async (resolve) => {
+    let data: MasterpassTokenResponse;
+
+    try {
+      const response = await fetch(
+        buildClientRequestUrl('/orders/masterpass-token')
+      );
+
+      if (response.status !== 200) {
+        resolve({
+          status: response.status
+        });
+
+        return;
+      }
+
+      data = await response.json();
+
+      const fields = [
+        {
+          name: 'token',
+          value: data.token ?? ''
+        },
+        {
+          name: 'referenceNo',
+          value: data.req_ref_no ?? ''
+        },
+        { name: 'userId', value: data.msisdn ?? '' },
+        { name: 'sendSmsLanguage', value: 'eng' },
+        { name: 'sendSms', value: 'N' }
+      ];
+
+      const form = formCreator({
+        id: 'check-masterpass-form',
+        fields
+      });
+
+      window.MFS.checkMasterPass(
+        $(form),
+        (status: number, response: CheckMasterpassResponse) => {
+          resolve({
+            status,
+            response,
+            msisdn: data.msisdn ?? '',
+            token: data.token ?? '',
+            referenceNo: data.req_ref_no ?? ''
+          });
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  });

package/src/utils/get-masterpass-cards.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { CheckMasterpassResponse, MasterpassResponseCardType } from '../types';
+
+export const getMasterpassCards = ({
+  msisdn,
+  token
+}: {
+  msisdn: string;
+  token: string;
+}) =>
+  new Promise<{
+    statusCode: number;
+    cards: Array<MasterpassResponseCardType>;
+    description: string;
+  }>((resolve) => {
+    try {
+      window.MFS?.listCards(
+        msisdn,
+        token,
+        (statusCode: number, response: CheckMasterpassResponse) => {
+          resolve({
+            statusCode,
+            cards: response.cards,
+            description: response.responseDescription
+          });
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  });

package/src/utils/index.ts

@@ -0,0 +1,177 @@
+import { CompleteCreditCardParams } from '@akinon/next/data/client/checkout';
+import { MasterpassResponseCardType } from '../types';
+import { getSession } from 'next-auth/react';
+
+type Field = {
+  name: string;
+  value: string;
+};
+
+interface FromCreator {
+  id: string;
+  fields: Field[];
+}
+
+const setMFSParams = ({ amount }: { amount: string }) => {
+  window.MFS.setAdditionalParameters({
+    order_product_name_arr: ['TEST'],
+    order_product_code_arr: ['TST'],
+    order_price_arr: [amount],
+    order_qty_arr: ['1'],
+    order_product_info_arr: ['test']
+  });
+};
+
+export const formCreator = (args: FromCreator) => {
+  const { id, fields } = args;
+
+  const form = document.createElement('form');
+  form.setAttribute('method', 'POST');
+  form.setAttribute('id', id);
+
+  fields.forEach((field) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'hidden');
+    input.setAttribute('name', field.name);
+    input.setAttribute('value', field.value);
+    form.appendChild(input);
+  });
+
+  return form;
+};
+
+export const getCreditCardType = (number: string) => {
+  if (/^5[1-5]/.test(number)) {
+    return 'mastercard';
+  }
+
+  if (/^4/.test(number)) {
+    return 'visa';
+  }
+
+  if (/^3[47]/.test(number)) {
+    return 'amex';
+  }
+
+  if (/^(?:9792|65\d{2}|36|2205)/.test(number)) {
+    return 'troy';
+  }
+
+  return 'other';
+};
+
+export const buildPurchaseForm = async ({
+  token,
+  orderNo,
+  msisdn,
+  referenceNo,
+  merchantId,
+  selectedCard,
+  amount
+}: {
+  token: string;
+  orderNo: string;
+  msisdn: string;
+  referenceNo: string;
+  merchantId: string;
+  selectedCard: MasterpassResponseCardType;
+  amount: string;
+}) => {
+  const session = await getSession();
+
+  setMFSParams({ amount });
+
+  const fields = [
+    {
+      name: 'token',
+      value: token
+    },
+    {
+      name: 'orderNo',
+      value: orderNo
+    },
+    {
+      name: 'referenceNo',
+      value: referenceNo
+    },
+    { name: 'amount', value: amount },
+    { name: 'userId', value: String(session?.user?.pk ?? '') },
+    { name: 'msisdn', value: msisdn },
+    { name: 'installmentCount', value: '' },
+    { name: 'macroMerchantId', value: merchantId },
+    { name: 'sendSmsLanguage', value: 'eng' },
+    { name: 'sendSms', value: 'N' },
+    { name: 'cardName', value: selectedCard?.Name ?? '' },
+    { name: 'listAccountName', value: selectedCard?.Name ?? '' },
+    { name: 'cardAliasName', value: selectedCard?.Name ?? '' }
+  ];
+
+  const form = formCreator({
+    id: 'mp-purchase-form',
+    fields
+  });
+
+  return form;
+};
+
+export const buildDirectPurchaseForm = async (
+  {
+    token,
+    orderNo,
+    msisdn,
+    referenceNo,
+    merchantId,
+    amount
+  }: {
+    token: string;
+    orderNo: string;
+    msisdn: string;
+    referenceNo: string;
+    merchantId: string;
+    amount: string;
+  },
+  params?: CompleteCreditCardParams
+) => {
+  const session = await getSession();
+
+  setMFSParams({ amount });
+
+  const rtaPan = params.card_number;
+  const expiryDate =
+    params.card_year.slice(-2) + params.card_month.padStart(2, '0');
+  const cardHolderName = params.card_holder;
+  const cvc = params.card_cvv;
+
+  const fields = [
+    {
+      name: 'token',
+      value: token
+    },
+    {
+      name: 'orderNo',
+      value: orderNo
+    },
+    {
+      name: 'referenceNo',
+      value: referenceNo
+    },
+    { name: 'amount', value: amount },
+    { name: 'userId', value: String(session?.user?.pk ?? '') },
+    { name: 'msisdn', value: msisdn },
+    { name: 'installmentCount', value: '' },
+    { name: 'macroMerchantId', value: merchantId },
+    { name: 'sendSmsLanguage', value: 'eng' },
+    { name: 'sendSms', value: 'N' },
+    { name: 'rtaPan', value: rtaPan },
+    { name: 'expiryDate', value: expiryDate },
+    { name: 'cardHolderName', value: cardHolderName },
+    { name: 'cvc', value: cvc }
+  ];
+
+  const form = formCreator({
+    id: 'mp-direct-purchase-form',
+    fields
+  });
+
+  return form;
+};

package/src/utils/init.ts

@@ -0,0 +1,17 @@
+import { buildClientRequestUrl } from '@akinon/next/utils';
+import { MasterpassCredentials } from '../types';
+
+export const init = () =>
+  new Promise<MasterpassCredentials>(async (resolve) => {
+    try {
+      const response = await fetch(buildClientRequestUrl('/masterpass-js'));
+      const data: MasterpassCredentials = await response.json();
+
+      window.MFS.setClientId(data.client_id);
+      window.MFS.setAddress(data.js);
+
+      resolve(data);
+    } catch (error) {
+      console.error(error);
+    }
+  });