@akinon/pz-masterpass 1.19.0

package/src/views/card-list/index.tsx

@@ -0,0 +1,166 @@
+'use client';
+
+import { LoaderSpinner } from 'components';
+import { MasterpassStatus } from '../../types';
+import { getCreditCardType } from '../../utils';
+
+import amex from '../../../assets/img/mp_amex.jpg';
+import mastercard from '../../../assets/img/mp_mastercard.png';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+import other from '../../../assets/img/mp_other.png';
+import troy from '../../../assets/img/mp_troy.png';
+import visa from '../../../assets/img/mp_visa.png';
+
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { useCards } from '../../hooks/use-cards';
+import { useDeleteCard } from '../../hooks/use-delete-card';
+import { useSetBinNumberMutation } from '@akinon/next/data/client/checkout';
+import { Button, Image } from '@akinon/next/components';
+import { twMerge } from 'tailwind-merge';
+import { setIsDirectPurchase, setSelectedCard } from '../../redux/reducer';
+import { setInstallmentOptions } from '@akinon/next/redux/reducers/checkout';
+
+const cardImages = {
+  amex,
+  mastercard,
+  troy,
+  visa,
+  other
+};
+
+const defaultTranslations = {
+  title: 'Select a card to pay with',
+  pay_with_new_card: 'Pay with a new card',
+  retryFetchCards: 'Retry Fetching Cards'
+};
+
+export interface MasterpassCardListProps {
+  className?: string;
+  translations?: typeof defaultTranslations;
+}
+
+export const MasterpassCardList = ({
+  className,
+  translations
+}: MasterpassCardListProps) => {
+  const { preOrder } = useAppSelector((state) => state.checkout);
+  const { accountStatus, isDirectPurchase, selectedCard } = useAppSelector(
+    (state) => state.masterpass
+  );
+  const [setMasterpassBinNumber] = useSetBinNumberMutation();
+  const { cards, loading, error, refreshCards } = useCards({ skipData: false });
+  const { DeleteButton } = useDeleteCard();
+  const dispatch = useAppDispatch();
+
+  const switchPaymentButton = (
+    <a
+      href="#"
+      className="text-xs underline"
+      onClick={(e) => {
+        e.preventDefault();
+        dispatch(setIsDirectPurchase(true));
+        dispatch(setInstallmentOptions([]));
+      }}
+    >
+      {translations?.pay_with_new_card ?? defaultTranslations.pay_with_new_card}
+    </a>
+  );
+
+  if (accountStatus !== MasterpassStatus.ListCards) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="p-5">
+        <LoaderSpinner className="w-8 h-8" />
+      </div>
+    );
+  }
+
+  if (error && !isDirectPurchase) {
+    return (
+      <div className="flex flex-col items-center">
+        <div className="p-5">{error}</div>
+        <Button
+          className="w-48 mb-5"
+          onClick={() => {
+            refreshCards();
+          }}
+        >
+          {translations?.retryFetchCards ?? defaultTranslations.retryFetchCards}
+        </Button>
+
+        {switchPaymentButton}
+      </div>
+    );
+  }
+
+  if (
+    preOrder.payment_option?.payment_type !== 'masterpass' ||
+    !cards?.length ||
+    isDirectPurchase
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={twMerge('w-full', className)}>
+      <Image
+        className="mb-4"
+        width={140}
+        height={25}
+        src={masterpassLogo.src}
+        alt="Masterpass Logo"
+      />
+      <p className="text-xs">
+        {translations?.title ?? defaultTranslations.title}
+      </p>
+      <ul className="mt-4 text-xs">
+        {cards?.map((card) => {
+          return (
+            <li
+              key={card.UniqueId}
+              className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center space-x-2 cursor-pointer"
+              onClick={async () => {
+                await setMasterpassBinNumber(
+                  card.Value1.substring(0, 6)
+                ).unwrap();
+
+                dispatch(setSelectedCard(card));
+              }}
+            >
+              <input
+                name="masterpass-card"
+                type="radio"
+                checked={selectedCard?.UniqueId === card.UniqueId}
+                value={card.Name}
+                id={card.UniqueId}
+                className="mr-2"
+                onChange={(e) => e.preventDefault()}
+              />
+              <label
+                htmlFor={card.UniqueId}
+                className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between"
+              >
+                <p className="w-full lg:w-1/3">{card.Name}</p>
+                <p className="w-full text-[10px] lg:w-1/3">{card.Value1}</p>
+                <Image
+                  className="w-8 h-6 object-contain flex items-center justify-center mr-4"
+                  width={50}
+                  height={50}
+                  src={cardImages[getCreditCardType(card.Value1)].src}
+                  alt={card.Name}
+                />
+              </label>
+
+              <DeleteButton cardAliasName={card.Name} />
+            </li>
+          );
+        })}
+      </ul>
+
+      {switchPaymentButton}
+    </div>
+  );
+};

