@akinon/pz-masterpass 1.45.0-rc.0 → 1.45.0

package/CHANGELOG.md

@@ -1,12 +1,6 @@
 # @akinon/pz-masterpass
 
-## 1.45.0-rc.0
-
-### Minor Changes
-
-- 50b9069: ZERO-2767: update plugin readme files
-- 64699d3: ZERO-2761: Fix invalid import for plugin module
-- e9a46ac: ZERO-2738: add CVC input to registered cards in Masterpass
+## 1.45.0
 
 ## 1.44.0
 

package/README.md

@@ -1,14 +1,4 @@
-# @akinon/pz-masterpass
-
-### Install the npm package
-
-```bash
-# For latest version
-yarn add @akinon/pz-masterpass
-
-# Preferred installation method
-npx @akinon/projectzero@latest --plugins
-```
+# pz-masterpass
 
 ## Available Props
 

package/package.json

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

package/src/redux/reducer.ts

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

package/src/utils/index.ts

@@ -80,8 +80,7 @@ export const buildPurchaseForm = async ({
   amount,
   additionalParams,
   language = 'eng',
-  installmentCount,
-  cardCvc
+  installmentCount
 }: {
   token: string;
   orderNo: string;
@@ -95,7 +94,6 @@ export const buildPurchaseForm = async ({
   };
   language: string;
   installmentCount: number;
-  cardCvc?: string;
 }) => {
   const session = await getSession();
 
@@ -126,10 +124,6 @@ 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,22 +15,10 @@ 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, Icon, Image, Input } from '@akinon/next/components';
+import { Button, Image } from '@akinon/next/components';
 import { twMerge } from 'tailwind-merge';
-import {
-  setCvcRequired,
-  setIsDirectPurchase,
-  setSelectedCard
-} from '../../redux/reducer';
+import { 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,
@@ -43,31 +31,22 @@ const cardImages = {
 const defaultTranslations = {
   title: 'Select a card to pay with',
   pay_with_new_card: 'Pay with a new card',
-  retryFetchCards: 'Retry Fetching Cards',
-  security_code: 'Security Code',
-  security_code_info: 'What’s CVC?'
+  retryFetchCards: 'Retry Fetching Cards'
 };
 
 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,
-  form
+  translations
 }: MasterpassCardListProps) => {
   const { preOrder } = useAppSelector((state) => state.checkout);
-  const { accountStatus, isDirectPurchase, selectedCard, cvcRequired } =
-    useAppSelector((state) => state.masterpass);
+  const { accountStatus, isDirectPurchase, selectedCard } = useAppSelector(
+    (state) => state.masterpass
+  );
   const [setMasterpassBinNumber] = useSetBinNumberMutation();
   const { cards, loading, error, refreshCards } = useCards({ skipData: false });
   const { DeleteButton } = useDeleteCard();
@@ -142,90 +121,40 @@ export const MasterpassCardList = ({
           return (
             <li
               key={card.UniqueId}
-              className="p-4 mb-2 border-2 border-gray-200 flex flex-col space-x-2 cursor-pointer"
+              className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center space-x-2 cursor-pointer"
               onClick={async () => {
-                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');
-                  }
-                }
+                await setMasterpassBinNumber(
+                  card.Value1.substring(0, 6)
+                ).unwrap();
+
+                dispatch(setSelectedCard(card));
               }}
             >
-              <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()}
+              <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
-                  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>
-              )}
+              </label>
+
+              <DeleteButton cardAliasName={card.Name} />
             </li>
           );
         })}