@akinon/pz-masterpass 1.53.0 → 1.54.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-masterpass
 
+## 1.54.0
+
+### Minor Changes
+
+- e9a46ac: ZERO-2738: add CVC input to registered cards in Masterpass
+
 ## 1.53.0
 
 ## 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass",
-  "version": "1.53.0",
+  "version": "1.54.0",
   "license": "MIT",
   "main": "src/index.ts",
   "types": "src/index.d.ts",

package/src/redux/reducer.ts

@@ -29,6 +29,7 @@ export interface MasterpassState {
   additionalParams?: {
     [key: string]: string;
   };
+  cvcRequired: boolean;
 }
 
 const initialState: MasterpassState = {
@@ -41,7 +42,8 @@ const initialState: MasterpassState = {
   deletion: {
     isModalVisible: false
   },
-  additionalParams: {}
+  additionalParams: {},
+  cvcRequired: false
 };
 
 const rootSlice = createSlice({
@@ -111,6 +113,9 @@ const rootSlice = createSlice({
       { payload }: PayloadAction<{ [key: string]: any }>
     ) => {
       state.additionalParams = payload;
+    },
+    setCvcRequired: (state, { payload }: PayloadAction<boolean>) => {
+      state.cvcRequired = payload;
     }
   }
 });
@@ -131,7 +136,8 @@ export const {
   setOtpResponse,
   setDeletionModalVisible,
   setDeletionCardAliasName,
-  setAdditionalParams
+  setAdditionalParams,
+  setCvcRequired
 } = rootSlice.actions;
 
 export default rootSlice.reducer;

package/src/utils/index.ts

@@ -80,7 +80,8 @@ export const buildPurchaseForm = async ({
   amount,
   additionalParams,
   language = 'eng',
-  installmentCount
+  installmentCount,
+  cardCvc
 }: {
   token: string;
   orderNo: string;
@@ -94,6 +95,7 @@ export const buildPurchaseForm = async ({
   };
   language: string;
   installmentCount: number;
+  cardCvc?: string;
 }) => {
   const session = await getSession();
 
@@ -124,6 +126,10 @@ export const buildPurchaseForm = async ({
     { name: 'cardAliasName', value: selectedCard?.Name ?? '' }
   ];
 
+  if (cardCvc) {
+    fields.push({ name: 'cvc', value: cardCvc });
+  }
+
   const form = formCreator({
     id: 'mp-purchase-form',
     fields

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

@@ -15,10 +15,22 @@ 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 { Button, Icon, Image, Input } from '@akinon/next/components';
 import { twMerge } from 'tailwind-merge';
-import { setIsDirectPurchase, setSelectedCard } from '../../redux/reducer';
+import {
+  setCvcRequired,
+  setIsDirectPurchase,
+  setSelectedCard
+} from '../../redux/reducer';
 import { setInstallmentOptions } from '@akinon/next/redux/reducers/checkout';
+import clsx from 'clsx';
+import {
+  Control,
+  FieldError,
+  UseFormClearErrors,
+  UseFormRegister,
+  UseFormSetValue
+} from 'react-hook-form';
 
 const cardImages = {
   amex,
@@ -31,22 +43,31 @@ const cardImages = {
 const defaultTranslations = {
   title: 'Select a card to pay with',
   pay_with_new_card: 'Pay with a new card',
-  retryFetchCards: 'Retry Fetching Cards'
+  retryFetchCards: 'Retry Fetching Cards',
+  security_code: 'Security Code',
+  security_code_info: 'What’s CVC?'
 };
 
 export interface MasterpassCardListProps {
   className?: string;
   translations?: typeof defaultTranslations;
+  form?: {
+    clearErrors: UseFormClearErrors<any>;
+    control: Control<any>;
+    errors: Record<string, FieldError>;
+    register: UseFormRegister<any>;
+    setFormValue: UseFormSetValue<any>;
+  };
 }
 
 export const MasterpassCardList = ({
   className,
-  translations
+  translations,
+  form
 }: MasterpassCardListProps) => {
   const { preOrder } = useAppSelector((state) => state.checkout);
-  const { accountStatus, isDirectPurchase, selectedCard } = useAppSelector(
-    (state) => state.masterpass
-  );
+  const { accountStatus, isDirectPurchase, selectedCard, cvcRequired } =
+    useAppSelector((state) => state.masterpass);
   const [setMasterpassBinNumber] = useSetBinNumberMutation();
   const { cards, loading, error, refreshCards } = useCards({ skipData: false });
   const { DeleteButton } = useDeleteCard();
@@ -121,40 +142,90 @@ export const MasterpassCardList = ({
           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"
+              className="p-4 mb-2 border-2 border-gray-200 flex flex-col space-x-2 cursor-pointer"
               onClick={async () => {
-                await setMasterpassBinNumber(
-                  card.Value1.substring(0, 6)
-                ).unwrap();
-
-                dispatch(setSelectedCard(card));
+                if (selectedCard?.UniqueId !== card.UniqueId) {
+                  await setMasterpassBinNumber(
+                    card.Value1.substring(0, 6)
+                  ).unwrap();
+
+                  dispatch(setSelectedCard(card));
+                  dispatch(setCvcRequired(false));
+
+                  if (form) {
+                    form.setFormValue('card_cvv', '');
+                    form.clearErrors('card_cvv');
+                  }
+                }
               }}
             >
-              <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}
+              <div className="flex justify-between items-center">
+                <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>
-
-              <DeleteButton cardAliasName={card.Name} />
+                <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} />
+              </div>
+              {selectedCard?.UniqueId === card.UniqueId && form && cvcRequired && (
+                <div
+                  className={twMerge(
+                    clsx('flex items-center justify-start mt-2', {
+                      'items-baseline': form.errors.card_cvv
+                    })
+                  )}
+                >
+                  <label
+                    className="text-xs text-black-400 mr-1.5"
+                    htmlFor="card_cvv"
+                  >
+                    {translations?.security_code ??
+                      defaultTranslations.security_code}
+                  </label>
+                  <Input
+                    format="###"
+                    mask="_"
+                    control={form.control}
+                    allowEmptyFormatting={true}
+                    {...form.register('card_cvv')}
+                    error={form.errors.card_cvv}
+                  />
+                  <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer ml-2 transition-all hover:text-secondary">
+                    <span className="text-xs underline">
+                      {translations?.security_code_info ??
+                        defaultTranslations.security_code_info}
+                    </span>
+                    <Icon name="cvc" size={16} className="leading-none ml-2" />
+                    <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                      <Image
+                        src="/cvv.jpg"
+                        alt="Cvv"
+                        width={385}
+                        height={262}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
             </li>
           );
         })}