@akinon/pz-masterpass-rest 1.118.0-rc.8 → 2.0.0-beta.12

package/CHANGELOG.md

@@ -0,0 +1,32 @@
+# @akinon/pz-masterpass-rest
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+### Minor Changes
+
+- cacc627: ZERO-3847: mp rest performance enhancements
+- 10dcaae: ZERO-3847: move PaymentMethodSelectorProps to custom-render.types
+- 78f1026: ZERO-3847: add sdkUrl and environment props for SDK URL configuration
+- 2862d29: ZERO-3847: make CVV input optional in saved card list
+- 3a25ab0: ZERO-3847: add fullrender support
+- 36c7a51: ZERO-3847: merge main
+- 4412917: ZERO-3487: masterpass rest ux guideline adjustments
+- 4fa9202: ZERO-3847: add mp logo to card deletion modal
+- 08f1f39: ZERO-3847: add resendOtp type and consolidate component props
+
+## 1.112.0
+
+## 1.111.0
+
+### Minor Changes
+
+- c026300: ZERO-3833: fix masterpass rest conflicts
+- 02a1caf: ZERO-3833: use installment count number insteadof pk

package/README.md

@@ -10,16 +10,6 @@ Install the plugin using the Project Zero CLI:
 npx @akinon/projectzero@latest --plugins
 ```
 
-## SDK Setup
-
-After installing the package, you need to copy the Masterpass JavaScript SDK to your project's public folder:
-
-```bash
-cp node_modules/@akinon/pz-masterpass-rest/assets/masterpass-javascript-sdk-web.min.js public/
-```
-
-The SDK file must be accessible at `/masterpass-javascript-sdk-web.min.js` in your application.
-
 ## Basic Usage
 
 Here's a simple example of how to use the Masterpass REST component:

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "1.118.0-rc.8",
+  "version": "2.0.0-beta.12",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",
-  "files": [
-    "src",
-    "assets",
-    "README.md"
-  ],
   "keywords": [
     "masterpass",
     "payment",

package/src/components/card-list.tsx

@@ -35,8 +35,8 @@ const CardList: React.FC<CardListProps> = ({
             key={card.uniqueCardNumber}
             className={`border transition-all cursor-pointer ${
               isSelected
-                ? 'border-[#000000] bg-[#000000]/5'
-                : 'border-[#eeeeee] hover:border-[#ebebeb]'
+                ? 'border-primary bg-primary/5'
+                : 'border-gray-200 hover:border-gray-300'
             }`}
             onClick={() => onCardSelect(card)}
           >
@@ -48,13 +48,13 @@ const CardList: React.FC<CardListProps> = ({
                     w-4 h-4 border-2 rounded-full flex items-center justify-center
                     ${
                       isSelected
-                        ? 'border-[#000000] bg-primary'
-                        : 'border-[#ebebeb]'
+                        ? 'border-primary bg-primary'
+                        : 'border-gray-300'
                     }
                   `}
                 >
                   {isSelected && (
-                    <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
                   )}
                 </div>
 
