@akinon/pz-saved-card 1.101.0-rc.76 → 1.101.0-snapshot-ZERO-3615-20250924121313

package/CHANGELOG.md

@@ -1,32 +1,6 @@
 # @akinon/pz-saved-card
 
-## 1.101.0-rc.76
-
-### Minor Changes
-
-- 6bfbdc2: ZERO-3653: optimize saved card option
-
-## 1.101.0-rc.75
-
-### Minor Changes
-
-- 9442cf0: ZERO-3653: make the register_consumer_card option optional
-
-## 1.101.0-rc.74
-
-## 1.101.0-rc.73
-
-### Minor Changes
-
-- 4ca44c7: ZERO-3634: add register_consumer_card
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
-- 5b50079: ZERO-3634: iyzico saved card
+## 1.101.0-snapshot-ZERO-3615-20250924121313
 
 ## 1.100.0
 
@@ -52,83 +26,14 @@
 
 ## 1.91.0
 
-> > > > > > > origin/ZERO-3418
-
 ## 1.90.0
 
 ## 1.89.0
 
 ### Minor Changes
 
-- e974d8e: ZERO-3406: Fix rc build
-- 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.89.0-rc.21
-
-### Minor Changes
-
-- e974d8e: ZERO-3406: Fix rc build
-
-## 1.89.0-rc.20
-
-## 1.89.0-rc.19
-
-## 1.89.0-rc.18
-
-## 1.89.0-rc.17
-
-## 1.89.0-rc.16
-
-## 1.89.0-rc.15
-
-## 1.89.0-rc.14
-
-## 1.89.0-rc.13
-
-## 1.89.0-rc.12
-
-## 1.89.0-rc.11
-
-## 1.89.0-rc.10
-
-### Minor Changes
-
-- 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
-- e2026ec: ZERO-3353: add missing test ids for e2e test
-
-## 1.89.0-rc.9
-
-### Minor Changes
-
-- 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
 - e2026ec: ZERO-3353: add missing test ids for e2e test
 
-## 1.89.0-rc.8
-
-## 1.89.0-rc.7
-
-## 1.89.0-rc.6
-
-## 1.89.0-rc.5
-
-## 1.89.0-rc.4
-
-## 1.89.0-rc.3
-
-## 1.89.0-rc.2
-
-## 1.89.0-rc.1
-
-## 1.89.0-rc.0
-
-### Minor Changes
-
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 33377cf: ZERO-3267: Refactor import statement for ROUTES in error-page component
-
 ## 1.88.0
 
 ## 1.87.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-saved-card",
-  "version": "1.101.0-rc.76",
+  "version": "1.101.0-snapshot-ZERO-3615-20250924121313",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/components/agreement-and-submit.tsx

