@akinon/pz-saved-card 1.62.0-rc.24 → 1.62.0

package/CHANGELOG.md

@@ -1,81 +1,3 @@
 # @akinon/pz-saved-card
 
-## 1.62.0-rc.24
-
-### Minor Changes
-
-- b92001cc: ZERO-2903: fix missing dependency in useEffect hook
-- 63597bc6: ZERO-2903: update saved card readme
-- 8fb37c4d: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
-- ce25dacb: ZERO-2903: optimize saved card
-
-## 1.61.0-rc.23
-
-## 1.61.0-rc.22
-
-### Minor Changes
-
-- b92001cc: ZERO-2903: fix missing dependency in useEffect hook
-- 63597bc6: ZERO-2903: update saved card readme
-- 8fb37c4d: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
-- ce25dacb: ZERO-2903: optimize saved card
-
-## 1.60.0-rc.21
-
-## 1.60.0-rc.20
-
-## 1.60.0-rc.19
-
-## 1.60.0-rc.18
-
-## 1.60.0-rc.17
-
-## 1.60.0-rc.16
-
-## 1.60.0-rc.15
-
-## 1.60.0-rc.14
-
-## 1.60.0-rc.13
-
-## 1.60.0-rc.12
-
-## 1.60.0-rc.11
-
-## 1.60.0-rc.10
-
-## 1.60.0-rc.9
-
-## 1.60.0-rc.8
-
-## 1.60.0-rc.7
-
-### Minor Changes
-
-- 63597bc: ZERO-2903: update saved card readme
-- ce25dac: ZERO-2903: optimize saved card
-
-## 1.60.0-rc.6
-
-### Minor Changes
-
-- b92001c: ZERO-2903: fix missing dependency in useEffect hook
-- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
-
-## 1.59.0-rc.5
-
-### Minor Changes
-
-- b92001c: ZERO-2903: fix missing dependency in useEffect hook
-- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
-
-## 1.59.0-rc.4
-
-### Minor Changes
-
-- b92001c: ZERO-2903: fix missing dependency in useEffect hook
-- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
-
-## 1.59.0-rc.3
-
-## 1.59.0-rc.2
+## 1.62.0

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@akinon/pz-saved-card",
-  "version": "1.62.0-rc.24",
+  "version": "1.62.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"
+    "typescript": "^4.7.4",
+    "react-hook-form": "7.31.3",
+    "@hookform/resolvers": "2.9.0"
   }
 }

package/readme.md

@@ -1,45 +1,36 @@
-# Saved Card Plugin
+# pz-saved-card
 
-## Installation
-
-There are two ways to install the Saved Card plugin:
-
-### 1. Install the npm package using Yarn
+### Example Usage
+##### File Path: src/views/checkout/steps/payment/options/saved-card.tsx
 
-For the latest version, you can install the package using Yarn:
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import CheckoutAgreements from '@theme/views/checkout/steps/payment/agreements';
+
+export default function SavedCard() {
+  return (
+    <PluginModule
+      component={Component.SavedCard}
+      props={{
+        agreementCheckbox: (
+          <CheckoutAgreements control={null} fieldId="agreement" error={null} />
+        )
+      }}
+    />
+  );
+}
 
-```bash
-yarn add @akinon/pz-saved-card
 ```
 
-### 2. Preferred installation method
+##### File Path: src/app/[commerce]/[locale]/[currency]/orders/saved-card-redirect/page.tsx
 
