@akinon/pz-masterpass 1.91.0-rc.2 → 1.91.0

package/CHANGELOG.md

@@ -1,19 +1,6 @@
 # @akinon/pz-masterpass
 
-## 1.91.0-rc.2
-
-## 1.91.0-rc.1
-
-## 1.91.0-rc.0
-
-### Minor Changes
-
-- ad0bec9: ZERO-3364 :Update readme file for masterpass
-- 64699d3f: ZERO-2761: Fix invalid import for plugin module
-- e974d8e: ZERO-3406: Fix rc build
-- b31333e: ZERO-3357 :Add components with renderer properties for customizable UI elements in pz-masterpass
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+## 1.91.0
 
 ## 1.90.0
 

package/README.md

@@ -12,14 +12,10 @@ npx @akinon/projectzero@latest --plugins
 
 ## Available Props
 
-## Masterpass Provider
+### Masterpass Provider
 
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
-### Usage Examples
-
-##### Default Usage
-
 ```javascript
 <PluginModule
   component={Component.MasterpassProvider}
@@ -33,7 +29,7 @@ npx @akinon/projectzero@latest --plugins
 </PluginModule>
 ```
 
-##### Customized Usage with Additional Params
+### Additional Params
 
 ##### To add extra parameters, it can be added by passing additional Params property to the Masterpass Provider.
 
@@ -55,30 +51,8 @@ npx @akinon/projectzero@latest --plugins
 
 ### Delete Confirmation Modal
 
-#### Props
-
-| Props | Type | Required | Description |
-| --- | --- | --- | --- |
-| translations | typeof defaultTranslations | Optional | Used to customize the default texts. |
-| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
-
-#### RendererProps
-
-| Props | Type | Description |
-| --- | --- | --- |
-| open | boolean | It is information whether the modal is open or not. |
-| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
-| onConfirm | () => void | This is the function that will perform the deletion operation. |
-| onCancel | () => void | This is the function that will be run if the user cancels the deletion process. |
-| loading | boolean | Indicates the loading status during the deletion process. |
-| error | string / null | Error message to be displayed if an error occurs during deletion. |
-
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
-### Usage Examples
-
-##### Default Usage
-
 ```javascript
 <PluginModule
   component={Component.MasterpassDeleteConfirmationModal}
@@ -92,70 +66,10 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
-##### Customized Usage with Renderer
-
-```javascript
-<PluginModule
-  component={Component.MasterpassDeleteConfirmationModal}
-  props={{
-    renderer: {
-      Content: ({ open, setOpen, onConfirm, onCancel, loading, error }) => (
-        <Modal
-          open={open}
-          setOpen={setOpen}
-          className="w-full sm:w-[28rem]"
-          portalId="masterpass-remove-card-modal"
-        >
-          <div className="flex flex-col items-center p-5">
-            <div className="text-xs mb-3">
-              Are you sure you want to delete your card?
-            </div>
-            <Button onClick={onConfirm} className="bg-red-600 text-black">
-              {loading ? 'Deletion...' : 'Delete'}
-            </Button>
-            <Button appearance="outlined" onClick={onCancel}>
-              Cancel
-            </Button>
-            {error && (
-              <p className="text-red-500 text-sm mt-2 text-center">
-                🚨 {error}
-              </p>
-            )}
-          </div>
-        </Modal>
-      )
-    }
-  }}
-/>
-```
-
 ### OTP Modal
 
-#### Props
-
-| Props | Type | Required | Description |
-| --- | --- | --- | --- |
-| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
-| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
-
-#### RendererProps
-
-| Props | Type | Description |
-| --- | --- | --- |
-| open | boolean | It is information whether the modal is open or not. |
-| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
-| onSubmit | (data: { otp_code: string }) => void | Sends the OTP code entered by the user. |
-| loading | boolean | Indicates the loading status during validation. |
-| error | string / null | Error message to be displayed if there is an error. |
-| resendSms | () => void | Function triggered when the user requests SMS again. |
-| resendSmsFetching | boolean | Indicates the loading status during the resending process. |
-| targetDate | number | When the countdown will end (as a timestamp). |
-| otpRef | string / null | Transaction reference number, if applicable. |
-
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
-##### Default Usage
-
 ```javascript
 <PluginModule
   component={Component.MasterpassOtpModal}
