@akinon/pz-masterpass 1.19.0

package/src/views/link-modal/index.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { Button, LoaderSpinner, Modal } from 'components';
+import { useCallback, useEffect, useState } from 'react';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+import {
+  setAccountStatus,
+  setOtpModalVisible,
+  setOtpResponse
+} from '../../redux/reducer';
+import { MasterpassStatus } from '../../types';
+import { formCreator } from '../../utils';
+import { Image } from '@akinon/next/components/image';
+
+const defaultTranslations = {
+  use_masterpass_cards:
+    'You have cards registered to your Masterpass account. Would you like to use your cards?',
+  use: 'Use'
+};
+
+export interface MasterpassLinkModalProps {
+  translations?: typeof defaultTranslations;
+}
+
+export const MasterpassLinkModal = ({
+  translations
+}: MasterpassLinkModalProps) => {
+  const { msisdn, token, accountStatus, otp, language } = useAppSelector(
+    (state) => state.masterpass
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
+
+  const onLinkButtonClick = useCallback(() => {
+    if (!msisdn || !token) {
+      return;
+    }
+
+    const fields = [
+      { name: 'msisdn', value: msisdn },
+      { name: 'token', value: token },
+      { name: 'referenceNo', value: '' },
+      { name: 'sendSmsLanguage', value: language },
+      { name: 'sendSms', value: 'N' }
+    ];
+
+    const form = formCreator({
+      id: 'on-link-button-form',
+      fields
+    });
+
+    setError(null);
+    setIsLoading(true);
+
+    window.MFS?.linkCardToClient($(form), async (statusCode, response) => {
+      setIsLoading(false);
+
+      dispatch(
+        setOtpModalVisible(['5001', '5008'].includes(response.responseCode))
+      );
+
+      if (response.responseCode === '0000') {
+        setIsOpen(false);
+      } else {
+        setError(response.responseDescription);
+      }
+    });
+  }, [msisdn, token]);
+
+  useEffect(() => {
+    if (accountStatus === MasterpassStatus.ShowLinkModal) {
+      setIsOpen(true);
+    }
+  }, [accountStatus]);
+
+  useEffect(() => {
+    if (otp.isModalVisible) {
+      setIsOpen(false);
+    }
+  }, [otp.isModalVisible]);
+
+  useEffect(() => {
+    if (
+      otp.response?.responseCode === '0000' ||
+      otp.response?.responseCode === '3838' ||
+      otp.response?.responseCode === ''
+    ) {
+      dispatch(setAccountStatus(MasterpassStatus.ListCards));
+      dispatch(setOtpResponse(undefined));
+    }
+  }, [otp.response]);
+
+  return (
+    <Modal
+      portalId="masterpass-check-user"
+      title={
+        <Image
+          width={120}
+          height={25}
+          src={masterpassLogo.src}
+          alt="Masterpass Logo"
+        />
+      }
+      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+      open={isOpen}
+      setOpen={setIsOpen}
+    >
+      <div className="px-6">
+        <h3 className="text-center mt-4 text-base">
+          {translations?.use_masterpass_cards ??
+            defaultTranslations.use_masterpass_cards}
+        </h3>
+        <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-10">
+              <LoaderSpinner className="w-4 h-4" />
+            </div>
+          ) : (
+            <Button
+              className="py-3 h-auto"
+              onClick={onLinkButtonClick}
+              disabled={isLoading}
+            >
+              {translations?.use ?? defaultTranslations.use}
+            </Button>
+          )}
+          {error && <p className="text-error text-xs text-center">{error}</p>}
+        </div>
+      </div>
+    </Modal>
+  );
+};