package/src/views/card-registration/index.tsx

@@ -0,0 +1,250 @@
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { Button, Checkbox, Icon, Input, LoaderSpinner } from 'components';
+import React, { useEffect, useState } from 'react';
+import { RootState } from 'redux/store';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+import { formCreator } from '../../utils';
+import { InfoModal } from '../info-modal';
+
+import {
+  setAccountStatus,
+  setIsDirectPurchase,
+  setOtpModalVisible,
+  setOtpResponse
+} from '../../redux/reducer';
+import { MasterpassStatus } from '../../types';
+import { useCards } from '../../hooks/use-cards';
+import { Image } from '@akinon/next/components/image';
+import { twMerge } from 'tailwind-merge';
+import { setInstallmentOptions } from '@akinon/next/redux/reducers/checkout';
+
+const defaultTranslations = {
+  enter_card_name: 'Enter card name',
+  continue: 'Continue',
+  pay_with_my_masterpass_card: 'Pay with my Masterpass card',
+  terms_and_conditions: 'Masterpass terms and conditions',
+  card_registration_consent:
+    'I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.'
+};
+
+export const MasterpassCardRegistration = ({
+  getValues,
+  className,
+  translations
+}: {
+  getValues: () => Record<string, string | number | boolean>;
+  className?: string;
+  translations?: typeof defaultTranslations;
+}) => {
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
+  const { msisdn, token, language, otp, isDirectPurchase } = useAppSelector(
+    (state) => state.masterpass
+  );
+
+  const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
+  const [isAgreementChecked, setIsAgreementChecked] = useState(false);
+  const [accountAliasName, setAccountAliasName] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+  const [isBusy, setIsBusy] = useState(false);
+  const { refreshCards } = useCards();
+
+  const dispatch = useAppDispatch();
+
+  const registerCard = async () => {
+    const formValues = getValues();
+    setFormError(null);
+
+    if (isBusy) return;
+
+    if (!accountAliasName) {
+      setFormError(
+        translations?.enter_card_name ?? defaultTranslations.enter_card_name
+      );
+      return;
+    }
+
+    const cardNumber = String(formValues['card_number']).replace(/\s/g, '');
+    const cardCvv = String(formValues['card_cvv']);
+    const cardYear = String(formValues['card_year']);
+    const cardMonth = String(formValues['card_month']);
+    const expirationMonth = `0${cardMonth}`.slice(-2);
+    const expirationYear = cardYear?.slice(2, 4);
+
+    const fields = [
+      { name: 'userId', value: msisdn },
+      { name: 'msisdn', value: msisdn },
+      {
+        name: 'token',
+        value: token
+      },
+      { name: 'sendSmsLanguage', value: language },
+      { name: 'accountAliasName', value: accountAliasName },
+      { name: 'rtaPan', value: cardNumber },
+      { name: 'expiryDate', value: `${expirationYear}${expirationMonth}` },
+      { name: 'cvc', value: cardCvv },
+      { name: 'sendSms', value: 'N' },
+      { name: 'actionType', value: 'A' },
+      { name: 'clientIp', value: '' },
+      { name: 'delinkReason', value: '' },
+      { name: 'eActionType', value: 'A' },
+      { name: 'cardTypeFlag', value: '05' },
+      { name: 'cpinFlag', value: 'Y' },
+      { name: 'defaultAccount', value: 'Y' },
+      { name: 'mmrpConfig', value: '110010' },
+      { name: 'identityVerificationFlag', value: 'N' },
+      { name: 'mobileAccountConfig', value: 'MWA' },
+      { name: 'timeZone', value: '+01' },
+      { name: 'uiChannelType', value: '6' },
+      { name: 'clientType', value: '1' }
+    ];
+
+    const form = formCreator({
+      id: 'register-masterpass-form',
+      fields
+    });
+
+    form
+      .querySelectorAll<HTMLInputElement>('[name="msisdn"], [name="userId"]')
+      .forEach((input) => {
+        input.value = `9${preOrder.user_phone_number}`;
+      });
+
+    setIsBusy(true);
+
+    window.MFS.register($(form), async (statusCode, response) => {
+      setIsBusy(false);
+
+      const showOtpModal = ['5001', '5008'].includes(response.responseCode);
+
+      dispatch(setOtpModalVisible(showOtpModal));
+
+      if (showOtpModal) {
+        return;
+      }
+
+      if (response.responseCode === '0000' || response.responseCode === '') {
+        setIsBusy(false);
+        setIsAgreementChecked(false);
+        setAccountAliasName('');
+        dispatch(setAccountStatus(MasterpassStatus.ListCards));
+        refreshCards();
+        dispatch(setOtpModalVisible(false));
+      } else {
+        setFormError(response.responseDescription);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (
+      otp.response?.responseCode === '0000' ||
+      otp.response?.responseCode === '3838' ||
+      otp.response?.responseCode === ''
+    ) {
+      dispatch(setAccountStatus(MasterpassStatus.ListCards));
+      dispatch(setOtpResponse(undefined));
+      setAccountAliasName('');
+      refreshCards();
+      dispatch(setOtpModalVisible(false));
+    }
+  }, [otp.response]);
+
+  if (
+    preOrder.payment_option?.payment_type !== 'masterpass' ||
+    !isDirectPurchase ||
+    !token
+  ) {
+    return null;
+  }
+
+  return (
+    <div className={twMerge('w-full', className)}>
+      <InfoModal open={isInfoModalOpen} setOpen={setIsInfoModalOpen} />
+
+      <div className="border border-[#ddd]">
+        <div className="p-4">
+          <div className="flex items-center">
+            <div className="mr-4">
+              <Checkbox
+                checked={isAgreementChecked}
+                onChange={() => {
+                  setIsAgreementChecked(!isAgreementChecked);
+                }}
+              />
+            </div>
+            <div className="mr-4">
+              <Image
+                className="w-40 h-6 object-contain"
+                width={140}
+                height={25}
+                src={masterpassLogo.src}
+                alt="masterpass"
+              />
+            </div>
+            <div
+              className="cursor-pointer w-5 h-5 ml-auto"
+              onClick={() => setIsInfoModalOpen(true)}
+            >
+              <Icon name="bell" />
+            </div>
+          </div>
+          <p className="mt-5 text-sm">
+            {translations?.card_registration_consent ??
+              defaultTranslations.card_registration_consent}
+          </p>
+          <span
+            onClick={() => setIsInfoModalOpen(true)}
+            className="mt-5 text-sm underline cursor-pointer"
+          >
+            {translations?.terms_and_conditions ??
+              defaultTranslations.terms_and_conditions}
+          </span>
+          {isAgreementChecked && (
+            <div className="mt-5">
+              <Input
+                label={
+                  translations?.enter_card_name ??
+                  defaultTranslations.enter_card_name
+                }
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setAccountAliasName(e.target.value);
+                }}
+              />
+              <Button
+                type="button"
+                onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+                  event.preventDefault();
+                  registerCard();
+                }}
+                className="w-full uppercase mt-2"
+              >
+                {!isBusy ? (
+                  translations?.continue ?? defaultTranslations.continue
+                ) : (
+                  <LoaderSpinner className="border-b-white w-4 h-4" />
+                )}
+              </Button>
+
+              {formError && (
+                <p className="mt-2 text-error text-xs">{formError}</p>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <a
+        href="#"
+        className="block text-xs underline mt-5"
+        onClick={(e) => {
+          e.preventDefault();
+          dispatch(setIsDirectPurchase(false));
+          dispatch(setInstallmentOptions([]));
+        }}
+      >
+        {translations?.pay_with_my_masterpass_card ??
+          defaultTranslations.pay_with_my_masterpass_card}
+      </a>
+    </div>
+  );
+};

package/src/views/countdown-timer/countdown-timer.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, LoaderSpinner } from 'components';
+import { useTranslation } from '@akinon/next/hooks';
+import { useCountdown } from '../../hooks/use-countdown';
+
+const SendSms = ({ resendSms, resendSmsFetching }) => {
+  const { t } = useTranslation('checkout');
+
+  return (
+    <Button
+      onClick={() => resendSms()}
+      className="mt-2 w-full text-primary bg-[#cccccc] border-0 hover:border"
+    >
+      {!resendSmsFetching ? (
+        t('payment.masterpass.add.send_sms_again')
+      ) : (
+        <LoaderSpinner />
+      )}
+    </Button>
+  );
+};
+
+const ShowCounter = ({ minutes, seconds }) => {
+  return (
+    <div className="flex">
+      {`0${minutes}`} : {`${seconds < 10 ? '0' : ''}${seconds}`}
+    </div>
+  );
+};
+
+const CountdownTimer = ({ targetDate, resendSms, resendSmsFetching }) => {
+  const [minutes, seconds] = useCountdown(targetDate);
+
+  if (minutes + seconds <= 0) {
+    return (
+      <SendSms resendSms={resendSms} resendSmsFetching={resendSmsFetching} />
+    );
+  } else {
+    return <ShowCounter minutes={minutes} seconds={seconds} />;
+  }
+};
+
+export default CountdownTimer;

package/src/views/delete-confirmation-modal/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Button, LoaderSpinner, Modal, Image } from '@akinon/next/components';
+
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+import { useDeleteCard } from '../../hooks/use-delete-card';
+import { setDeletionModalVisible } from '../../redux/reducer';
+
+export interface MasterpassDeleteConfirmationModalProps {
+  translations?: {
+    remove_title?: string;
+    remove_button?: string;
+    cancel_button?: string;
+  };
+}
+
+export const MasterpassDeleteConfirmationModal = ({
+  translations
+}: MasterpassDeleteConfirmationModalProps) => {
+  const { deletion } = useAppSelector((state) => state.masterpass);
+  const { deleteCard, isLoading, error } = useDeleteCard();
+  const dispatch = useAppDispatch();
+
+  return (
+    <Modal
+      portalId="masterpass-remove-card-modal"
+      title={
+        <Image
+          width={120}
+          height={21}
+          src={masterpassLogo.src}
+          alt="Masterpass Logo"
+        />
+      }
+      className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+      open={deletion.isModalVisible}
+      setOpen={() => dispatch(setDeletionModalVisible(false))}
+    >
+      <div className="px-6">
+        <h3 className="text-center mt-4 text-lg">
+          {translations?.remove_title ?? 'Remove Card'}
+        </h3>
+        <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
+          <Button className="py-3 h-auto" onClick={deleteCard}>
+            {isLoading ? (
+              <LoaderSpinner className="w-4 h-4" />
+            ) : (
+              translations?.remove_button ?? 'Remove'
+            )}
+          </Button>
+          <Button
+            appearance="outlined"
+            className="underline px-5 py-3 h-auto"
+            onClick={() => dispatch(setDeletionModalVisible(false))}
+          >
+            {translations?.cancel_button ?? 'Cancel'}
+          </Button>
+          {error && <p className="text-error text-xs text-center">{error}</p>}
+        </div>
+      </div>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,102 @@
+'use client';
+import { Modal } from 'components';
+import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
+import { Image } from '@akinon/next/components/image';
+
+interface InfoModalProps {
+  open: boolean;
+  setOpen: (arg: boolean) => void;
+}
+
+export const InfoModal = ({ open, setOpen }: InfoModalProps) => {
+  return (
+    <Modal
+      portalId="agreement-masterpass"
+      title={
+        <Image
+          width={140}
+          height={25}
+          src={masterpassLogo.src}
+          alt="Masterpass Logo"
+        />
+      }
+      open={open}
+      setOpen={setOpen}
+      className="w-full overflow-y-auto sm:w-[28rem] max-h-[90vh]"
+    >
+      <div className="px-6 py-4">
+        <p>
+          Giriş
+          <br />
+          <br />
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+          bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
+          veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
+          sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
+          MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
+          çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
+          ödeme hizmetidir.
+          <br />
+          <br />
+          İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
+          ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
+          sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
+          TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
+          MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
+          ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
+          TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
+          SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
+          <br />
+          <br />
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+          bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
+          veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
+          sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
+          MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
+          çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
+          ödeme hizmetidir.
+          <br />
+          <br />
+          İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
+          ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
+          sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
+          TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
+          MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
+          ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
+          TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
+          SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
+          <br />
+          <br />
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+          bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
+          veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
+          sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
+          MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
+          çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
+          ödeme hizmetidir.
+          <br />
+          <br />
+          İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
+          ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
+          sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
+          TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
+          MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
+          ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
+          TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
+          SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
+          <br />
+          <br />
+          MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
+          ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
+        </p>
+      </div>
+    </Modal>
+  );
+};