-You can also use the following command to install the extension with the latest plugins:
+```javascript
+import { SavedCardRedirect } from 'pz-saved-card/src/routes/saved-card-redirect';
 
-```bash
-npx @akinon/projectzero@latest --plugins
+export default SavedCardRedirect;
 ```
 
-## Usage
-
-##### File Path: src/views/checkout/steps/payment/options/saved-card.tsx
-
-```jsx
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-
-const SavedCard = () => {
-    return (
-        <PluginModule
-            component={Component.SavedCard}
-            props={{
-                texts: {
-                    title: 'Pay with Saved Card',
-                    button: 'Pay Now'
-                }
-            }}
-        />
-    );
-};
-
-export default SavedCard;
-```
+### Props
+| Properties           | Type   | Description                                |
+|----------------------|--------|--------------------------------------------|
+| texts                | object | The translations of the component.         |

package/src/{redux/api.ts → endpoints.ts}

@@ -2,7 +2,6 @@ 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;
@@ -14,55 +13,21 @@ interface CheckoutResponse {
   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;
-};
+type CompleteSavedCardRequest =
+  | { ucs_token: string; consumer_token: string; card_token: string }
+  | {
+      agreement: boolean;
+      card_number: string;
+      card_cvv: string;
+      card_month: string;
+      card_year: string;
+      register_consumer_card: 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 }) => ({
+    setSavedCard: build.mutation<CheckoutResponse, string>({
+      query: (ucsToken) => ({
         url: buildClientRequestUrl(
           `/orders/checkout?page=SavedCardSelectionPage`,
           {
@@ -71,20 +36,17 @@ export const savedCardApi = api.injectEndpoints({
         ),
         method: 'POST',
         body: {
-          card: card.token
+          card: ucsToken
         }
       }),
-      async onQueryStarted({ card }, { dispatch, queryFulfilled }) {
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }
     }),
-    setSavedCardInstallmentOption: build.mutation<
-      CheckoutResponse,
-      SetInstallmentRequest
-    >({
-      query: ({ installment }) => ({
+    setInstallment: build.mutation<CheckoutResponse, number>({
+      query: (pk) => ({
         url: buildClientRequestUrl(
           `/orders/checkout?page=SavedCardInstallmentSelectionPage`,
           {
@@ -93,7 +55,7 @@ export const savedCardApi = api.injectEndpoints({
         ),
         method: 'POST',
         body: {
-          installment
+          installment: pk
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
@@ -102,21 +64,19 @@ export const savedCardApi = api.injectEndpoints({
         dispatch(setPaymentStepBusy(false));
       }
     }),
-    completeSavedCard: build.mutation<
+    setCompleteSavedCard: build.mutation<
       CheckoutResponse,
       CompleteSavedCardRequest
     >({
-      query: ({ agreement }) => ({
+      query: (data) => ({
         url: buildClientRequestUrl(
-          `/orders/checkout?page=CompleteSavedCardRequest`,
+          `/orders/checkout?page=SavedCardConfirmationPage`,
           {
             useFormData: true
           }
         ),
         method: 'POST',
-        body: {
-          agreement
-        }
+        body: data
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -128,9 +88,7 @@ export const savedCardApi = api.injectEndpoints({
 });
 
 export const {
-  useGetSavedCardsQuery,
   useSetSavedCardMutation,
-  useSetSavedCardInstallmentOptionMutation,
-  useCompleteSavedCardMutation,
-  useDeleteSavedCardMutation
+  useSetInstallmentMutation,
+  useSetCompleteSavedCardMutation
 } = savedCardApi;

package/src/index.tsx

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

package/src/redux/middleware.ts

@@ -0,0 +1,25 @@
+import { Middleware } from '@reduxjs/toolkit';
+import { setUcs } from './reducer';
+
+const savedCardMiddleware: Middleware = ({ dispatch }) => {
+  return (next) => (action) => {
+    const result = next(action);
+
+    const ucsContext = result.payload?.context_list?.find(
+      (context) => context.page_context.ucs
+    );
+
+    if (ucsContext) {
+      const ucs = JSON.parse(JSON.stringify(ucsContext.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;
+  };
+};
+
+export default savedCardMiddleware;

package/src/redux/reducer.ts

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

package/src/routes/saved-card-redirect.tsx

@@ -0,0 +1,25 @@
+import { cookies } from 'next/headers';
+import settings from 'settings';
+import { redirect } from 'next/navigation';
+import { ROUTES } from 'routes';
+
+export const SavedCardRedirect = async () => {
+  const nextCookies = cookies();
+  const sessionId = nextCookies.get('osessionid')?.value;
+
+  if (!sessionId) {
+    return redirect(ROUTES.CHECKOUT);
+  }
+
+  const commerceUrl = settings.commerceUrl;
+
+  const response = await fetch(`${commerceUrl}/orders/saved-card-redirect`, {
+    headers: {
+      Cookie: nextCookies.toString()
+    }
+  });
+
+  const data = await response.text();
+
+  return <div dangerouslySetInnerHTML={{ __html: data }}></div>;
+};

package/src/types/index.ts

@@ -1,51 +1,17 @@
-import { ReactElement } from 'react';
+export {};
 
-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;
-  buttonText: string;
-};
+declare global {
+  interface Window {
+    iyziUcsInit: {
+      scriptType: string;
+      ucsToken: string;
+      createTag: () => void;
+    };
+    universalCardStorage: {
+      binNumber: number;
+      cardToken: string;
+      consumerToken: string;
+      registerConsumerCard: boolean;
+    };
+  }
+}

package/src/views/installments.tsx

@@ -0,0 +1,108 @@
+import { Price, Radio } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import { useSetInstallmentMutation } from '../endpoints';
+import { useEffect, useState } from 'react';
+
+const defaultTranslations = {
+  payments: 'Payments',
+  per_month: 'Per Month',
+  total: 'Total'
+};
+
+const SavedCardInstallments = ({ installmentOptions, translations, error }) => {
+  const { t } = useLocalization();
+  const [installmentOption, setInstallmentOption] = useState(null);
+  const [setInstallment] = useSetInstallmentMutation();
+
+  const errorMessage = (
+    <div className="px-6 mt-4 text-sm text-error">{error?.message}</div>
+  );
+
+  useEffect(() => {
+    if (
+      installmentOptions[0]?.pk &&
+      installmentOption !== installmentOptions[0]?.pk
+    ) {
+      setInstallment(installmentOptions[0].pk);
+      setInstallmentOption(installmentOptions[0].pk);
+    }
+  }, [installmentOptions, 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-t border-b border-solid border-gray-400">
+            <thead>
+              <tr>
+                <th
+                  scope="col"
+                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 text-start"
+                >
+                  {translations?.payments ?? defaultTranslations.payments}
+                </th>
+                <th
+                  scope="col"
+                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 text-right"
+                >
+                  {translations?.per_month ?? defaultTranslations.per_month}
+                </th>
+                <th
+                  scope="col"
+                  className="text-xs font-normal border-e border-solid border-gray-400 px-2 py-2 border-0 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={() => {
+                        setInstallmentOption(option.pk);
+                        setInstallment(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 && errorMessage}
+      </div>
+    </>
+  );
+};
+
+export default SavedCardInstallments;