paymob-pixel-alpha 1.1.77 → 1.1.79

package/assets/icons/card.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react"
+export const CardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d="M7.781 14.813c.457 0 .844.386.844.843a.833.833 0 0 1-.844.844H6.094c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844H7.78Zm6.75 0c.457 0 .844.386.844.843a.833.833 0 0 1-.844.844h-3.937c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844h3.937Zm5.344-10.688c1.23 0 2.25 1.02 2.25 2.25v11.25c0 1.266-1.02 2.25-2.25 2.25H4.125a2.221 2.221 0 0 1-2.25-2.25V6.375c0-1.23.984-2.25 2.25-2.25h15.75Zm0 1.688H4.125a.578.578 0 0 0-.563.562V7.5h16.875V6.375c0-.281-.28-.563-.562-.563Zm.563 5.062H3.563v6.75c0 .316.246.563.562.563h15.75a.578.578 0 0 0 .563-.563v-6.75Z"
+    />
+  </svg>
+)

package/assets/icons/installments.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+export const InstallmentsIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d="M21.117 7.522c.387.211.633.598.633 1.02 0 .668-.563 1.195-1.23 1.195H4.945A1.185 1.185 0 0 1 3.75 8.542c0-.422.21-.809.598-1.02l7.98-4.43c.246-.105.563-.105.809 0l7.98 4.43Zm-9.492-.035c0-.597.492-1.125 1.125-1.125.598 0 1.125.528 1.125 1.125 0 .211-.07.422-.176.563h4.922L12.75 4.815 6.844 8.05h4.922c-.106-.14-.141-.352-.141-.563ZM6 10.862h1.688v5.625h2.25v-5.625h1.687v5.625h2.25v-5.625h1.688v5.625h2.25v-5.625H19.5v5.625h.281c.457 0 .844.387.844.844a.833.833 0 0 1-.844.844H6c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844v-5.625ZM20.906 19.3c.457 0 .844.386.844.844a.833.833 0 0 1-.844.843H4.875c-.492 0-.844-.351-.844-.843 0-.457.352-.844.844-.844h16.031Z"
+    />
+  </svg>
+)

package/main.js

