@akinon/pz-masterpass 1.104.0-rc.83 → 1.104.0

package/CHANGELOG.md

@@ -1,20 +1,6 @@
 # @akinon/pz-masterpass
 
-## 1.104.0-rc.83
-
-### Minor Changes
-
-- 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
-- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
-- 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
-- 08c3caec: ZERO-3607 :Enhance the DeleteButton component with additional features and improve the OTP modal functionality by adding minutes and seconds
-- 33d4d0c: ZERO-3615: remove custom not found
-- e9af4e24: ZERO-3607 :Enhance the DeleteButton component with additional features and improve the OTP modal functionality by adding minutes and seconds
+## 1.104.0
 
 ## 1.103.0
 
@@ -55,8 +41,6 @@
 
 ## 1.91.0
 
-> > > > > > > origin/ZERO-3418
-
 ## 1.90.0
 
 ## 1.89.0

package/README.md

@@ -188,73 +188,77 @@ npx @akinon/projectzero@latest --plugins
         resendSms,
         resendSmsFetching,
         targetDate,
-        otpRef,
-        minutes,
-        seconds,
-        control,
-        formError
+        otpRef
       }) => {
         const [code, setCode] = useState('');
+        const [remainingSeconds, setRemainingSeconds] = useState(
+          Math.ceil((targetDate - Date.now()) / 1000)
+        );
+        useEffect(() => {
+          if (!targetDate) return;
+          const interval = setInterval(() => {
+            const secondsLeft = Math.ceil((targetDate - Date.now()) / 1000);
+            setRemainingSeconds(secondsLeft);
+            if (secondsLeft <= 0) {
+              clearInterval(interval);
+            }
+          }, 1000);
+          return () => clearInterval(interval);
+        }, [targetDate]);
         return (
           <Modal
-            portalId="otp-masterpass"
             open={open}
             setOpen={setOpen}
-            className="w-[330px] bottom-auto top-1/4 mx-auto px-0 pb-0 md:pb-0 md:rounded-none md:pt-0 md:px-0 md:bottom-auto"
-            iconSize={20}
+            className="w-full sm:w-[28rem]"
+            portalId="otp-masterpass"
           >
-            <div className="py-4 px-14 pt-12 pb-9 flex flex-col justify-center items-center">
-              <div className="text-lg leading-5 font-semibold text-secondary text-center pb-7">
-                Telefon doğrulama kodunu gir
-              </div>
+            <div className="px-6 py-4">
+              <h2 className="text-center text-xl text-primary-600 font-semibold">
+                Verification Required
+              </h2>
               <form
                 onSubmit={(e) => {
                   e.preventDefault();
                   onSubmit({ otp_code: code });
                 }}
+                className="flex flex-col items-center mt-4"
               >
-                <div className="mt-2 flex flex-col items-center justify-between">
-                  <div>
-                    <label className="text-xs leading-[14px] font-normal text-secondary">
-                      SMS kodu
-                    </label>
-                    <Input
-                      id="otp_code"
-                      autoComplete="off"
-                      minLength={6}
-                      maxLength={6}
-                      max="999999"
-                      min="000000"
-                      control={control}
-                      className="h-9 rounded-full border-gray-620 mt-2"
-                      onChange={(e) =>
-                        setCode((e.target as HTMLInputElement).value)
-                      }
-                    />
-                  </div>
-                  <Button className="w-full capitalize bg-secondary rounded-full text-base h-auto py-1.5 mt-2 border-none">
-                    Doğrula
-                  </Button>
-                  {formError && (
-                    <p className="mt-2 text-error text-xs text-center">
-                      {formError}
-                    </p>
-                  )}
-                </div>
+                <label
+                  htmlFor="otp_code"
+                  className="text-sm mb-1 text-gray-700"
+                >
+                  SMS Code
+                </label>
+                <input
+                  id="otp_code"
+                  maxLength={6}
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="••••••"
+                  className="border p-2 rounded w-full max-w-[200px] text-center tracking-widest"
+                />
+                <Button
+                  type="submit"
+                  className="mt-4 px-4 py-2 bg-blue-600 text-black rounded"
+                >
+                  Verify
+                </Button>
+                {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
               </form>
-              {minutes + seconds > 0 ? (
-                <div className="flex mt-2 flex justify-center">
-                  {`0${minutes}`} :{' '}
-                  {`${seconds < 10 ? '0' : ''}${seconds}`}
-                </div>
-              ) : (
+              <div className="mt-2 flex justify-center text-sm text-gray-600">
+                {remainingSeconds > 0
+                  ? `Time remaining: ${remainingSeconds} seconds`
+                  : 'Time is up'}
+              </div>
+              <div className="mt-2 flex justify-center">
                 <Button
-                  onClick={() => resendSms()}
-                  className="w-full capitalize bg-secondary rounded-full text-base h-auto py-1.5 mt-2 border-none text-white"
+                  onClick={resendSms}
+                  disabled={loading}
+                  className="mt-4 text-sm underline text-secondary-500"
                 >
-                  {!resendSmsFetching ? 'resend code' : <LoaderSpinner />}
+                  {resendSmsFetching ? 'Code sent' : 'Resend SMS code'}
                 </Button>
-              )}
+              </div>
             </div>
           </Modal>
         );
@@ -433,11 +437,7 @@ npx @akinon/projectzero@latest --plugins
                 <p className="text-xs text-gray-500">{card.Value1}</p>
               </div>
             </div>
-            <DeleteButton
-              cardAliasName={card.Name}
-              content={<Icon name="close" size={12} />}
-              className="mb-8"
-            />
+            <DeleteButton cardAliasName={card.Name} />
           </div>
         </li>
       ),

package/package.json

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

package/src/hooks/use-delete-card.tsx

@@ -3,20 +3,14 @@
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { Icon } from 'components';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 import {
   setDeletionCardAliasName,
   setDeletionModalVisible
 } from '../redux/reducer';
+import { CheckMasterpassResponse } from '../types';
 import { formCreator } from '../utils';
 import { useCards } from './use-cards';
 
-export type DeleteButtonProps = {
-  cardAliasName: string;
-  content?: JSX.Element;
-  className?: string;
-};
-
 export const useDeleteCard = () => {
   const { msisdn, token, language, deletion } = useAppSelector(
     (state: any) => state.masterpass
@@ -73,27 +67,22 @@ export const useDeleteCard = () => {
 
   const DeleteButton = useMemo(
     () =>
-      ({ cardAliasName, content, className }: DeleteButtonProps) => {
+      ({ cardAliasName }: { cardAliasName: string }) => {
         return (
           <span
-            className={twMerge('cursor-pointer p-1', className)}
+            className="cursor-pointer p-1"
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               event.stopPropagation();
               dispatch(setDeletionModalVisible(true));
               dispatch(setDeletionCardAliasName(cardAliasName));
             }}
           >
-            {content ?? <Icon name="close" size={12} />}
+            <Icon name="close" size={12} />
           </span>
         );
       },
     []
   );
 
-  return {
-    DeleteButton,
-    deleteCard,
-    isLoading,
-    error
-  };
+  return { DeleteButton, deleteCard, isLoading, error };
 };

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

@@ -54,12 +54,7 @@ interface RendererProps {
     card: any;
     selectedCard: any;
     onSelect: (card: any) => Promise<void>;
-    DeleteButton?: React.FC<{
-      cardAliasName: string;
-      onDelete: () => void;
-      className?: string;
-      content?: JSX.Element;
-    }>;
+    DeleteButton?: React.FC<{ cardAliasName: string; onDelete: () => void }>;
   }) => JSX.Element;
   Loader?: () => JSX.Element;
   ErrorFallback?: (params: {
@@ -251,14 +246,12 @@ export const MasterpassCardList = ({
                   className="mr-2"
                   onChange={(e) => e.preventDefault()}
                 />
-
                 <label
                   htmlFor={card.UniqueId}
                   className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between"
                 >
                   <p className="w-full lg:w-1/3">{card.Name}</p>
                   <p className="w-full text-[10px] lg:w-1/3">{card.Value1}</p>
-
                   <Image
                     className="w-8 h-6 object-contain flex items-center justify-center mr-4"
                     width={50}
@@ -267,7 +260,6 @@ export const MasterpassCardList = ({
                     alt={card.Name}
                   />
                 </label>
-
                 <DeleteButton cardAliasName={card.Name} />
               </div>
               {cvcField}

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

@@ -12,7 +12,6 @@ import { OtpForm, OtpFormProps, defaultTranslations } from './otp-form';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setOtpModalVisible, setOtpResponse } from '../../redux/reducer';
 import { Image } from '@akinon/next/components/image';
-import { useCountdown } from '../../hooks/use-countdown';
 
 export interface MasterpassOtpModalProps {
   translations?: {
@@ -29,8 +28,6 @@ export interface MasterpassOtpModalProps {
       resendSmsFetching: boolean;
       targetDate: number;
       otpRef: string | null;
-      minutes?: number;
-      seconds?: number;
     }) => JSX.Element;
   };
 }
@@ -129,8 +126,6 @@ export const MasterpassOtpModal = ({
   }, [isModalOpen]);
 
   if (renderer.Content) {
-    const [minutes, seconds] = useCountdown(new Date(otpTime));
-
     return (
       <renderer.Content
         open={isModalOpen}
@@ -142,8 +137,6 @@ export const MasterpassOtpModal = ({
         resendSmsFetching={isBusy}
         targetDate={otpTime}
         otpRef={otpRef}
-        minutes={minutes}
-        seconds={seconds}
       />
     );
   }