@akinon/pz-saved-card 1.66.0 → 1.68.0

package/CHANGELOG.md

@@ -1,11 +1,10 @@
 # @akinon/pz-saved-card
 
-## 1.66.0
+## 1.68.0
 
-## 1.65.0
+### Minor Changes
 
-## 1.64.0
-
-## 1.63.0
-
-## 1.62.0
+- b92001c: ZERO-2903: fix missing dependency in useEffect hook
+- 63597bc: ZERO-2903: update saved card readme
+- 8fb37c4: ZERO-2903: enchance SavedCardOption component with custom wrapper props and classnames
+- ce25dac: ZERO-2903: optimize saved card

package/package.json

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

package/readme.md

@@ -1,36 +1,45 @@
-# pz-saved-card
+# Saved Card Plugin
 
-### Example Usage
-##### File Path: src/views/checkout/steps/payment/options/saved-card.tsx
+## Installation
 
-```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} />
-        )
-      }}
-    />
-  );
-}
+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
 ```
 
-##### File Path: src/app/[commerce]/[locale]/[currency]/orders/saved-card-redirect/page.tsx
+### 2. Preferred installation method
 
-```javascript
-import { SavedCardRedirect } from 'pz-saved-card/src/routes/saved-card-redirect';
+You can also use the following command to install the extension with the latest plugins:
 
-export default SavedCardRedirect;
+```bash
+npx @akinon/projectzero@latest --plugins
 ```
 
-### Props
-| Properties           | Type   | Description                                |
-|----------------------|--------|--------------------------------------------|
-| texts                | object | The translations of the component.         |
+## 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;
+```

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

@@ -0,0 +1,25 @@
+import React, { cloneElement } from 'react';
+import { Button, Icon } from '@akinon/next/components';
+
+export const AgreementAndSubmit = ({
+  agreementCheckbox,
+  control,
+  errors,
+  buttonText
+}) => (
+  <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
+    {agreementCheckbox &&
+      cloneElement(agreementCheckbox, {
+        control,
+        error: errors.agreement,
+        fieldId: 'agreement'
+      })}
+    <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>
+);

package/src/components/card-label.tsx

@@ -0,0 +1,17 @@
+import { getCreditCardType } from '../utils';
+import React from 'react';
+import { cardImages } from '../views/saved-card-option';
+import { Image } from '@akinon/next/components';
+
+export 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>
+);

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

@@ -0,0 +1,51 @@
+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';
+
+export 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={(e) => {
+            e.preventDefault();
+            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={(e) => {
+              e.stopPropagation();
+              dispatch(setDeletionModalId(card.id));
+              dispatch(setDeletionModalVisible(true));
+            }}
+          />
+        </li>
+      ))}
+    </ul>
+    {errors.card && <ErrorText message={errors.card?.message} />}
+  </div>
+);

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/delete-icon.tsx

@@ -0,0 +1,8 @@
+import { Icon } from '@akinon/next/components';
+import React from 'react';
+
+export const DeleteIcon = ({ onClick }) => (
+  <span className="cursor-pointer p-1" onClick={onClick}>
+    <Icon name="close" size={12} />
+  </span>
+);

package/src/components/error-text.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const ErrorText = ({ message }) => (
+  <div className="w-full text-xs text-start px-1 mt-3 text-error">
+    {message}
+  </div>
+);

package/src/components/installment-section.tsx

@@ -0,0 +1,22 @@
+import SavedCardInstallments from './installments';
+import React from 'react';
+
+export 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>
+);

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, selectedCard]);
+
+  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

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

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

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

package/src/redux/reducer.ts

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