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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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.103.0
 
 ### Minor Changes
@@ -39,6 +55,8 @@
 
 ## 1.91.0
 
+> > > > > > > origin/ZERO-3418
+
 ## 1.90.0
 
 ## 1.89.0

package/README.md

@@ -188,77 +188,73 @@ npx @akinon/projectzero@latest --plugins
         resendSms,
         resendSmsFetching,
         targetDate,
-        otpRef
+        otpRef,
+        minutes,
+        seconds,
+        control,
+        formError
       }) => {
         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-full sm:w-[28rem]"
-            portalId="otp-masterpass"
+            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}
           >
-            <div className="px-6 py-4">
-              <h2 className="text-center text-xl text-primary-600 font-semibold">
-                Verification Required
-              </h2>
+            <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>
               <form
                 onSubmit={(e) => {
                   e.preventDefault();
                   onSubmit({ otp_code: code });
                 }}
-                className="flex flex-col items-center mt-4"
               >
-                <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>}
+                <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>
               </form>
-              <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">
+              {minutes + seconds > 0 ? (
+                <div className="flex mt-2 flex justify-center">
+                  {`0${minutes}`} :{' '}
+                  {`${seconds < 10 ? '0' : ''}${seconds}`}
+                </div>
+              ) : (
                 <Button
-                  onClick={resendSms}
-                  disabled={loading}
-                  className="mt-4 text-sm underline text-secondary-500"
+                  onClick={() => resendSms()}
+                  className="w-full capitalize bg-secondary rounded-full text-base h-auto py-1.5 mt-2 border-none text-white"
                 >
-                  {resendSmsFetching ? 'Code sent' : 'Resend SMS code'}
+                  {!resendSmsFetching ? 'resend code' : <LoaderSpinner />}
                 </Button>
-              </div>
+              )}
             </div>
           </Modal>
         );
@@ -437,7 +433,11 @@ npx @akinon/projectzero@latest --plugins
                 <p className="text-xs text-gray-500">{card.Value1}</p>
               </div>
             </div>
-            <DeleteButton cardAliasName={card.Name} />
+            <DeleteButton
+              cardAliasName={card.Name}
+              content={<Icon name="close" size={12} />}
+              className="mb-8"
+            />
           </div>
         </li>
       ),

package/package.json

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

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

@@ -3,14 +3,20 @@
 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
@@ -67,22 +73,27 @@ export const useDeleteCard = () => {
 
   const DeleteButton = useMemo(
     () =>
-      ({ cardAliasName }: { cardAliasName: string }) => {
+      ({ cardAliasName, content, className }: DeleteButtonProps) => {
         return (
           <span
-            className="cursor-pointer p-1"
+            className={twMerge('cursor-pointer p-1', className)}
             onClick={(event: React.MouseEvent<HTMLElement>) => {
               event.stopPropagation();
               dispatch(setDeletionModalVisible(true));
               dispatch(setDeletionCardAliasName(cardAliasName));
             }}
           >
-            <Icon name="close" size={12} />
+            {content ?? <Icon name="close" size={12} />}
           </span>
         );
       },
     []
   );
 
-  return { DeleteButton, deleteCard, isLoading, error };
+  return {
+    DeleteButton,
+    deleteCard,
+    isLoading,
+    error
+  };
 };

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

@@ -54,7 +54,12 @@ interface RendererProps {
     card: any;
     selectedCard: any;
     onSelect: (card: any) => Promise<void>;
-    DeleteButton?: React.FC<{ cardAliasName: string; onDelete: () => void }>;
+    DeleteButton?: React.FC<{
+      cardAliasName: string;
+      onDelete: () => void;
+      className?: string;
+      content?: JSX.Element;
+    }>;
   }) => JSX.Element;
   Loader?: () => JSX.Element;
   ErrorFallback?: (params: {
@@ -246,12 +251,14 @@ 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}
@@ -260,6 +267,7 @@ export const MasterpassCardList = ({
                     alt={card.Name}
                   />
                 </label>
+
                 <DeleteButton cardAliasName={card.Name} />
               </div>
               {cvcField}

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

@@ -12,6 +12,7 @@ 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?: {
@@ -28,6 +29,8 @@ export interface MasterpassOtpModalProps {
       resendSmsFetching: boolean;
       targetDate: number;
       otpRef: string | null;
+      minutes?: number;
+      seconds?: number;
     }) => JSX.Element;
   };
 }
@@ -126,6 +129,8 @@ export const MasterpassOtpModal = ({
   }, [isModalOpen]);
 
   if (renderer.Content) {
+    const [minutes, seconds] = useCountdown(new Date(otpTime));
+
     return (
       <renderer.Content
         open={isModalOpen}
@@ -137,6 +142,8 @@ export const MasterpassOtpModal = ({
         resendSmsFetching={isBusy}
         targetDate={otpTime}
         otpRef={otpRef}
+        minutes={minutes}
+        seconds={seconds}
       />
     );
   }