package/src/views/otp-modal/index.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { Modal } from '@akinon/next/components';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { formCreator } from '../../utils';
+
+import CountdownTimer from '../countdown-timer/countdown-timer';
+import { OtpForm, OtpFormProps } from './otp-form';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { setOtpResponse } from '../../redux/reducer';
+import { Image } from '@akinon/next/components/image';
+
+export interface MasterpassOtpModalProps {
+  translations?: {
+    1999?: string;
+    5192?: string;
+    5001?: string;
+    5008?: string;
+  } & OtpFormProps['translations'];
+}
+
+export const MasterpassOtpModal = ({
+  translations
+}: MasterpassOtpModalProps) => {
+  const { token, otp, language } = useAppSelector((state) => state.masterpass);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [otpError, setOtpError] = useState<string | null>(null);
+  const [modalTitle, setModalTitle] = useState(otp.modalTitle);
+  const [isBusy, setIsBusy] = useState(false);
+  const [otpTime, setOtpTime] = useState(0);
+  const [otpRef, setOtpRef] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
+
+  const onFormSubmit = useCallback(
+    (data: { otp_code: string }) => {
+      if (!token || !language) {
+        return;
+      }
+
+      const fields = [
+        { name: 'sendSmsLanguage', value: language },
+        { name: 'token', value: token },
+        { name: 'sendSms', value: 'N' },
+        { name: 'validationCode', value: data.otp_code },
+        { name: 'pinType', value: 'otp' }
+      ];
+
+      const form = formCreator({
+        id: 'otp-masterpass-form',
+        fields
+      });
+
+      setOtpError(null);
+      setIsBusy(true);
+
+      window.MFS.validateTransaction($(form), async (statusCode, response) => {
+        setIsBusy(false);
+        setOtpRef(response.referenceNo);
+
+        if (['5001', '5008'].includes(response.responseCode)) {
+          startOtpCountdown();
+
+          setModalTitle(
+            translations?.[response.responseCode] ||
+              response.responseDescription
+          );
+        } else if (response.responseDescription.length) {
+          setOtpError(response.responseDescription);
+        } else {
+          setIsModalOpen(false);
+          dispatch(setOtpResponse(response));
+        }
+      });
+    },
+    [token, language]
+  );
+
+  const resendSms = () => {
+    const token = window.MFS.getLastToken();
+
+    if (!token && isBusy) {
+      return;
+    }
+
+    setIsBusy(true);
+
+    window.MFS.resendOtp(token, language, () => {
+      startOtpCountdown();
+      setIsBusy(false);
+    });
+  };
+
+  const startOtpCountdown = () => {
+    const otpTimeout = 120000;
+    const nowInMs = new Date().getTime();
+
+    setOtpTime(otpTimeout + nowInMs);
+  };
+
+  useEffect(() => {
+    setIsModalOpen(otp.isModalVisible);
+  }, [otp.isModalVisible]);
+
+  useEffect(() => {
+    if (isModalOpen) {
+      startOtpCountdown();
+    }
+  }, [isModalOpen]);
+
+  return (
+    <Modal
+      portalId="otp-masterpass"
+      title={
+        <Image
+          width={120}
+          height={21}
+          src={masterpassLogo.src}
+          alt="Masterpass Logo"
+        />
+      }
+      open={isModalOpen}
+      setOpen={setIsModalOpen}
+      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+    >
+      <div className="px-6 py-4">
+        <p className="text-center">{modalTitle}</p>
+
+        <OtpForm
+          formError={otpError}
+          onSubmit={onFormSubmit}
+          otpRef={otpRef}
+          translations={translations}
+        />
+
+        <div className="mt-2 flex justify-center">
+          <CountdownTimer
+            resendSmsFetching={isBusy}
+            targetDate={otpTime}
+            resendSms={resendSms}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};

package/src/views/otp-modal/otp-form.tsx

@@ -0,0 +1,86 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Input } from 'components';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+const defaultTranslations = {
+  enter_the_verification_code: 'Enter the verification code',
+  sms_code: 'SMS Code',
+  verify: 'Verify'
+};
+
+export interface OtpFormProps {
+  onSubmit: (data: any) => void;
+  formError: string | null;
+  otpRef: string | null;
+  translations?: typeof defaultTranslations;
+}
+
+export const OtpForm = ({
+  onSubmit,
+  formError,
+  otpRef,
+  translations
+}: OtpFormProps) => {
+  const formSchema = () =>
+    yup.object().shape({
+      otp_code: yup
+        .string()
+        .max(
+          6,
+          translations?.enter_the_verification_code ??
+            defaultTranslations.enter_the_verification_code
+        )
+        .min(
+          6,
+          translations?.enter_the_verification_code ??
+            defaultTranslations.enter_the_verification_code
+        )
+        .required(
+          translations?.enter_the_verification_code ??
+            defaultTranslations.enter_the_verification_code
+        )
+    });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(formSchema())
+  });
+
+  useEffect(() => {
+    reset();
+  }, [otpRef]);
+
+  return (
+    <form>
+      <div className="mt-2">
+        <Input
+          autoComplete="off"
+          minLength={6}
+          maxLength={6}
+          max="999999"
+          min="000000"
+          label={translations?.sms_code ?? defaultTranslations.sms_code}
+          control={control}
+          {...register('otp_code')}
+          error={errors.otp_code}
+        />
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          className="w-full uppercase mt-2"
+        >
+          {translations?.verify ?? defaultTranslations.verify}
+        </Button>
+        {formError && (
+          <p className="mt-2 text-error text-xs text-center">{formError}</p>
+        )}
+      </div>
+    </form>
+  );
+};