@@ -23794,36 +23794,40 @@ function BankSelectionStep(props) {
         className: BankSelectionStep_bank_selection_module['payment-input-container'],
         children: loading ? /*#__PURE__*/(0,jsx_runtime.jsx)(dist_Skeleton, {
           height: 45
-        }) : /*#__PURE__*/(0,jsx_runtime.jsxs)(Dropdown_Dropdown, {
-          label: "Bank",
-          width: "full",
-          children: [/*#__PURE__*/(0,jsx_runtime.jsx)(DropdownButton, {
-            placeholder: "Select your bank",
-            text: (_selectedBankOption$v = selectedBankOption == null ? void 0 : selectedBankOption.value) != null ? _selectedBankOption$v : '',
-            leadingIcon: selectedBankOption && selectedBankOption.icon ? /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
-              className: `${BankSelectionStep_bank_selection_module['bank-logo']} h-full rounded-full`,
-              src: selectedBankOption.icon
-            }) : undefined,
-            onClearHandler: handleClearSelectedBank,
-            disabled: disabled
-          }), /*#__PURE__*/(0,jsx_runtime.jsx)(DropdownMenu, {
-            verticalPlacement: "auto",
-            children: dropdownOptions.map(option => /*#__PURE__*/(0,jsx_runtime.jsx)(DropdownMenuItem, {
-              text: option.label,
-              selected: (selectedBank == null ? void 0 : selectedBank.value) === option.value,
-              onClickHandler: () => handleSelectBank(option),
-              render: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-                className: "flex items-center gap-2",
-                children: [option.icon && /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
-                  className: `${BankSelectionStep_bank_selection_module['bank-logo']} h-6 w-auto`,
-                  src: option.icon
-                }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
-                  className: "text-[#101828] font-medium text-sm",
-                  children: option.label
-                })]
-              })
-            }, option.value))
-          })]
+        }) : /*#__PURE__*/(0,jsx_runtime.jsx)("dialog", {
+          open: true,
+          className: "static w-full",
+          children: /*#__PURE__*/(0,jsx_runtime.jsxs)(Dropdown_Dropdown, {
+            label: "Bank",
+            width: "full",
+            children: [/*#__PURE__*/(0,jsx_runtime.jsx)(DropdownButton, {
+              placeholder: "Select your bank",
+              text: (_selectedBankOption$v = selectedBankOption == null ? void 0 : selectedBankOption.value) != null ? _selectedBankOption$v : '',
+              leadingIcon: selectedBankOption && selectedBankOption.icon ? /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+                className: `${BankSelectionStep_bank_selection_module['bank-logo']} h-full rounded-full`,
+                src: selectedBankOption.icon
+              }) : undefined,
+              onClearHandler: handleClearSelectedBank,
+              disabled: disabled
+            }), /*#__PURE__*/(0,jsx_runtime.jsx)(DropdownMenu, {
+              verticalPlacement: "auto",
+              children: dropdownOptions.map(option => /*#__PURE__*/(0,jsx_runtime.jsx)(DropdownMenuItem, {
+                text: option.label,
+                selected: (selectedBank == null ? void 0 : selectedBank.value) === option.value,
+                onClickHandler: () => handleSelectBank(option),
+                render: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+                  className: "flex items-center gap-2",
+                  children: [option.icon && /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
+                    className: `${BankSelectionStep_bank_selection_module['bank-logo']} h-6 w-auto`,
+                    src: option.icon
+                  }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+                    className: "text-[#101828] font-medium text-sm",
+                    children: option.label
+                  })]
+                })
+              }, option.value))
+            })]
+          })
         })
       }), !showMinInstallmentAmountError && selectedBank && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: "w-full flex mt-4 flex-col gap-2",
