@akinon/pz-saved-card 1.57.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@akinon/pz-saved-card",
+  "version": "1.57.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "react-redux": "8.1.3"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

package/readme.md

@@ -0,0 +1,42 @@
+# Saved Card Plugin
+
+## Installation
+
+There are two ways to install the Saved Card plugin:
+
+### 1. Install the npm package using Yarn
+
+For the latest version, you can install the package using Yarn:
+
+```bash
+yarn add @akinon/pz-saved-card
+```
+
+### 2. Preferred installation method
+
+You can also use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+## Usage
+
+##### File Path: src/views/checkout/steps/payment/options/saved-card.tsx
+
+```jsx
+import { SavedCardOption } from '@akinon/pz-saved-card';
+
+const SavedCard = () => {
+  return (
+    <SavedCardOption
+      texts={{
+        title: 'Pay with Saved Card',
+        button: 'Pay Now'
+      }}
+    />
+  );
+};
+
+export default SavedCard;
+```

package/src/components/delete-confirmation-modal.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Button, LoaderSpinner, Modal } from '@akinon/next/components';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  setCards,
+  setDeletionModalId,
+  setDeletionModalVisible
+} from '../redux/reducer';
+import { useDeleteSavedCardMutation } from '../redux/api';
+import { useState } from 'react';
+import { DeletePopupTexts } from '../types';
+
+const defaultTranslations = {
+  title: 'Are you sure you want to delete this card?',
+  delete_button: 'Delete',
+  cancel_button: 'Cancel'
+};
+
+export interface DeleteConfirmationModalProps {
+  translations?: DeletePopupTexts;
+}
+
+export const DeleteConfirmationModal = ({
+  translations
+}: DeleteConfirmationModalProps) => {
+  const [error, setError] = useState<string | null>(null);
+  const { cards, deletion } = useAppSelector((state) => state.savedCard);
+  const dispatch = useAppDispatch();
+
+  const [deleteCard, { isLoading }] = useDeleteSavedCardMutation();
+
+  const handleClose = () => {
+    dispatch(setDeletionModalId(null));
+    dispatch(setDeletionModalVisible(false));
+    setError(null);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await deleteCard(deletion.id).unwrap();
+      dispatch(setCards(cards.filter((card) => card.id !== deletion.id)));
+      handleClose();
+    } catch (error) {
+      setError(error.data.detail);
+    }
+  };
+
+  return (
+    <Modal
+      portalId="saved-card-remove-card-modal"
+      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?.title ?? defaultTranslations.title}
+        </h3>
+        <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
+          <Button className="py-3 h-auto" onClick={handleDelete}>
+            {isLoading ? (
+              <LoaderSpinner className="w-4 h-4" />
+            ) : (
+              translations?.delete_button ?? defaultTranslations.delete_button
+            )}
+          </Button>
+          <Button
+            appearance="outlined"
+            className="underline px-5 py-3 h-auto"
+            onClick={handleClose}
+          >
+            {translations?.cancel_button ?? defaultTranslations.cancel_button}
+          </Button>
+          {error && <p className="text-error text-xs text-center">{error}</p>}
+        </div>
+      </div>
+    </Modal>
+  );
+};

package/src/components/installments.tsx