@@ -172,127 +86,10 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
-##### Customized Usage with Renderer
-
-```javascript
-<PluginModule
-  component={Component.MasterpassOtpModal}
-  props={{
-    renderer: {
-      Content: ({
-        open,
-        setOpen,
-        onSubmit,
-        loading,
-        error,
-        resendSms,
-        resendSmsFetching,
-        targetDate,
-        otpRef
-      }) => {
-        const [code, setCode] = useState('');
-        const [remainingSeconds, setRemainingSeconds] = useState(
-          Math.ceil((targetDate - Date.now()) / 1000)
-        );
-        useEffect(() => {
-          if (!targetDate) return;
-          const interval = setInterval(() => {
-            const secondsLeft = Math.ceil((targetDate - Date.now()) / 1000);
-            setRemainingSeconds(secondsLeft);
-            if (secondsLeft <= 0) {
-              clearInterval(interval);
-            }
-          }, 1000);
-          return () => clearInterval(interval);
-        }, [targetDate]);
-        return (
-          <Modal
-            open={open}
-            setOpen={setOpen}
-            className="w-full sm:w-[28rem]"
-            portalId="otp-masterpass"
-          >
-            <div className="px-6 py-4">
-              <h2 className="text-center text-xl text-primary-600 font-semibold">
-                Verification Required
-              </h2>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  onSubmit({ otp_code: code });
-                }}
-                className="flex flex-col items-center mt-4"
-              >
-                <label
-                  htmlFor="otp_code"
-                  className="text-sm mb-1 text-gray-700"
-                >
-                  SMS Code
-                </label>
-                <input
-                  id="otp_code"
-                  maxLength={6}
-                  value={code}
-                  onChange={(e) => setCode(e.target.value)}
-                  placeholder="••••••"
-                  className="border p-2 rounded w-full max-w-[200px] text-center tracking-widest"
-                />
-                <Button
-                  type="submit"
-                  className="mt-4 px-4 py-2 bg-blue-600 text-black rounded"
-                >
-                  Verify
-                </Button>
-                {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
-              </form>
-              <div className="mt-2 flex justify-center text-sm text-gray-600">
-                {remainingSeconds > 0
-                  ? `Time remaining: ${remainingSeconds} seconds`
-                  : 'Time is up'}
-              </div>
-              <div className="mt-2 flex justify-center">
-                <Button
-                  onClick={resendSms}
-                  disabled={loading}
-                  className="mt-4 text-sm underline text-secondary-500"
-                >
-                  {resendSmsFetching ? 'Code sent' : 'Resend SMS code'}
-                </Button>
-              </div>
-            </div>
-          </Modal>
-        );
-      }
-    }
-  }}
-/>
-```
-
 ### Link Modal
 
-#### Props
-
-| Props | Type | Required | Description |
-| --- | --- | --- | --- |
-| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
-| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
-
-#### RendererProps
-
-| Props | Type | Description |
-| --- | --- | --- |
-| open | boolean | It is information whether the modal is open or not. |
-| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
-| onClick | () => void | It is the function that is called when the user clicks the "Use" button. |
-| loading | boolean | This is the loading status that will be displayed during the API request. |
-| error | string | If there is an error in the API response, a message is displayed in this field. |
-
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
-### Usage Examples
-
-##### Default Usage
-
 ```javascript
 <PluginModule
   component={Component.MasterpassLinkModal}
@@ -306,67 +103,10 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
-##### Customized Usage with Renderer
-
-```javascript
-<PluginModule
-  component={Component.MasterpassLinkModal}
-  props={{
-    renderer: {
-      Content: ({ open, setOpen, onClick, loading, error }) => (
-        <Modal
-          open={open}
-          setOpen={setOpen}
-          className="w-full sm:w-[28rem]"
-          portalId="masterpass-check-user"
-        >
-          <div className="p-10">
-            <p className="text-sm text-center">
-              You have cards registered to your Masterpass account. Do you want
-              to use your cards?
-            </p>
-            <Button
-              onClick={onClick}
-              disabled={loading}
-              className="bg-green-600 text-error w-full py-2 mt-4"
-            >
-              {loading ? 'Loading...' : 'Use'}
-            </Button>
-            {error && <p className="text-error text-sm">{error}</p>}
-          </div>
-        </Modal>
-      )
-    }
-  }}
-/>
-```
-
 ### Card List
 
-#### Props
-
-| Props | Type | Required | Description |
-| --- | --- | --- | --- |
-| className | string | Optional | Gives an additional style class to the component's outer container. |
-| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
-| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
-
-#### RendererProps
-
-| Props | Type | Description |
-| --- | --- | --- |
-| Header | JSX.Element | Used to customize the title area at the top of the card list. |
-| CardItem | (params: { card, selectedCard, onSelect, DeleteButton }) => JSX.Element | It allows you to fully customize the card element. |
-| Loader | () => JSX.Element | Used to define a custom loader component to be displayed when loading cards. |
-| ErrorFallback | (params: { error: string; onRetry: () => void }) => JSX.Element | Custom widget to be shown if an error occurs while loading cards. |
-| SwitchPaymentButton | (props: { onClick: () => void; label: string }) => JSX.Element | Used to customize the "Pay with a new card" option. |
-
 ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
 
-### Usage Examples
-
-##### Default Usage
-
 ```javascript
 <PluginModule
   component={Component.MasterpassCardList}
