paymob-pixel-alpha 1.1.77 → 1.1.78

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

@@ -38227,13 +38227,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 +38601,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 +38636,8 @@ const TabView_excluded = ["paymentMethods"];
 
 
 
+
+
 function TabView(props) {
   var _restProps$customStyl;
   const {
@@ -38625,6 +38654,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 +38675,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.78",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
   "license": "MIT",