@@ -1,14 +1,12 @@
-import { cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import { Button, Icon } from '@akinon/next/components';
-import { AgreementAndSubmitProps } from '../types';
 
 export const AgreementAndSubmit = ({
   agreementCheckbox,
   control,
   errors,
-  buttonText,
-  formError
-}: AgreementAndSubmitProps) => (
+  buttonText
+}) => (
   <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
     {agreementCheckbox &&
       cloneElement(agreementCheckbox, {
@@ -16,16 +14,6 @@ export const AgreementAndSubmit = ({
         error: errors.agreement,
         fieldId: 'agreement'
       })}
-    {formError?.non_field_errors && (
-      <div className="w-full text-xs text-start px-1 mt-3 text-error">
-        {formError.non_field_errors}
-      </div>
-    )}
-    {formError?.status && (
-      <div className="w-full text-xs text-start px-1 mt-3 text-error">
-        {formError.status}
-      </div>
-    )}
     <Button
       type="submit"
       className="group uppercase mt-4 inline-flex items-center justify-center"

package/src/components/card-selection-section.tsx

@@ -1,4 +1,5 @@
 import { setDeletionModalId, setDeletionModalVisible } from '../redux/reducer';
+import React from 'react';
 import { ErrorText } from './error-text';
 import { CardLabel } from './card-label';
 import { DeleteIcon } from './delete-icon';

package/src/components/installment-section.tsx

@@ -1,17 +1,19 @@
 import SavedCardInstallments from './installments';
-import { InstallmentSectionProps } from '../types';
+import React from 'react';
 
 export const InstallmentSection = ({
   title,
+  selectedCard,
   installmentOptions,
   translations,
   errors
-}: InstallmentSectionProps) => (
+}) => (
   <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}

package/src/components/installments.tsx

@@ -12,12 +12,14 @@ const defaultTranslations = {
 };
 
 type SavedCardInstallmentsProps = {
+  selectedCard: SavedCard;
   installmentOptions: any[];
   translations?: InstallmentTexts;
   error: any;
 };
 
 const SavedCardInstallments = ({
+  selectedCard,
   installmentOptions = [],
   translations,
   error
@@ -28,6 +30,7 @@ const SavedCardInstallments = ({
 
   useEffect(() => {
     if (
+      selectedCard &&
       installmentOptions.length > 0 &&
       installmentOptions[0]?.pk !== installmentOption
     ) {
@@ -37,7 +40,7 @@ const SavedCardInstallments = ({
       });
       setInstallmentOption(firstOptionPk);
     }
-  }, [installmentOptions, installmentOption, setInstallment]);
+  }, [installmentOptions, installmentOption, setInstallment, selectedCard]);
 
   if (installmentOptions.length === 0) {
     return (

package/src/index.tsx

@@ -1,11 +1,5 @@
 import savedCardReducer from './redux/reducer';
 import savedCardMiddleware from './redux/middleware';
 import SavedCardOption from './views/saved-card-option';
-import IyzicoSavedCardOption from './views/iyzico-saved-card-option';
 
-export {
-  savedCardReducer,
-  savedCardMiddleware,
-  SavedCardOption,
-  IyzicoSavedCardOption
-};
+export { savedCardReducer, savedCardMiddleware, SavedCardOption };

package/src/redux/api.ts

@@ -21,49 +21,20 @@ interface GetResponse<T> {
   results: T[];
 }
 
-type DefaultSetSavedCardRequest = {
+type SetSavedCardRequest = {
   card: SavedCard;
 };
 
-type IyzicoSetSavedCardRequest = {
-  card: string;
-};
-
-type SetSavedCardRequest =
-  | DefaultSetSavedCardRequest
-  | IyzicoSetSavedCardRequest;
-
 type DeleteSavedCardRequest = number;
 
 type SetInstallmentRequest = {
   installment: string;
 };
 
-type DefaultCompleteSavedCardRequest = {
+type CompleteSavedCardRequest = {
   agreement: boolean;
 };
 
-type IyzicoCompleteSavedCardRequest =
-  | {
-      agreement: boolean;
-      register_consumer_card: boolean;
-      consumer_token: string;
-      card_token: string;
-    }
-  | {
-      agreement: boolean;
-      card_holder: string;
-      card_number: string;
-      card_cvv: string;
-      card_month: string;
-      card_year: string;
-      register_consumer_card: boolean;
-    };
-
-type CompleteSavedCardRequest =
-  | DefaultCompleteSavedCardRequest
-  | IyzicoCompleteSavedCardRequest;
-
 export const savedCardApi = api.injectEndpoints({
   endpoints: (build) => ({
     getSavedCards: build.query<GetResponse<SavedCard>, void>({
@@ -100,7 +71,7 @@ export const savedCardApi = api.injectEndpoints({
         ),
         method: 'POST',
         body: {
-          card: typeof card === 'string' ? card : card.token
+          card: card.token
         }
       }),
       async onQueryStarted({ card }, { dispatch, queryFulfilled }) {
@@ -135,7 +106,7 @@ export const savedCardApi = api.injectEndpoints({
       CheckoutResponse,
       CompleteSavedCardRequest
     >({
-      query: (body) => ({
+      query: ({ agreement }) => ({
         url: buildClientRequestUrl(
           `/orders/checkout?page=CompleteSavedCardRequest`,
           {
@@ -143,7 +114,9 @@ export const savedCardApi = api.injectEndpoints({
           }
         ),
         method: 'POST',
-        body
+        body: {
+          agreement
+        }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));

package/src/redux/middleware.ts

@@ -1,27 +1,22 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { setCards, setUcs } from './reducer';
+import { setCards } from './reducer';
 
 const savedCardMiddleware: Middleware = ({ dispatch }) => {
   return (next) => (action) => {
     const result = next(action);
 
     const savedCardContext = result.payload?.context_list?.find(
-      (context) => context.page_slug === 'savedcardselectionpage'
+      (context) =>
+        context.page_slug === 'savedcardselectionpage' &&
+        context.page_context.cards
     );
 
-    if (savedCardContext && savedCardContext.page_context?.cards) {
+    if (savedCardContext) {
       const cards = JSON.parse(
         JSON.stringify(savedCardContext.page_context.cards)
       );
 
       dispatch(setCards(cards));
-    } else if (savedCardContext && savedCardContext.page_context?.ucs) {
-      const ucs = JSON.parse(JSON.stringify(savedCardContext.page_context.ucs));
-
-      const match = ucs.script.match(/<script\b[^>]*>([\s\S]*?)<\/script>/);
-      ucs.script = match ? match[1] : ucs.script;
-
-      dispatch(setUcs(ucs));
     }
 
     return result;

package/src/redux/reducer.ts

@@ -7,20 +7,12 @@ export type SavedCard = {
   token: string;
 };
 
-export type IyzicoUcs = {
-  maskedGsmNumber?: string;
-  script?: string;
-  scriptType?: string;
-  ucsToken?: string;
-};
-
 export interface SavedCardState {
   cards?: Array<SavedCard>;
   deletion: {
     id: number;
     isModalVisible: boolean;
   };
-  ucs?: IyzicoUcs;
 }
 
 const initialState: SavedCardState = {
@@ -43,22 +35,11 @@ const savedCardSlice = createSlice({
     },
     setDeletionModalVisible(state, { payload }) {
       state.deletion.isModalVisible = payload;
-    },
-    setUcs(state, action: { payload: IyzicoUcs }) {
-      state.ucs = action.payload;
-    },
-    resetUcs() {
-      return initialState;
     }
   }
 });
 
-export const {
-  setCards,
-  setDeletionModalId,
-  setDeletionModalVisible,
-  setUcs,
-  resetUcs
-} = savedCardSlice.actions;
+export const { setCards, setDeletionModalId, setDeletionModalVisible } =
+  savedCardSlice.actions;
 
 export default savedCardSlice.reducer;

package/src/types/index.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { Control, FieldErrors } from 'react-hook-form';
 
 export type InstallmentTexts = {
   title?: string;
@@ -16,9 +15,6 @@ export type DeletePopupTexts = {
 
 export type ErrorTexts = {
   required?: string;
-  cardNumberLength?: string;
-  cvvLength?: string;
-  cardHolderMatches?: string;
 };
 
 export type SavedCardOptionTexts = {
@@ -29,29 +25,6 @@ export type SavedCardOptionTexts = {
   errors?: ErrorTexts;
 };
 
-export type IyzicoSavedCardOptionTexts = {
-  title?: string;
-  button?: string;
-  installment?: InstallmentTexts;
-  errors?: ErrorTexts & {
-    saveCardRequired?: string;
-  };
-  label?: {
-    cardHolder?: string;
-    cardNumber?: string;
-    expiryDate?: string;
-    cvv?: string;
-    saveCardForFuture?: string;
-  };
-  placeholder?: {
-    cardHolder?: string;
-    cardMonth?: string;
-    cardYear?: string;
-  };
-  savedCardsTitle?: string;
-  paymentErrorMessage?: string;
-};
-
 export type CardSelectionSectionProps = {
   title: string;
   cards: any[];
@@ -64,34 +37,15 @@ export type CardSelectionSectionProps = {
 
 export type InstallmentSectionProps = {
   title: string;
+  selectedCard: any;
   installmentOptions: any;
   translations: InstallmentTexts;
   errors: any;
-  setFormValue?: any;
 };
 
-export interface AgreementAndSubmitProps {
-  agreementCheckbox?: ReactElement;
-  control: Control<any>;
-  errors: FieldErrors;
-  buttonText: string;
-  formError?: {
-    non_field_errors?: string;
-    status?: string;
-    [key: string]: any;
-  };
-}
-
-export type CardFormSectionProps = {
-  register: any;
+export type AgreementAndSubmitProps = {
+  agreementCheckbox: ReactElement | undefined;
   control: any;
   errors: any;
-  months: Array<{ label: string; value: string }>;
-  years: Array<{ label: string; value: string }>;
-  translations?: IyzicoSavedCardOptionTexts['label'];
-  setFormValue?: any;
-};
-
-export type IyzicoSavedCardsProps = {
-  title?: string;
+  buttonText: string;
 };

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

@@ -183,6 +183,7 @@ const SavedCardOption = ({
           {customRender?.installmentSection ? (
             customRender.installmentSection({
               title: mergedTexts.installment?.title,
+              selectedCard,
               installmentOptions,
               translations: mergedTexts.installment,
               errors: errors.installment
@@ -190,6 +191,7 @@ const SavedCardOption = ({
           ) : (
             <InstallmentSection
               title={mergedTexts.installment?.title}
+              selectedCard={selectedCard}
               installmentOptions={installmentOptions}
               translations={mergedTexts.installment}
               errors={errors.installment}

package/src/components/card-form-section.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { Input, Select, Icon, Image } from '@akinon/next/components';
-import { Control, UseFormRegister, FieldErrors } from 'react-hook-form';
-
-export interface CardFormSectionProps {
-  register: UseFormRegister<any>;
-  control: Control<any>;
-  errors: FieldErrors;
-  months: Array<{ label: string; value: string }>;
-  years: Array<{ label: string; value: string }>;
-  translations?: {
-    cardHolder?: string;
-    cardNumber?: string;
-    expiryDate?: string;
-    cvv?: string;
-    cvvTooltip?: string;
-    saveCardForFuture?: string;
-  };
-}
-
-export const CardFormSection = ({
-  register,
-  control,
-  errors,
-  months,
-  years,
-  translations = {},
-}: CardFormSectionProps) => {
-  return (
-    <div className="w-full bg-white">
-      <div className="px-4 my-2 w-full flex justify-between flex-wrap">
-        <div className="my-2 w-full sm:px-4">
-          <Input
-            label={translations.cardHolder}
-            {...register('card_holder')}
-            error={errors.card_holder}
-          />
-        </div>
-
-        <div className="my-2 w-full flex flex-col sm:px-4">
-          <div className="text-xs text-gray-800 mb-2 w-full flex justify-between items-center">
-            <span>{translations.cardNumber}</span>
-          </div>
-
-          <Input
-            format="#### #### #### ####"
-            mask="_"
-            allowEmptyFormatting={true}
-            control={control}
-            {...register('card_number')}
-            error={errors.card_number}
-          />
-        </div>
-
-        <div className="w-full my-2 sm:flex">
-          <div className="sm:w-2/3 sm:px-4">
-            <label
-              className="flex w-full text-xs text-start text-black-400 mb-1.5"
-              htmlFor="card_month"
-            >
-              {translations.expiryDate}
-            </label>
-
-            <div className="flex w-full h-10 space-x-2.5">
-              <div className="w-2/4">
-                <Select
-                  className="w-full text-xs border-gray-400 sm:text-sm"
-                  options={months}
-                  {...register('card_month')}
-                  error={errors.card_month}
-                />
-              </div>
-
-              <div className="w-2/4">
-                <Select
-                  className="w-full text-xs border-gray-400 sm:text-sm"
-                  options={years}
-                  {...register('card_year')}
-                  error={errors.card_year}
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="my-2 sm:w-1/3 sm:px-4 sm:my-0">
-            <label
-              className="flex w-full text-xs text-start text-black-400 mb-1.5"
-              htmlFor="card_cvv"
-            >
-              {translations.cvv}
-            </label>
-            <Input
-              format="###"
-              mask="_"
-              control={control}
-              allowEmptyFormatting={true}
-              {...register('card_cvv')}
-              error={errors.card_cvv}
-            />
-            <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer mt-2 transition-all hover:text-secondary">
-              <span className="text-xs underline">
-                {translations.cvv}
-              </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={264} />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="my-2 w-full flex flex-col sm:px-4">
-          <label className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              {...register('register_consumer_card')}
-              className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
-            />
-            <span className="text-sm text-gray-700">
-              {translations.saveCardForFuture}
-            </span>
-          </label>
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,427 +0,0 @@
-'use client';
-
-import * as yup from 'yup';
-import { ObjectSchema } from 'yup';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useForm } from 'react-hook-form';
-import {
-  FormHTMLAttributes,
-  HTMLAttributes,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  useCompleteSavedCardMutation,
-  useSetSavedCardMutation
-} from '../redux/api';
-
-import {
-  AgreementAndSubmitProps,
-  CardFormSectionProps,
-  ErrorTexts,
-  InstallmentSectionProps,
-  IyzicoSavedCardOptionTexts,
-  IyzicoSavedCardsProps
-} from '../types';
-import { InstallmentSection } from '../components/installment-section';
-import { AgreementAndSubmit } from '../components/agreement-and-submit';
-import { CardFormSection } from '../components/card-form-section';
-import Script from 'next/script';
-
-type IyzicoSavedCardOptionProps = {
-  texts?: IyzicoSavedCardOptionTexts;
-  agreementCheckbox?: ReactElement;
-  customFormSchema?: {
-    'new-card'?: ObjectSchema<any>;
-    'existing-card'?: ObjectSchema<any>;
-  };
-  customRender?: {
-    cardFormSection?: (props: CardFormSectionProps) => ReactElement;
-    savedCardsSection?: (props: IyzicoSavedCardsProps) => ReactElement;
-    installmentSection?: (props: InstallmentSectionProps) => ReactElement;
-    agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
-  };
-  formWrapperClassName?: string;
-  cardSelectionWrapperClassName?: string;
-  installmentWrapperClassName?: string;
-  formProps?: FormHTMLAttributes<HTMLFormElement>;
-  cardSelectionWrapperProps?: HTMLAttributes<HTMLDivElement>;
-  installmentWrapperProps?: HTMLAttributes<HTMLDivElement>;
-};
-
-const defaultTranslations: IyzicoSavedCardOptionTexts = {
-  title: 'Pay with Iyzico',
-  button: 'Complete Payment',
-  installment: {
-    title: 'Installment Options'
-  },
-  errors: {
-    required: 'This field is required',
-    cardNumberLength: 'Card number must be 16 digits long.',
-    cvvLength: 'CVV must be 3 digits long.',
-    cardHolderMatches: 'Please enter a valid name',
-    saveCardRequired: 'Please select the Save My Card option'
-  },
-  label: {
-    cardHolder: 'Cardholder Name',
-    cardNumber: 'Card Number',
-    expiryDate: 'Expiration Date',
-    cvv: 'CVV',
-    saveCardForFuture: 'Save this card for future payments',
-  },
-  placeholder: {
-    cardHolder: 'Name on Card',
-    cardMonth: 'Month',
-    cardYear: 'Year'
-  },
-  savedCardsTitle: 'Select from your saved cards:',
-  paymentErrorMessage: 'An error occurred while processing your payment'
-};
-
-const mergeTranslations = (
-  customTranslations: IyzicoSavedCardOptionTexts,
-  defaultTranslations: IyzicoSavedCardOptionTexts
-) => {
-  return {
-    ...defaultTranslations,
-    ...customTranslations,
-    installment: {
-      ...defaultTranslations.installment,
-      ...customTranslations.installment
-    },
-    errors: {
-      ...defaultTranslations.errors,
-      ...customTranslations.errors
-    },
-    label: {
-      ...defaultTranslations.label,
-      ...customTranslations.label
-    },
-    placeholder: {
-      ...defaultTranslations.placeholder,
-      ...customTranslations.placeholder
-    }
-  };
-};
-
-const createFormSchema = (
-  errors: ErrorTexts,
-  type: 'existing-card' | 'new-card'
-) => {
-  const baseSchema = {
-    agreement: yup
-      .boolean()
-      .oneOf([true], errors?.required ?? defaultTranslations.errors.required),
-    register_consumer_card: yup.boolean().default(false)
-  };
-
-  if (type === 'new-card') {
-    return yup.object().shape({
-      ...baseSchema,
-      card_holder: yup
-        .string()
-        .required(errors?.required ?? defaultTranslations.errors.required)
-        .matches(
-          /^[a-zA-ZğüşöçıİĞÜŞÖÇ\s]+$/,
-          errors?.cardHolderMatches ??
-            defaultTranslations.errors.cardHolderMatches
-        ),
-      card_number: yup
-        .string()
-        .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-        .length(
-          16,
-          errors?.cardNumberLength ??
-            defaultTranslations.errors.cardNumberLength
-        )
-        .required(errors?.required ?? defaultTranslations.errors.required),
-      card_month: yup
-        .string()
-        .required(errors?.required ?? defaultTranslations.errors.required),
-      card_year: yup
-        .string()
-        .required(errors?.required ?? defaultTranslations.errors.required),
-      card_cvv: yup
-        .string()
-        .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-        .length(3, errors?.cvvLength ?? defaultTranslations.errors.cvvLength)
-        .required(errors?.required ?? defaultTranslations.errors.required)
-    });
-  }
-
-  return yup.object().shape(baseSchema);
-};
-
-const IyzicoSavedCardOption = ({
-  texts = defaultTranslations,
-  agreementCheckbox,
-  customFormSchema,
-  customRender,
-  formWrapperClassName = 'flex flex-wrap w-full',
-  cardSelectionWrapperClassName = 'w-full flex flex-col xl:w-6/10',
-  installmentWrapperClassName = 'w-full xl:w-4/10 xl:border-l xl:border-t-0',
-  formProps = {},
-  cardSelectionWrapperProps = {},
-  installmentWrapperProps = {}
-}: IyzicoSavedCardOptionProps) => {
-  const mergedTexts = useMemo(
-    () => mergeTranslations(texts, defaultTranslations),
-    [texts]
-  );
-  const [completeSavedCard] = useCompleteSavedCardMutation();
-  const [setSavedCard] = useSetSavedCardMutation();
-  const installmentOptions = useAppSelector(
-    (state) => state.checkout.installmentOptions
-  );
-  const ucs = useAppSelector((state) => state.savedCard.ucs);
-  const [type, setType] = useState<'new-card' | 'existing-card'>('new-card');
-  const [months, setMonths] = useState([]);
-  const [years, setYears] = useState([]);
-  const [formError, setFormError] = useState(null);
-
-  const getFormSchema = () => {
-    if (customFormSchema?.[type]) {
-      return customFormSchema[type];
-    }
-    return createFormSchema(mergedTexts.errors, type);
-  };
-
-  const {
-    register,
-    handleSubmit,
-    control,
-    formState: { errors },
-    setValue: setFormValue
-  } = useForm({
-    resolver: yupResolver(getFormSchema())
-  });
-
-  const onSubmit = async (data) => {
-    if (!window.iyziUcsInit) {
-      return;
-    }
-
-    setFormError(null);
-
-    try {
-      if (type === 'existing-card') {
-        const res = await completeSavedCard({
-          agreement: data.agreement,
-          consumer_token: window.universalCardStorage.consumerToken,
-          card_token: window.universalCardStorage.cardToken,
-          register_consumer_card: true
-        });
-
-        if ('data' in res && res.data?.errors) {
-          setFormError(res.data.errors);
-        }
-      } else {
-        const res = await completeSavedCard({
-          agreement: data.agreement,
-          card_holder: data.card_holder,
-          card_number: data.card_number.replaceAll(' ', ''),
-          card_month: data.card_month,
-          card_year: data.card_year,
-          card_cvv: data.card_cvv,
-          register_consumer_card: data.register_consumer_card || false
-        });
-
-        if ('data' in res && res.data?.errors) {
-          setFormError(res.data.errors);
-        }
-      }
-    } catch (error) {
-      console.error('Error completing saved card:', error);
-      setFormError({
-        non_field_errors:
-          mergedTexts.paymentErrorMessage ??
-          defaultTranslations.paymentErrorMessage
-      });
-    }
-  };
-
-  const ucsScript = ucs?.script && (
-    <Script
-      id="saved_card"
-      strategy="afterInteractive"
-      dangerouslySetInnerHTML={{ __html: ucs.script }}
-    />
-  );
-
-  useEffect(() => {
-    window.iyziUcsInit?.createTag();
-
-    const monthsList = [
-      {
-        label:
-          mergedTexts.placeholder?.cardMonth ??
-          defaultTranslations.placeholder.cardMonth,
-        value: ''
-      }
-    ];
-    const yearsList = [
-      {
-        label:
-          mergedTexts.placeholder?.cardYear ??
-          defaultTranslations.placeholder.cardYear,
-        value: ''
-      }
-    ];
-    const date = new Date();
-    const currentYear = date.getFullYear();
-
-    for (let i = 1; i <= 12; i++) {
-      monthsList.push({ label: i.toString(), value: i.toString() });
-    }
-
-    for (let i = currentYear; i < currentYear + 13; i++) {
-      yearsList.push({ label: i.toString(), value: i.toString() });
-    }
-
-    setMonths(monthsList);
-    setYears(yearsList);
-
-    if (window.iyziUcsInit?.ucsToken) {
-      setSavedCard({
-        card: window.iyziUcsInit.ucsToken
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    if (window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
-      if (
-        window.universalCardStorage?.cardToken
-      ) {
-        setType('existing-card');
-      } else {
-        setType('new-card');
-      }
-    } else {
-      setType('new-card');
-    }
-
-    const checkboxInterval = setInterval(() => {
-      if (window.universalCardStorage?.cardToken !== undefined) {
-        setType('existing-card');
-      } else {
-        setType('new-card');
-      }
-    }, 100);
-
-    return () => clearInterval(checkboxInterval);
-  }, [type]);
-
-  return (
-    <>
-      <form
-        className={formWrapperClassName}
-        onSubmit={handleSubmit(onSubmit)}
-        {...formProps}
-      >
-        <div
-          className={cardSelectionWrapperClassName}
-          {...cardSelectionWrapperProps}
-        >
-          {mergedTexts.title && (
-            <div className="border-solid border-gray-400 px-4 py-2">
-              <span className="text-black-800 text-lg font-medium">
-                {mergedTexts.title}
-              </span>
-            </div>
-          )}
-
-          {window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST' && (
-            <>
-              {customRender?.savedCardsSection ? (
-                customRender.savedCardsSection({
-                  title: mergedTexts.savedCardsTitle
-                })
-              ) : (
-                <div>
-                  <h3 className="text-sm font-medium text-gray-800 mb-3 px-4 sm:px-6">
-                    {mergedTexts.savedCardsTitle}
-                  </h3>
-                  <div id="ucs-cards" className="mb-3 px-4 sm:px-6"></div>
-                </div>
-              )}
-            </>
-          )}
-
-          {type === 'new-card' && (
-            <>
-              {customRender?.cardFormSection ? (
-                customRender.cardFormSection({
-                  register,
-                  control,
-                  errors,
-                  months,
-                  years,
-                  translations: mergedTexts.label,
-                  setFormValue
-                })
-              ) : (
-                <CardFormSection
-                  register={register}
-                  control={control}
-                  errors={errors}
-                  months={months}
-                  years={years}
-                  translations={mergedTexts.label}
-                />
-              )}
-            </>
-          )}
-        </div>
-
-        <div
-          className={installmentWrapperClassName}
-          {...installmentWrapperProps}
-        >
-          {customRender?.installmentSection ? (
-            customRender.installmentSection({
-              title: mergedTexts.installment?.title,
-              installmentOptions,
-              translations: mergedTexts.installment,
-              errors: errors.installment,
-              setFormValue
-            })
-          ) : (
-            <InstallmentSection
-              title={mergedTexts.installment?.title}
-              installmentOptions={installmentOptions}
-              translations={mergedTexts.installment}
-              errors={errors.installment}
-            />
-          )}
-
-          <div className="flex flex-col text-xs">
-            {customRender?.agreementAndSubmit ? (
-              customRender.agreementAndSubmit({
-                agreementCheckbox,
-                control,
-                errors,
-                buttonText: mergedTexts.button,
-                formError
-              })
-            ) : (
-              <AgreementAndSubmit
-                agreementCheckbox={agreementCheckbox}
-                control={control}
-                errors={errors}
-                buttonText={mergedTexts.button}
-                formError={formError}
-              />
-            )}
-          </div>
-        </div>
-      </form>
-      {ucsScript}
-    </>
-  );
-};
-
-export default IyzicoSavedCardOption;