@@ -381,127 +121,10 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
-##### Customized Usage with Renderer
-
-```javascript
-<PluginModule
-  component={Component.MasterpassCardList}
-  props={{
-    className: 'px-10',
-    form: {
-      control,
-      register,
-      errors,
-      setFormValue,
-      clearErrors
-    },
-    renderer: {
-      Header: () => (
-        <div className="flex items-center gap-2 mt-4 px-10 text-success">
-          Select a card to pay
-        </div>
-      ),
-      Loader: () => (
-        <div className="flex justify-center items-center p-10">
-          <span className="text-lg font-bold text-error">
-            Loading your cards...
-          </span>
-        </div>
-      ),
-      ErrorFallback: ({ error, onRetry }) => (
-        <div className="text-center p-8">
-          <h2 className="text-red-500 text-xl mb-4">Oops! {error}</h2>
-          <Button onClick={onRetry}>Try Again</Button>
-        </div>
-      ),
-      CardItem: ({ card, onSelect, DeleteButton, selectedCard }) => (
-        <li
-          key={card.UniqueId}
-          className="p-4 cursor-pointer rounded-[10px] border-gray border space-x-5 pl-5 mb-6 md:mb-2.5"
-          onClick={() => onSelect(card)}
-        >
-          <div className="flex justify-between items-center">
-            <div className="flex items-center">
-              <Checkbox
-                key={
-                  selectedCard?.UniqueId === card.UniqueId
-                    ? 'selected'
-                    : 'not-selected'
-                }
-                checked={selectedCard?.UniqueId === card.UniqueId}
-                onChange={() => onSelect(card)}
-                className="mr-2"
-              />
-              <div>
-                <h3 className="font-semibold">{card.Name}</h3>
-                <p className="text-xs text-gray-500">{card.Value1}</p>
-              </div>
-            </div>
-            <DeleteButton cardAliasName={card.Name} />
-          </div>
-        </li>
-      ),
-      SwitchPaymentButton: ({ onClick, label }) => (
-        <div className="px-10">
-          <button
-            onClick={onClick}
-            className="p-4 w-full text-left cursor-pointer rounded-[10px] border-gray border space-x-5 pl-5 mb-6 md:mb-2.5"
-          >
-            {label}
-          </button>
-        </div>
-      )
-    }
-  }}
-/>
-```
-
 ### Card Registration
 
-#### Props
-
-| Props | Type | Required | Description |
-| --- | --- | --- | --- |
-| getValues | () => Record<string, string> | Required | Returns the values ​​of form fields. |
-| className | string | Optional | Gives an additional CSS class to the outer container. |
-| infoModalContent | React.ReactNode | Optional | Body content for the informational modal. |
-| infoModalIcon | React.ReactNode | Optional | Used to override the notification icon. |
-| translations | typeof defaultTranslations | Optional | Can be used to override default texts. |
-| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
-
-#### RendererProps
-
-| Props | Type | Description |
-| --- | --- | --- |
-| Content | (props: { isChecked, toggle, setIsInfoModalOpen, onChange, onSubmit, loading, error, showGoBackLink?, onClickGoBackLink? }) => JSX.Element | Used to render the main content. |
-| InfoModal | (props: { open: boolean; setOpen: (value: boolean) => void }) => JSX.Element | Can be used to override the notification modal. |
-
 ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
 
-### Usage Examples
-
-##### Default Usage
-
-```javascript
-<PluginModule
-  component={Component.MasterpassCardRegistration}
-  props={{
-    // Do not remove getValues, it is used to get the form values
-    getValues,
-    translations: {
-      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.'
-    }
-  }}
-/>
-```
-
-##### Customized Usage with className, infoModalContent, infoModalIcon
-
 ```javascript
 <PluginModule
   component={Component.MasterpassCardRegistration}
@@ -522,86 +145,3 @@ npx @akinon/projectzero@latest --plugins
   }}
 />
 ```