@@ -38227,13 +38231,13 @@ const TabElement = ({
   const isSelected = selectedPaymentMethodType === type;
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     onClick: () => setSelectedPayment(paymentMethod),
-    className: classNames('text-gray-500 font-semibold text-sm flex flex-col items-start gap-2 border p-3 relative rounded-xl transition-all duration-300 cursor-pointer text-start flex-1', 'w-full sm:w-1/3 md:w-1/4 lg:w-1/6', isSelected ? 'text-blue-500 border-blue-500' : 'border-gray-200'),
+    className: classNames('text-gray-500 font-semibold text-sm flex flex-col items-start gap-3 border p-3 relative rounded-xl transition-all duration-300 cursor-pointer text-start flex-1', 'w-full sm:w-1/3 md:w-1/4 lg:w-1/6', isSelected ? 'text-blue-500 border-blue-500' : 'border-gray-200'),
     style: customStyle != null && (_customStyle$button = customStyle.button) != null && _customStyle$button.borderColor && isSelected ? {
       borderColor: customStyle.button.borderColor,
       borderRadius: customStyle.tabs.borderRadius
     } : {},
     children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("i", {
-      className: classNames('w-10 h-10 self-start', isSelected ? 'text-blue-500' : 'text-gray-500'),
+      className: classNames('w-6 h-6 self-start', isSelected ? 'text-blue-500' : 'text-gray-500'),
       children: [typeof icon === 'string' && /*#__PURE__*/(0,jsx_runtime.jsx)("img", {
         className: "w-10 h-8 rounded-[6px] border border-[#EAECF0] bg-center bg-cover bg-no-repeat",
         src: icon,
@@ -38601,6 +38605,33 @@ const getPaymentLogo = (type, externalIcon) => {
       return aani_namespaceObject;
   }
 };
+;// ./src/assets/icons/card.tsx
+
+const CardIcon = props => /*#__PURE__*/(0,jsx_runtime.jsx)("svg", Object.assign({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none"
+}, props, {
+  children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", {
+    fill: "currentColor",
+    d: "M7.781 14.813c.457 0 .844.386.844.843a.833.833 0 0 1-.844.844H6.094c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844H7.78Zm6.75 0c.457 0 .844.386.844.843a.833.833 0 0 1-.844.844h-3.937c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844h3.937Zm5.344-10.688c1.23 0 2.25 1.02 2.25 2.25v11.25c0 1.266-1.02 2.25-2.25 2.25H4.125a2.221 2.221 0 0 1-2.25-2.25V6.375c0-1.23.984-2.25 2.25-2.25h15.75Zm0 1.688H4.125a.578.578 0 0 0-.563.562V7.5h16.875V6.375c0-.281-.28-.563-.562-.563Zm.563 5.062H3.563v6.75c0 .316.246.563.562.563h15.75a.578.578 0 0 0 .563-.563v-6.75Z"
+  })
+}));
+;// ./src/assets/icons/installments.tsx
+
+
+const InstallmentsIcon = props => /*#__PURE__*/(0,jsx_runtime.jsx)("svg", Object.assign({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none"
+}, props, {
+  children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", {
+    fill: "currentColor",
+    d: "M21.117 7.522c.387.211.633.598.633 1.02 0 .668-.563 1.195-1.23 1.195H4.945A1.185 1.185 0 0 1 3.75 8.542c0-.422.21-.809.598-1.02l7.98-4.43c.246-.105.563-.105.809 0l7.98 4.43Zm-9.492-.035c0-.597.492-1.125 1.125-1.125.598 0 1.125.528 1.125 1.125 0 .211-.07.422-.176.563h4.922L12.75 4.815 6.844 8.05h4.922c-.106-.14-.141-.352-.141-.563ZM6 10.862h1.688v5.625h2.25v-5.625h1.687v5.625h2.25v-5.625h1.688v5.625h2.25v-5.625H19.5v5.625h.281c.457 0 .844.387.844.844a.833.833 0 0 1-.844.844H6c-.492 0-.844-.352-.844-.844 0-.457.352-.844.844-.844v-5.625ZM20.906 19.3c.457 0 .844.386.844.844a.833.833 0 0 1-.844.843H4.875c-.492 0-.844-.351-.844-.843 0-.457.352-.844.844-.844h16.031Z"
+  })
+}));
 ;// ./src/components/Payments/List/TabView.tsx
 
 const TabView_excluded = ["paymentMethods"];
@@ -38609,6 +38640,8 @@ const TabView_excluded = ["paymentMethods"];
 
 
 
+
+
 function TabView(props) {
   var _restProps$customStyl;
   const {
@@ -38625,6 +38658,17 @@ function TabView(props) {
   if (!(paymentMethods != null && paymentMethods.length) || !selectedPaymentMethod) {
     return null;
   }
+  function getPaymentMethodLogo(paymentMethodType) {
+    if (paymentMethodType === 'card') {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)(CardIcon, {
+        className: "w-full h-full"
+      });
+    } else if (paymentMethodType === 'card-installment') {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)(InstallmentsIcon, {});
+    } else {
+      return getPaymentLogo(paymentMethodType);
+    }
+  }
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "flex flex-col flex-grow",
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("p", {
@@ -38635,7 +38679,7 @@ function TabView(props) {
       children: paymentMethods.map(paymentMethod => /*#__PURE__*/(0,jsx_runtime.jsx)(TabElement, {
         selectedPaymentMethodType: selectedPaymentMethod.type,
         paymentMethod: paymentMethod,
-        icon: getPaymentLogo(paymentMethod.type),
+        icon: getPaymentMethodLogo(paymentMethod.type),
         setSelectedPayment: selected => {
           setSelectedPaymentMethod(Object.assign({}, selected, {
             userSelected: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paymob-pixel-alpha",
-  "version": "1.1.77",
+  "version": "1.1.79",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
   "license": "MIT",