@@ -64,21 +64,21 @@ const CardList: React.FC<CardListProps> = ({
                   className="w-8 h-6 object-contain"
                 />
                 <div>
-                  <div className="font-medium text-[#4a4f54]">
+                  <div className="font-medium text-gray-900">
                     {card.maskedCardNumber}
                   </div>
-                  <div className="text-sm text-[#c9c9c9]">{card.cardAlias}</div>
+                  <div className="text-sm text-gray-500">{card.cardAlias}</div>
                   <div className="flex items-center space-x-2 mt-1">
                     <span className="text-xs px-2 py-1 bg-gray-100">
                       {card.cardType}
                     </span>
                     {card.isDefaultCard && (
-                      <span className="text-xs px-2 py-1 bg-[#000000]/10 text-[#000000]">
+                      <span className="text-xs px-2 py-1 bg-primary/10 text-primary">
                         {texts.defaultCardText}
                       </span>
                     )}
                     {card.expireSoon && (
-                      <span className="text-xs px-2 py-1 bg-[#d08800]/10 text-[#d08800]">
+                      <span className="text-xs px-2 py-1 bg-warning/10 text-warning">
                         {texts.expiresSoonText}
                       </span>
                     )}
@@ -88,7 +88,7 @@ const CardList: React.FC<CardListProps> = ({
 
               {onRemove && (
                 <button
-                  className="p-2 text-[#d7d7d7] hover:text-[#ff6367] transition-colors disabled:opacity-50 bg-[#f5f5f5] rounded-full"
+                  className="p-2 text-gray-400 hover:text-red-500 transition-colors disabled:opacity-50 bg-gray-100 rounded-full"
                   disabled={removingCardId === card.uniqueCardNumber}
                   onClick={(e) => {
                     e.stopPropagation();
@@ -96,7 +96,7 @@ const CardList: React.FC<CardListProps> = ({
                   }}
                 >
                   {removingCardId === card.uniqueCardNumber ? (
-                    <div className="animate-spin h-5 w-5 border-b-2 border-[#ff6367]"></div>
+                    <div className="animate-spin h-5 w-5 border-b-2 border-red-500"></div>
                   ) : (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -108,7 +108,7 @@ const CardList: React.FC<CardListProps> = ({
                       strokeWidth="2"
                       strokeLinecap="round"
                       strokeLinejoin="round"
-                      className="text-[#9d9d9d]"
+                      className="text-gray-600"
                     >
                       <path d="M3 6h18" />
                       <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
@@ -121,17 +121,17 @@ const CardList: React.FC<CardListProps> = ({
 
             {isSelected && cvcRequired && (
               <div
-                className="border-t border-[#eeeeee] p-4 bg-[#f7f7f7]"
+                className="border-t border-gray-200 p-4 bg-gray-50"
                 onClick={(e) => e.stopPropagation()}
               >
                 <div className="flex items-center gap-4">
                   <div className="flex-1">
                     <label
                       htmlFor={`cvc-${card.uniqueCardNumber}`}
-                      className="block text-sm font-medium text-[#686868] mb-2"
+                      className="block text-sm font-medium text-gray-700 mb-2"
                     >
                       {texts.cvcCardLabel}
-                      <span className="text-[#ff6367]"> *</span>
+                      <span className="text-red-500"> *</span>
                     </label>
                     <Input
                       id={`cvc-${card.uniqueCardNumber}`}
@@ -148,7 +148,7 @@ const CardList: React.FC<CardListProps> = ({
                       maxLength={expectedCvcLength}
                       className="w-32"
                     />
-                    <p className="text-xs text-[#c9c9c9] mt-1">
+                    <p className="text-xs text-gray-500 mt-1">
                       {texts.cvcCardHelpText
                         ?.replace('{length}', expectedCvcLength.toString())
                         .replace(
@@ -159,11 +159,11 @@ const CardList: React.FC<CardListProps> = ({
                         )}
                     </p>
                   </div>
-                  <div className="flex items-center text-sm text-[#9d9d9d]">
+                  <div className="flex items-center text-sm text-gray-600">
                     <Icon
                       name="shield-check"
                       size={16}
-                      className="mr-1 text-[#00a63d]"
+                      className="mr-1 text-green-600"
                     />
                     <span>{texts.secureCardText}</span>
                   </div>

package/src/components/confirmation-modal.tsx

@@ -27,7 +27,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
         <div className="flex gap-3 justify-center">
           <Button
             appearance="outlined"
-            className="px-6 py-3 h-auto hover:bg-[#f7f7f7] transition-colors"
+            className="px-6 py-3 h-auto hover:bg-gray-50 transition-colors"
             onClick={onClose}
             disabled={isLoading}
           >

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

@@ -146,17 +146,17 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
   const expectedCVVLength = getCvcLength(cardType);
 
   return (
-    <div className="bg-[#ffffff] border border-[#eeeeee] shadow-sm">
-      <div className="flex justify-start items-center border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
+    <div className="bg-white border border-gray-200 shadow-sm">
+      <div className="flex justify-start items-center border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
         <div className="flex items-center gap-2">
-          <Icon name="credit-card" size={20} className="text-[#9d9d9d]" />
-          <span className="text-[#181818] text-lg font-medium sm:text-xl">
+          <Icon name="credit-card" size={20} className="text-gray-600" />
+          <span className="text-black-800 text-lg font-medium sm:text-xl">
             {texts.creditCardInfoTitle}
           </span>
           {isBinChecking && (
             <div className="flex items-center gap-2 ml-auto">
               <LoaderSpinner className="w-4 h-4" />
-              <span className="text-sm text-[#2d2d2d]">
+              <span className="text-sm text-gray-500">
                 {texts.checkingCardText}
               </span>
             </div>
@@ -169,7 +169,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           <div className="space-y-2">
             <label
               htmlFor="cardNumber"
-              className="block text-sm font-medium text-[#686868]"
+              className="block text-sm font-medium text-gray-700"
             >
               {texts.cardNumberLabel}
             </label>
@@ -194,7 +194,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                     errors.cardNumber && '-translate-y-full'
                   )}
                 >
-                  <span className="flex text-sm font-medium text-[#9d9d9d] bg-[#f5f5f5] px-2 py-1">
+                  <span className="flex text-sm font-medium text-gray-600 bg-gray-100 px-2 py-1">
                     <img
                       src={
                         getCardIcon(watchedCardNumber.replace(/\D/g, '')).src
@@ -211,7 +211,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           <div className="space-y-2">
             <label
               htmlFor="cardholderName"
-              className="block text-sm font-medium text-[#686868]"
+              className="block text-sm font-medium text-gray-700"
             >
               {texts.cardholderNameLabel}
             </label>
@@ -228,7 +228,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="expiryDate"
-                className="block text-sm font-medium text-[#686868]"
+                className="block text-sm font-medium text-gray-700"
               >
                 {texts.expiryDateLabel}
               </label>
@@ -248,7 +248,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="cvv"
-                className="block text-sm font-medium text-[#686868]"
+                className="block text-sm font-medium text-gray-700"
               >
                 {texts.cvcLabel}
               </label>
@@ -278,18 +278,18 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                   {...register('saveCard')}
                   id="saveCard"
                   type="checkbox"
-                  className="h-4 w-4 mt-0.5 text-[#000000] focus:ring-primary border-[#ebebeb]"
+                  className="h-4 w-4 mt-0.5 text-primary focus:ring-primary border-gray-300"
                 />
                 <label
                   htmlFor="saveCard"
-                  className="text-sm font-medium text-[#686868] cursor-pointer"
+                  className="text-sm font-medium text-gray-700 cursor-pointer"
                 >
                   {texts.saveCardTermsPrefix}{' '}
                   <a
                     href="https://www.masterpassturkiye.com/terms-and-conditions"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#000000] underline hover:text-[#181818]"
+                    className="text-primary underline hover:text-primary-dark"
                   >
                     {texts.saveCardTermsLink}
                   </a>
@@ -301,7 +301,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                   <div className="space-y-2 pt-2">
                     <label
                       htmlFor="cardAlias"
-                      className="block text-sm font-medium text-[#686868]"
+                      className="block text-sm font-medium text-gray-700"
                     >
                       {texts.cardAliasLabel}
                     </label>
@@ -320,7 +320,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           )}
 
           {watchedSaveCard && (
-            <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-[#eeeeee]">
+            <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200">
               <Button
                 type="submit"
                 className="flex-1 group inline-flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"

package/src/components/installment-list.tsx

@@ -13,11 +13,11 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
   texts
 }) => {
   return (
-    <div className="bg-white border border-[#eeeeee] shadow-sm">
-      <div className="border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
+    <div className="bg-white border border-gray-200 shadow-sm">
+      <div className="border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
         <div className="flex items-center gap-2">
           <Icon name="credit-card" size={20} className="text-gray-600" />
-          <span className="text-[#181818] text-lg font-medium sm:text-xl">
+          <span className="text-black-800 text-lg font-medium sm:text-xl">
             {texts.installmentOptionsText}
           </span>
         </div>
@@ -26,10 +26,10 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
       <div className="p-4 sm:p-6">
         {/* Card Type Display */}
         {cardType && (
-          <div className="mb-4 p-3 bg-[#f7f7f7] border border-[#eeeeee]">
+          <div className="mb-4 p-3 bg-gray-50 border border-gray-200">
             <div className="flex items-center gap-2">
               <Icon name="credit-card" size={16} className="text-gray-600" />
-              <span className="text-sm font-medium text-[#686868]">
+              <span className="text-sm font-medium text-gray-700">
                 {texts.cardTypeLabel}
               </span>
               <img
@@ -55,8 +55,8 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                   relative flex items-center justify-between p-3 border transition-all cursor-pointer
                   ${
                     isSelected
-                      ? 'border-[#000000] bg-[#000000]/5'
-                      : 'border-[#eeeeee] hover:border-[#ebebeb]'
+                      ? 'border-primary bg-primary/5'
+                      : 'border-gray-200 hover:border-gray-300'
                   }
                 `}
               >
@@ -66,13 +66,13 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                     w-4 h-4 border-2 rounded-full flex items-center justify-center
                     ${
                       isSelected
-                        ? 'border-[#000000] bg-[#000000]'
-                        : 'border-[#ebebeb]'
+                        ? 'border-primary bg-primary'
+                        : 'border-gray-300'
                     }
                   `}
                 >
                   {isSelected && (
-                    <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
                   )}
                 </div>
 
@@ -80,7 +80,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                 <div className="flex-1 ml-3">
                   <div className="flex items-center justify-between">
                     <div>
-                      <span className="font-medium text-[#4a4f54]">
+                      <span className="font-medium text-gray-900">
                         {installment.installment_count === 1
                           ? texts.singlePaymentText
                           : texts.installmentsText?.replace(
@@ -89,17 +89,17 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                             )}
                       </span>
                       {isNoInterest && (
-                        <span className="text-xs bg-[#84978a] text-[#004e21] px-2 py-1 ml-2">
+                        <span className="text-xs bg-green-100 text-green-700 px-2 py-1 ml-2">
                           {texts.noInterestText}
                         </span>
                       )}
                     </div>
                     <div className="text-right">
-                      <div className="font-semibold text-[#4a4f54]">
+                      <div className="font-semibold text-gray-900">
                         {installment.price_with_accrued_interest}
                       </div>
                       {installment.installment_count > 1 && (
-                        <div className="text-sm text-[#f7f7f7]">
+                        <div className="text-sm text-gray-500">
                           {installment.monthly_price_with_accrued_interest}
                           {texts.perMonthText}
                         </div>
@@ -114,7 +114,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
 
         {/* Payment Button */}
         {selectedInstallment && onProceedToPayment && (
-          <div className="pt-4 border-t border-[#eeeeee]">
+          <div className="pt-4 border-t border-gray-200">
             <Button
               onClick={onProceedToPayment}
               disabled={isLoading || paymentLoading}
@@ -122,7 +122,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
             >
               {paymentLoading ? (
                 <div className="flex items-center justify-center">
-                  <div className="animate-spin h-4 w-4 border-b-2 border-[#ffffff]"></div>
+                  <div className="animate-spin h-4 w-4 border-b-2 border-white"></div>
                   <span className="ml-2">{texts.processingPaymentText}</span>
                 </div>
               ) : (

package/src/components/masterpass-security-info.tsx

@@ -11,14 +11,18 @@ const MasterpassSecurityInfo: React.FC<MasterpassSecurityInfoProps> = ({
 }) => {
   return (
     <div className="flex flex-col items-center gap-2">
-      <img src={mpBlackLogo.src} alt="Masterpass" className="h-6" />
-      <p className="text-xs text-center text-[#9d9d9d]">
+      <img
+        src={mpBlackLogo.src}
+        alt="Masterpass"
+        className="h-6"
+      />
+      <p className="text-xs text-center text-gray-600">
         {texts.masterpassSecurityPrefix}{' '}
         <a
           href="https://www.mastercard.com.tr/tr-tr/tuketiciler/odeme-secenekleri/masterpass.html"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-[#000000] underline hover:text-[#181818] font-medium"
+          className="text-primary underline hover:text-primary-dark font-medium"
         >
           {texts.masterpassSecurityLink}
         </a>

package/src/components/otp-modal.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Button, Input } from '@akinon/next/components';
 import { LoaderSpinner } from '@akinon/next/components';
-import { useAppSelector } from '@akinon/next/redux/hooks';
 import type { OTPModalProps } from '../types/custom-render.types';
 import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
 import { handleResendOtp } from '../utils/response-handler';
@@ -12,11 +11,9 @@ const OTPModal: React.FC<OTPModalProps> = ({
   onClose,
   onSubmit,
   type,
-  responseCode,
   description,
   texts
 }) => {
-  const { token, tokenData } = useAppSelector((state) => state.masterpassRest);
   const [otp, setOtp] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -24,13 +21,6 @@ const OTPModal: React.FC<OTPModalProps> = ({
   const [canResend, setCanResend] = useState(false);
   const [remainingTime, setRemainingTime] = useState(90);
 
-  useEffect(() => {
-    if (!open) {
-      setError(null);
-      setOtp('');
-    }
-  }, [open]);
-
   useEffect(() => {
     if (open && type === 'OTP') {
       setRemainingTime(90);
@@ -48,16 +38,14 @@ const OTPModal: React.FC<OTPModalProps> = ({
 
       return () => clearInterval(timer);
     }
-  }, [open, type, responseCode]);
+  }, [open, type]);
 
   const handleSubmit = async () => {
     setError(null);
     setIsLoading(true);
     try {
       const result = await onSubmit(otp);
-      if (result?.requiresOTP) {
-        setOtp('');
-      } else if (result?.message) {
+      if (result?.message) {
         setError(result.message);
       }
     } catch (error) {
@@ -71,7 +59,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
     setError(null);
     setIsResending(true);
     try {
-      const result = await handleResendOtp(token, tokenData?.MerchantId);
+      const result = await handleResendOtp();
       if (result.success) {
         setRemainingTime(90);
         setCanResend(false);
@@ -102,47 +90,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
     return `${minutes}:${secs.toString().padStart(2, '0')}`;
   };
 
-  const getContentByResponseCode = () => {
-    switch (responseCode) {
-      case '5000':
-        return {
-          title: texts.rtaVerificationTitle,
-          description: texts.rtaVerificationDescription,
-          placeholder: texts.rtaVerificationPlaceholder,
-          helperText: null
-        };
-      case '5001':
-        return {
-          title: texts.bankOtpVerificationTitle,
-          description: texts.bankOtpVerificationDescription,
-          placeholder: texts.bankOtpVerificationPlaceholder,
-          helperText: null
-        };
-      case '5008':
-        return {
-          title: texts.phoneVerificationTitle,
-          description: texts.phoneVerificationDescription,
-          placeholder: texts.phoneVerificationPlaceholder,
-          helperText: null
-        };
-      case '5013':
-        return {
-          title: texts.cvvVerificationTitle,
-          description: texts.cvvVerificationDescription,
-          placeholder: texts.cvvVerificationPlaceholder,
-          helperText: texts.cvvVerificationHelperText
-        };
-      default:
-        return null;
-    }
-  };
-
   const getDescription = () => {
-    const responseCodeContent = getContentByResponseCode();
-    if (responseCodeContent) {
-      return responseCodeContent.description;
-    }
-
     if (description) {
       return description;
     }
@@ -156,40 +104,15 @@ const OTPModal: React.FC<OTPModalProps> = ({
     }
   };
 
-  const getTitle = () => {
-    const responseCodeContent = getContentByResponseCode();
-    if (responseCodeContent) {
-      return responseCodeContent.title;
-    }
-
+  const getMaxLength = () => {
     switch (type) {
       case 'RTA':
-        return texts.rtaVerificationTitle;
+        return 3;
       case 'CVV':
-        return texts.cvvVerificationTitle;
+        return 3;
       default:
-        return null;
-    }
-  };
-
-  const getPlaceholder = () => {
-    const responseCodeContent = getContentByResponseCode();
-    if (responseCodeContent) {
-      return responseCodeContent.placeholder;
+        return 6;
     }
-    return '';
-  };
-
-  const getHelperText = () => {
-    const responseCodeContent = getContentByResponseCode();
-    return responseCodeContent?.helperText || null;
-  };
-
-  const getMaxLength = () => {
-    if (responseCode === '5013' || type === 'CVV') {
-      return 4;
-    }
-    return 6;
   };
 
   return (
@@ -203,14 +126,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
       className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
     >
       <div className="px-6">
-        {getTitle() && (
-          <h3 className="text-center mt-4 text-lg font-semibold">
-            {getTitle()}
-          </h3>
-        )}
-        <p className="text-center mt-2 text-sm text-gray-600">
-          {getDescription()}
-        </p>
+        <p className="text-center mt-4 text-lg">{getDescription()}</p>
         <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
           <Input
             type="text"
@@ -225,18 +141,12 @@ const OTPModal: React.FC<OTPModalProps> = ({
             pattern="[0-9]*"
             inputMode="numeric"
             className="text-center"
-            placeholder={getPlaceholder()}
           />
-          {getHelperText() && (
-            <p className="text-xs text-gray-500 text-center">
-              {getHelperText()}
-            </p>
-          )}
           {error && <p className="text-error text-xs text-center">{error}</p>}
           <Button
             className="py-3 h-auto"
             onClick={handleSubmit}
-            disabled={isLoading || otp.length === 0}
+            disabled={isLoading || otp.length !== getMaxLength()}
           >
             {isLoading ? (
               <LoaderSpinner className="w-4 h-4" />