-
-##### Customized Usage with Renderer
-
-```javascript
-<PluginModule
-  component={Component.MasterpassCardRegistration}
-  props={{
-    // Do not remove getValues, it is used to get the form values
-    getValues,
-    renderer: {
-      InfoModal: ({ open, setOpen }) => (
-        <Modal
-          open={open}
-          setOpen={setOpen}
-          portalId="masterpass-info-modal"
-        >
-          masterpass information
-        </Modal>
-      ),
-      Content: ({
-        isChecked,
-        toggle,
-        setIsInfoModalOpen,
-        onChange,
-        onSubmit,
-        loading,
-        error,
-        showGoBackLink,
-        onClickGoBackLink
-      }) => (
-        <div className="bg-[#F8F8F8] mx-10 mb-5 px-2 py-1">
-          <div className="flex items-center gap-2 pb-4 mb-4">
-            <Checkbox checked={isChecked} onChange={toggle} />
-            <h1>Masterpass</h1>
-            <div>
-              <Icon
-                name="info"
-                size={15}
-                className="fill-[#000000] cursor-pointer"
-                onClick={() => {
-                  setIsInfoModalOpen(true);
-                }}
-              />
-            </div>
-          </div>
-          <p className="text-xs">
-            I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.
-          </p>
-          {isChecked && (
-            <>
-              <Input
-                label="Give your card a name"
-                onChange={(e) =>
-                  onChange((e.target as HTMLInputElement).value)
-                }
-                className="mt-2"
-              />
-              <Button
-                onClick={onSubmit}
-                className="bg-green-600 text-black w-full mt-3"
-              >
-                {loading ? 'Loading...' : 'Save'}
-              </Button>
-              {error && (
-                <p className="text-xs text-red-600 mt-2">🚨 {error}</p>
-              )}
-            </>
-          )}
-          {showGoBackLink && (
-            <div>
-              <button
-                onClick={onClickGoBackLink}
-                className="text-xs text-red-600 underline mt-3"
-              >
-                I want to pay with my card registered to Masterpass.
-              </button>
-            </div>
-          )}
-        </div>
-      )
-    }
-  }}
-```

package/package.json

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

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

@@ -48,25 +48,6 @@ const defaultTranslations = {
   security_code_info: 'What’s CVC?'
 };
 