@@ -0,0 +1,113 @@
+import { Price, Radio } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useSetSavedCardInstallmentOptionMutation } from '../redux/api';
+import { useEffect, useState } from 'react';
+import { SavedCard } from '../redux/reducer';
+import { InstallmentTexts } from '../types';
+
+const defaultTranslations = {
+  payments: 'Payments',
+  per_month: 'Per Month',
+  total: 'Total'
+};
+
+type SavedCardInstallmentsProps = {
+  selectedCard: SavedCard;
+  installmentOptions: any[];
+  translations?: InstallmentTexts;
+  error: any;
+};
+
+const SavedCardInstallments = ({
+  selectedCard,
+  installmentOptions = [],
+  translations,
+  error
+}: SavedCardInstallmentsProps) => {
+  const { t } = useLocalization();
+  const [installmentOption, setInstallmentOption] = useState(null);
+  const [setInstallment] = useSetSavedCardInstallmentOptionMutation();
+
+  useEffect(() => {
+    if (
+      selectedCard &&
+      installmentOptions.length > 0 &&
+      installmentOptions[0]?.pk !== installmentOption
+    ) {
+      const firstOptionPk = installmentOptions[0].pk;
+      setInstallment({
+        installment: firstOptionPk
+      });
+      setInstallmentOption(firstOptionPk);
+    }
+  }, [installmentOptions, installmentOption, setInstallment]);
+
+  if (installmentOptions.length === 0) {
+    return (
+      <div className="text-xs text-black-800 p-4 sm:p-6">
+        {t('checkout.payment.installment_options.description')}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="px-4 mb-4 sm:px-6 sm:mb-6">
+        <table className="w-full border border-solid border-gray-400">
+          <thead>
+            <tr>
+              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-start">
+                {translations?.payments || defaultTranslations.payments}
+              </th>
+              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
+                {translations?.per_month || defaultTranslations.per_month}
+              </th>
+              <th className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
+                {translations?.total || defaultTranslations.total}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {installmentOptions.map((option) => (
+              <tr
+                key={`installment-${option.pk}`}
+                className="border-t border-solid border-gray-400"
+              >
+                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-left">
+                  <Radio
+                    value={option.pk}
+                    name="installment"
+                    checked={option.pk === installmentOption}
+                    onChange={() => {
+                      setInstallment({
+                        installment: option.pk
+                      });
+                      setInstallmentOption(option.pk);
+                    }}
+                  >
+                    <span className="w-full flex items-center justify-start pl-2">
+                      <span className="text-xs text-black-800 transition-all">
+                        {option.label}
+                      </span>
+                    </span>
+                  </Radio>
+                </td>
+                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
+                  <Price value={option.monthly_price_with_accrued_interest} />
+                </td>
+                <td className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 text-right">
+                  <Price value={option.price_with_accrued_interest} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {error && (
+        <div className="px-6 mt-4 text-sm text-error">{error.message}</div>
+      )}
+    </div>
+  );
+};
+
+export default SavedCardInstallments;

package/src/index.tsx

@@ -0,0 +1,4 @@
+import savedCardReducer from './redux/reducer';
+import SavedCardOption from './views/saved-card-option';
+
+export { savedCardReducer, SavedCardOption };

package/src/redux/api.ts

@@ -0,0 +1,136 @@
+import { CheckoutContext, PreOrder } from '@akinon/next/types';
+import { api } from '@akinon/next/data/client/api';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+import { SavedCard } from './reducer';
+
+interface CheckoutResponse {
+  pre_order?: PreOrder;
+  errors: {
+    non_field_errors: string;
+  };
+  context_list?: CheckoutContext[];
+  template_name?: string;
+  redirect_url?: string;
+}
+
+interface GetResponse<T> {
+  count: number;
+  next: null;
+  previous: null;
+  results: T[];
+}
+
+type SetSavedCardRequest = {
+  card: SavedCard;
+};
+
+type DeleteSavedCardRequest = number;
+
+type SetInstallmentRequest = {
+  installment: string;
+};
+
+type CompleteSavedCardRequest = {
+  agreement: boolean;
+};
+
+export const savedCardApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    getSavedCards: build.query<GetResponse<SavedCard>, void>({
+      query: () => ({
+        url: buildClientRequestUrl('/users/saved-cards/')
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    deleteSavedCard: build.mutation<
+      GetResponse<SavedCard>,
+      DeleteSavedCardRequest
+    >({
+      query: (cardId) => ({
+        url: buildClientRequestUrl(`/users/saved-cards/${cardId}`),
+        method: 'DELETE'
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    setSavedCard: build.mutation<CheckoutResponse, SetSavedCardRequest>({
+      query: ({ card }) => ({
+        url: buildClientRequestUrl(
+          `/orders/checkout?page=SavedCardSelectionPage`,
+          {
+            useFormData: true
+          }
+        ),
+        method: 'POST',
+        body: {
+          card: card.token
+        }
+      }),
+      async onQueryStarted({ card }, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    setSavedCardInstallmentOption: build.mutation<
+      CheckoutResponse,
+      SetInstallmentRequest
+    >({
+      query: ({ installment }) => ({
+        url: buildClientRequestUrl(
+          `/orders/checkout?page=SavedCardInstallmentSelectionPage`,
+          {
+            useFormData: true
+          }
+        ),
+        method: 'POST',
+        body: {
+          installment
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    completeSavedCard: build.mutation<
+      CheckoutResponse,
+      CompleteSavedCardRequest
+    >({
+      query: ({ agreement }) => ({
+        url: buildClientRequestUrl(
+          `/orders/checkout?page=CompleteSavedCardRequest`,
+          {
+            useFormData: true
+          }
+        ),
+        method: 'POST',
+        body: {
+          agreement
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  })
+});
+
+export const {
+  useGetSavedCardsQuery,
+  useSetSavedCardMutation,
+  useSetSavedCardInstallmentOptionMutation,
+  useCompleteSavedCardMutation,
+  useDeleteSavedCardMutation
+} = savedCardApi;

package/src/redux/reducer.ts

@@ -0,0 +1,45 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export type SavedCard = {
+  id: number;
+  name: string;
+  masked_card_number: string;
+  token: string;
+};
+
+export interface SavedCardState {
+  cards?: Array<SavedCard>;
+  deletion: {
+    id: number;
+    isModalVisible: boolean;
+  };
+}
+
+const initialState: SavedCardState = {
+  cards: undefined,
+  deletion: {
+    id: null,
+    isModalVisible: false
+  }
+};
+
+const savedCardSlice = createSlice({
+  name: 'savedCard',
+  initialState,
+  reducers: {
+    setCards(state, { payload }) {
+      state.cards = payload;
+    },
+    setDeletionModalId(state, { payload }) {
+      state.deletion.id = payload;
+    },
+    setDeletionModalVisible(state, { payload }) {
+      state.deletion.isModalVisible = payload;
+    }
+  }
+});
+
+export const { setCards, setDeletionModalId, setDeletionModalVisible } =
+  savedCardSlice.actions;
+
+export default savedCardSlice.reducer;

package/src/types/index.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+
+export type InstallmentTexts = {
+  title?: string;
+  payments?: string;
+  per_month?: string;
+  total?: string;
+};
+
+export type DeletePopupTexts = {
+  title?: string;
+  delete_button?: string;
+  cancel_button?: string;
+};
+
+export type ErrorTexts = {
+  required?: string;
+};
+
+export type SavedCardOptionTexts = {
+  title?: string;
+  button?: string;
+  installment?: InstallmentTexts;
+  deletePopup?: DeletePopupTexts;
+  errors?: ErrorTexts;
+};
+
+export type CardSelectionSectionProps = {
+  title: string;
+  cards: any[];
+  selectedCard: any;
+  onSelect: (card: any) => void;
+  register: any;
+  errors: any;
+  dispatch: any;
+};
+
+export type InstallmentSectionProps = {
+  title: string;
+  selectedCard: any;
+  installmentOptions: any;
+  translations: InstallmentTexts;
+  errors: any;
+};
+
+export type AgreementAndSubmitProps = {
+  agreementCheckbox: ReactElement | undefined;
+  control: any;
+  errors: any;
+  formError: any;
+  buttonText: string;
+};

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+export const getCreditCardType = (maskedCardNumber: string): string => {
+  const cardNumber = maskedCardNumber.replace(/\D/g, '');
+
+  if (/^4/.test(cardNumber)) {
+    return 'visa';
+  } else if (/^5[1-5]/.test(cardNumber)) {
+    return 'mastercard';
+  } else if (/^3[47]/.test(cardNumber)) {
+    return 'amex';
+  } else if (/^9/.test(cardNumber)) {
+    return 'troy';
+  } else {
+    return 'other';
+  }
+};

package/src/views/saved-card-option.tsx

@@ -0,0 +1,324 @@
+'use client';
+
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import React, { cloneElement, ReactElement, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { RootState } from 'projectzeronext/src/redux/store';
+import {
+  useCompleteSavedCardMutation,
+  useGetSavedCardsQuery,
+  useSetSavedCardMutation
+} from '../redux/api';
+import { Button, Icon, Image } from '@akinon/next/components';
+import { getCreditCardType } from '../utils';
+
+import amex from '../../assets/img/amex.jpg';
+import mastercard from '../../assets/img/mastercard.png';
+import other from '../../assets/img/other.png';
+import troy from '../../assets/img/troy.png';
+import visa from '../../assets/img/visa.png';
+
+import SavedCardInstallments from '../components/installments';
+import {
+  setCards,
+  setDeletionModalId,
+  setDeletionModalVisible
+} from '../redux/reducer';
+import { DeleteConfirmationModal } from '../components/delete-confirmation-modal';
+import {
+  AgreementAndSubmitProps,
+  CardSelectionSectionProps,
+  ErrorTexts,
+  InstallmentSectionProps,
+  SavedCardOptionTexts
+} from '../types';
+
+const cardImages = { amex, mastercard, troy, visa, other };
+
+type SavedCardOptionProps = {
+  texts?: SavedCardOptionTexts;
+  agreementCheckbox?: ReactElement;
+  customRender?: {
+    cardSelectionSection?: (props: CardSelectionSectionProps) => ReactElement;
+    installmentSection?: (props: InstallmentSectionProps) => ReactElement;
+    agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
+  };
+};
+
+const defaultTranslations: SavedCardOptionTexts = {
+  title: 'Pay with Saved Card',
+  button: 'Continue with selected card',
+  installment: {
+    title: 'Installment Options'
+  },
+  errors: {
+    required: 'This field is required'
+  }
+};
+
+const mergeTranslations = (
+  customTranslations: SavedCardOptionTexts,
+  defaultTranslations: SavedCardOptionTexts
+) => {
+  return {
+    ...defaultTranslations,
+    ...customTranslations,
+    installment: {
+      ...defaultTranslations.installment,
+      ...customTranslations.installment
+    },
+    errors: {
+      ...defaultTranslations.errors,
+      ...customTranslations.errors
+    },
+    deletePopup: {
+      ...defaultTranslations.deletePopup,
+      ...customTranslations.deletePopup
+    }
+  };
+};
+
+const createFormSchema = (errors: ErrorTexts) =>
+  yup.object().shape({
+    card: yup
+      .string()
+      .required(errors?.required ?? defaultTranslations.errors.required)
+      .typeError(errors?.required ?? defaultTranslations.errors.required),
+    agreement: yup
+      .boolean()
+      .oneOf([true], errors?.required ?? defaultTranslations.errors.required)
+  });
+
+const SavedCardOption = ({
+  texts = defaultTranslations,
+  agreementCheckbox,
+  customRender
+}: SavedCardOptionProps) => {
+  const mergedTexts = mergeTranslations(texts, defaultTranslations);
+
+  const [selectedCard, setSelectedCard] = useState(null);
+  const [formError, setFormError] = useState(null);
+  const dispatch = useAppDispatch();
+  const { data: savedCards } = useGetSavedCardsQuery();
+  const [completeSavedCard] = useCompleteSavedCardMutation();
+  const [setSavedCard] = useSetSavedCardMutation();
+  const installmentOptions = useAppSelector(
+    (state: RootState) => state.checkout.installmentOptions
+  );
+  const cards = useAppSelector((state: RootState) => state.savedCard.cards);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(createFormSchema(mergedTexts.errors))
+  });
+
+  const handleCardSelection = async (card) => {
+    await setSavedCard({ card }).unwrap();
+    setSelectedCard(card);
+  };
+
+  const onSubmit = async () => {
+    try {
+      await completeSavedCard({ agreement: true });
+    } catch (error) {
+      setFormError(error);
+    }
+  };
+
+  useEffect(() => {
+    if (savedCards?.results && !cards?.length) {
+      dispatch(setCards(savedCards.results));
+    }
+  }, [savedCards]);
+
+  return (
+    <>
+      <form className="flex flex-wrap w-full" onSubmit={handleSubmit(onSubmit)}>
+        <div className="w-full flex flex-col xl:w-6/10">
+          {customRender?.cardSelectionSection ? (
+            customRender.cardSelectionSection({
+              title: mergedTexts.title,
+              cards,
+              selectedCard,
+              onSelect: handleCardSelection,
+              register,
+              errors,
+              dispatch
+            })
+          ) : (
+            <CardSelectionSection
+              title={mergedTexts.title}
+              cards={cards}
+              selectedCard={selectedCard}
+              onSelect={handleCardSelection}
+              register={register}
+              errors={errors}
+              dispatch={dispatch}
+            />
+          )}
+        </div>
+
+        <div className="w-full xl:w-4/10 xl:border-l xl:border-t-0">
+          {customRender?.installmentSection ? (
+            customRender.installmentSection({
+              title: mergedTexts.installment?.title,
+              selectedCard,
+              installmentOptions,
+              translations: mergedTexts.installment,
+              errors: errors.installment
+            })
+          ) : (
+            <InstallmentSection
+              title={mergedTexts.installment?.title}
+              selectedCard={selectedCard}
+              installmentOptions={installmentOptions}
+              translations={mergedTexts.installment}
+              errors={errors.installment}
+            />
+          )}
+
+          {customRender?.agreementAndSubmit ? (
+            customRender.agreementAndSubmit({
+              agreementCheckbox,
+              control,
+              errors,
+              formError,
+              buttonText: mergedTexts.button
+            })
+          ) : (
+            <AgreementAndSubmit
+              agreementCheckbox={agreementCheckbox}
+              control={control}
+              errors={errors}
+              formError={formError}
+              buttonText={mergedTexts.button}
+            />
+          )}
+        </div>
+      </form>
+      <DeleteConfirmationModal translations={mergedTexts.deletePopup} />
+    </>
+  );
+};
+
+const CardSelectionSection = ({
+  title,
+  cards,
+  selectedCard,
+  onSelect,
+  register,
+  errors,
+  dispatch
+}) => (
+  <div className="border-solid border-gray-400 px-4 py-2">
+    <span className="text-black-800 text-lg font-medium">{title}</span>
+    <ul className="mt-4 text-xs w-full">
+      {cards?.map((card) => (
+        <li
+          key={card.token}
+          className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center cursor-pointer"
+          onClick={() => onSelect(card)}
+        >
+          <input
+            name="card"
+            type="radio"
+            checked={selectedCard?.token === card.token}
+            value={card.token}
+            id={card.token}
+            className="mr-2"
+            onChange={() => {}}
+            {...register('card')}
+          />
+          <CardLabel card={card} />
+          <DeleteIcon
+            onClick={() => {
+              dispatch(setDeletionModalId(card.id));
+              dispatch(setDeletionModalVisible(true));
+            }}
+          />
+        </li>
+      ))}
+    </ul>
+    {errors.card && <ErrorText message={errors.card?.message} />}
+  </div>
+);
+
+const CardLabel = ({ card }) => (
+  <label className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between">
+    <p className="w-full text-[10px] lg:w-1/3">{card.masked_card_number}</p>
+    <Image
+      className="w-8 h-6 object-contain flex items-center justify-center"
+      width={50}
+      height={50}
+      src={cardImages[getCreditCardType(card.masked_card_number)].src}
+      alt={card.name}
+    />
+  </label>
+);
+
+const DeleteIcon = ({ onClick }) => (
+  <span className="cursor-pointer p-1" onClick={onClick}>
+    <Icon name="close" size={12} />
+  </span>
+);
+
+const InstallmentSection = ({
+  title,
+  selectedCard,
+  installmentOptions,
+  translations,
+  errors
+}) => (
+  <div className="border-solid border-gray-400 bg-white">
+    <div className="px-4 py-2">
+      <span className="text-black-800 text-lg font-medium">{title}</span>
+    </div>
+    <SavedCardInstallments
+      selectedCard={selectedCard}
+      installmentOptions={installmentOptions}
+      translations={translations}
+      error={errors}
+    />
+  </div>
+);
+
+const AgreementAndSubmit = ({
+  agreementCheckbox,
+  control,
+  errors,
+  formError,
+  buttonText
+}) => (
+  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
+    {agreementCheckbox &&
+      cloneElement(agreementCheckbox, {
+        control,
+        error: errors.agreement,
+        fieldId: 'agreement'
+      })}
+    {formError && (
+      <ErrorText message={formError.non_field_errors ?? formError.status} />
+    )}
+    <Button
+      type="submit"
+      className="group uppercase mt-4 inline-flex items-center justify-center"
+    >
+      <span>{buttonText}</span>
+      <Icon name="chevron-end" size={12} className="ml-2 h-3" />
+    </Button>
+  </div>
+);
+
+const ErrorText = ({ message }) => (
+  <div className="w-full text-xs text-start px-1 mt-3 text-error">
+    {message}
+  </div>
+);
+
+export default SavedCardOption;