-interface RendererProps {
-  Header?: () => JSX.Element;
-  CardItem?: (params: {
-    card: any;
-    selectedCard: any;
-    onSelect: (card: any) => Promise<void>;
-    DeleteButton?: React.FC<{ cardAliasName: string; onDelete: () => void }>;
-  }) => JSX.Element;
-  Loader?: () => JSX.Element;
-  ErrorFallback?: (params: {
-    error: string;
-    onRetry: () => void;
-  }) => JSX.Element;
-  SwitchPaymentButton?: (props: {
-    onClick: () => void;
-    label: string;
-  }) => JSX.Element;
-}
-
 export interface MasterpassCardListProps {
   className?: string;
   translations?: typeof defaultTranslations;
@@ -77,14 +58,12 @@ export interface MasterpassCardListProps {
     register: UseFormRegister<any>;
     setFormValue: UseFormSetValue<any>;
   };
-  renderer?: RendererProps;
 }
 
 export const MasterpassCardList = ({
   className,
   translations,
-  form,
-  renderer
+  form
 }: MasterpassCardListProps) => {
   const { preOrder } = useAppSelector((state) => state.checkout);
   const { accountStatus, isDirectPurchase, selectedCard, cvcRequired } =
@@ -94,28 +73,7 @@ export const MasterpassCardList = ({
   const { DeleteButton } = useDeleteCard();
   const dispatch = useAppDispatch();
 
-  const onSelectCard = async (card: any) => {
-    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');
-      }
-    }
-  };
-
-  const switchPaymentButton = renderer?.SwitchPaymentButton ? (
-    renderer.SwitchPaymentButton({
-      onClick: () => {
-        dispatch(setIsDirectPurchase(true));
-        dispatch(setInstallmentOptions([]));
-      },
-      label:
-        translations?.pay_with_new_card ?? defaultTranslations.pay_with_new_card
-    })
-  ) : (
+  const switchPaymentButton = (
     <a
       href="#"
       className="text-xs underline"
@@ -134,9 +92,7 @@ export const MasterpassCardList = ({
   }
 
   if (loading) {
-    return renderer?.Loader ? (
-      renderer.Loader()
-    ) : (
+    return (
       <div className="p-5">
         <LoaderSpinner className="w-8 h-8" />
       </div>
@@ -144,14 +100,18 @@ export const MasterpassCardList = ({
   }
 
   if (error && !isDirectPurchase) {
-    return renderer?.ErrorFallback ? (
-      renderer.ErrorFallback({ error, onRetry: refreshCards })
-    ) : (
+    return (
       <div className="flex flex-col items-center">
         <div className="p-5">{error}</div>
-        <Button className="w-48 mb-5" onClick={refreshCards}>
+        <Button
+          className="w-48 mb-5"
+          onClick={() => {
+            refreshCards();
+          }}
+        >
           {translations?.retryFetchCards ?? defaultTranslations.retryFetchCards}
         </Button>
+
         {switchPaymentButton}
       </div>
     );
@@ -166,75 +126,38 @@ export const MasterpassCardList = ({
   }
 
   return (
-    <div className="w-full">
-      {renderer?.Header ? (
-        renderer.Header()
-      ) : (
-        <>
-          <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={twMerge('mt-4 text-xs', className)}>
+    <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) => {
-          const cvcField =
-            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>
-            ) : null;
-
-          return renderer?.CardItem ? (
-            renderer.CardItem({
-              card,
-              selectedCard,
-              onSelect: onSelectCard,
-              DeleteButton
-            })
-          ) : (
+          return (
             <li
               key={card.UniqueId}
               className="p-4 mb-2 border-2 border-gray-200 flex flex-col space-x-2 cursor-pointer"
-              onClick={() => onSelectCard(card)}
+              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');
+                  }
+                }
+              }}
             >
               <div className="flex justify-between items-center">
                 <input
@@ -260,9 +183,49 @@ export const MasterpassCardList = ({
                     alt={card.Name}
                   />
                 </label>
+
                 <DeleteButton cardAliasName={card.Name} />
               </div>
-              {cvcField}
+              {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>
           );
         })}

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

@@ -32,31 +32,13 @@ export const MasterpassCardRegistration = ({
   className,
   infoModalContent,
   infoModalIcon,
-  translations,
-  renderer = {}
+  translations
 }: {
   getValues: () => Record<string, string | number | boolean>;
   className?: string;
   infoModalContent?: React.ReactNode;
   infoModalIcon?: React.ReactNode;
   translations?: typeof defaultTranslations;
-  renderer?: {
-    Content?: (props: {
-      isChecked: boolean;
-      toggle: () => void;
-      setIsInfoModalOpen: (value: boolean) => void;
-      onChange: (value: string) => void;
-      onSubmit: () => void;
-      loading: boolean;
-      error: string | null;
-      showGoBackLink?: boolean;
-      onClickGoBackLink?: () => void;
-    }) => JSX.Element;
-    InfoModal?: (props: {
-      open: boolean;
-      setOpen: (value: boolean) => void;
-    }) => JSX.Element;
-  };
 }) => {
   const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const { msisdn, token, language, otp, isDirectPurchase, accountStatus } =
@@ -186,56 +168,13 @@ export const MasterpassCardRegistration = ({
     return null;
   }
 
-  if (renderer.Content) {
-    return (
-      <>
-        {renderer.InfoModal ? (
-          <renderer.InfoModal
-            open={isInfoModalOpen}
-            setOpen={setIsInfoModalOpen}
-          />
-        ) : (
-          <InfoModal
-            open={isInfoModalOpen}
-            setOpen={setIsInfoModalOpen}
-            content={infoModalContent}
-          />
-        )}
-
-        <renderer.Content
-          isChecked={isAgreementChecked}
-          toggle={() => setIsAgreementChecked(!isAgreementChecked)}
-          setIsInfoModalOpen={setIsInfoModalOpen}
-          onChange={(value) => setAccountAliasName(value)}
-          onSubmit={registerCard}
-          loading={isBusy}
-          error={formError}
-          showGoBackLink={
-            accountStatus !== MasterpassStatus.NoAccount && cards?.length > 0
-          }
-          onClickGoBackLink={() => {
-            dispatch(setIsDirectPurchase(false));
-            dispatch(setInstallmentOptions([]));
-          }}
-        />
-      </>
-    );
-  }
-
   return (
     <div className={twMerge('w-full', className)}>
-      {renderer.InfoModal ? (
-        <renderer.InfoModal
-          open={isInfoModalOpen}
-          setOpen={setIsInfoModalOpen}
-        />
-      ) : (
-        <InfoModal
-          open={isInfoModalOpen}
-          setOpen={setIsInfoModalOpen}
-          content={infoModalContent}
-        />
-      )}
+      <InfoModal
+        open={isInfoModalOpen}
+        setOpen={setIsInfoModalOpen}
+        content={infoModalContent}
+      />
 
       <div className="border border-[#ddd]">
         <div className="p-4">

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

@@ -15,39 +15,15 @@ const defaultTranslations = {
 
 export interface MasterpassDeleteConfirmationModalProps {
   translations?: typeof defaultTranslations;
-  renderer?: {
-    Content?: (props: {
-      open: boolean;
-      setOpen: (open: boolean) => void;
-      onConfirm: () => void;
-      onCancel: () => void;
-      loading: boolean;
-      error: string | null;
-    }) => JSX.Element;
-  };
 }
 
 export const MasterpassDeleteConfirmationModal = ({
-  translations,
-  renderer = {}
+  translations
 }: MasterpassDeleteConfirmationModalProps) => {
   const { deletion } = useAppSelector((state) => state.masterpass);
   const { deleteCard, isLoading, error } = useDeleteCard();
   const dispatch = useAppDispatch();
 
-  if (renderer.Content) {
-    return (
-      <renderer.Content
-        open={deletion.isModalVisible}
-        setOpen={() => dispatch(setDeletionModalVisible(false))}
-        onConfirm={deleteCard}
-        onCancel={() => dispatch(setDeletionModalVisible(false))}
-        loading={isLoading}
-        error={error}
-      />
-    );
-  }
-
   return (
     <Modal
       portalId="masterpass-remove-card-modal"

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

@@ -21,20 +21,10 @@ const defaultTranslations = {
 
 export interface MasterpassLinkModalProps {
   translations?: typeof defaultTranslations;
-  renderer?: {
-    Content?: (props: {
-      open: boolean;
-      setOpen: (open: boolean) => void;
-      onClick: () => void;
-      loading: boolean;
-      error: string | null;
-    }) => JSX.Element;
-  };
 }
 
 export const MasterpassLinkModal = ({
-  translations,
-  renderer = {}
+  translations
 }: MasterpassLinkModalProps) => {
   const { msisdn, token, accountStatus, otp, language } = useAppSelector(
     (state) => state.masterpass
@@ -103,18 +93,6 @@ export const MasterpassLinkModal = ({
     }
   }, [otp.response]);
 
-  if (renderer.Content) {
-    return (
-      <renderer.Content
-        open={isOpen}
-        setOpen={setIsOpen}
-        onClick={onLinkButtonClick}
-        loading={isLoading}
-        error={error}
-      />
-    );
-  }
-
   return (
     <Modal
       portalId="masterpass-check-user"

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

@@ -17,24 +17,10 @@ export interface MasterpassOtpModalProps {
   translations?: {
     5001?: string;
   } & OtpFormProps['translations'];
-  renderer?: {
-    Content?: (props: {
-      open: boolean;
-      setOpen: (open: boolean) => void;
-      onSubmit: (data: { otp_code: string }) => void;
-      loading: boolean;
-      error: string | null;
-      resendSms: () => void;
-      resendSmsFetching: boolean;
-      targetDate: number;
-      otpRef: string | null;
-    }) => JSX.Element;
-  };
 }
 
 export const MasterpassOtpModal = ({
-  translations,
-  renderer = {}
+  translations
 }: MasterpassOtpModalProps) => {
   const { token, otp, language } = useAppSelector((state) => state.masterpass);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -125,22 +111,6 @@ export const MasterpassOtpModal = ({
     }
   }, [isModalOpen]);
 
-  if (renderer.Content) {
-    return (
-      <renderer.Content
-        open={isModalOpen}
-        setOpen={handleModalVisibility}
-        onSubmit={onFormSubmit}
-        loading={isBusy}
-        error={otpError}
-        resendSms={resendSms}
-        resendSmsFetching={isBusy}
-        targetDate={otpTime}
-        otpRef={otpRef}
-      />
-    );
-  }
-
   return (
     <Modal
       portalId="otp-masterpass"