paymob-pixel-alpha 1.1.0 → 1.1.2

package/README.md

@@ -1,4 +1,4 @@
-# pixel
+# `pixel`
 Paymob Web SDK, help our merchant to have the native payment experience.
 
 ## Installing
@@ -8,13 +8,13 @@ Paymob Web SDK, help our merchant to have the native payment experience.
 Using npm:
 
 ```bash
-$ npm install paymob-pixel-alpha --save
+$ npm install paymob-pixel --save
 ```
 
 Once the package is installed, you can import the library using `import`:
 
 ```js
-import { Pixel } from 'paymob-pixel-alpha';
+import { Pixel } from 'paymob-pixel';
 ``` -->
 
 ### CDN
@@ -27,14 +27,13 @@ Using jsDelivr:
 <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
 ```
 
-Using unpkg:
+<!-- Using unpkg:
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
 <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
 <script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
-```
-
+``` -->
 
 ## Usage
 
@@ -52,7 +51,7 @@ new Pixel({
 > <script src="https://pay.google.com/gp/p/js/pay.js"></script>
 > ```
 
-## properties
+## Properties
 
 The full list of properties is as follows:
 | Property  | Type | Definition |
@@ -64,12 +63,52 @@ The full list of properties is as follows:
 | disablePay            | Boolean         | pass true If you don’t want to use Paymob’s Pay Button for Card Payment, in this case you will dispatchEvent with name (payFromOutside) to fire the pay.  |
 | showSaveCard          | Boolean         | If this option is set to TRUE, users will have the option to save their card details for future payment.  |
 | forceSaveCard         | Boolean         | If this option is set to true, the user's card details will be saved automatically without requiring their consent  |
+| cardValidationChanged | Function        | This Functionality will be processed whenever card validation status changed.  |
 | beforePaymentComplete | Function        | Merchants can implement their own custom logic or functions before the payment is processed by Paymob. check the full example below.  |
-| afterPaymentComplete  | Function        | This Functionality will be processed fter payment is processed by Paymob. check the full example below. |
+| afterPaymentComplete  | Function        | This Functionality will be processed after payment is processed by Paymob. check the full example below. |
 | onPaymentCancel       | Function        | This function applies exclusively to Apple Pay. Merchants can implement their own custom logic to handle scenarios where a user cancels the Apple Pay payment by closing the Apple Pay SDK.  |
 | customStyle           | Object          | You can pass custom styles, for more details check the full example below.
 
 
+## Events
+The full list of events is as follows:
+| Event   | Definition |
+| ------- | ---------  |
+| payFromOutside | In case you need to use you pay button instead of SDK pay button.
+
+
+## Functions
+The full list of functions is as follows:
+| Function  | Props | Definition |
+| --------------------- | --------------  | --------------  |
+| updateIntentionData   | -               | Update intention data inside the SDK, in case any updates happend on the intention.
+
+
+## Custom Pay Button Example
+> Add **disablePay** to hide SDK pay button
+> ```js
+> new Pixel({
+>     publicKey: 'are_pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+>     clientSecret: 'are_csk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
+>     paymentMethods: ['card', 'google-pay', 'apple-pay'],
+>     elementId: 'example',
+>     disablePay: true,
+> });
+> ```
+> Then you can fire **payFromOutside** event when ever you want to start the payment, this will not work with Google-pay or Apple-pay
+> ```js
+> window.dispatchEvent(new Event('payFromOutside'));
+> ```
+
+
+
+## Update Intention Example
+> Whenever you made any update to the intention via API, you will need to update the intention data inside the SDK.
+> ```js
+> const response = await Pixel.updateIntentionData();
+> ```
+> **updateIntentionData** will return the response of the latest retrieve intention request.
+
 ## Full Example
 
 ```html
@@ -80,20 +119,19 @@ The full list of properties is as follows:
         <title>Pixels</title>
         <base href="/">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/styles.css">
-        <link rel="stylesheet" href="https://unpkg.com/paymob-pixel-alpha/main.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/styles.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.css">
     </head>
     <body>
         <div style="position: absolute; width: 80%; margin-top: 10%;" id="example"></div>
         <button id="payFromOutsideButton">Pay From Outside Button</button>
         
-        <script src="https://unpkg.com/paymob-pixel-alpha/main.js" type="module"></script>
+        <script src="https://cdn.jsdelivr.net/npm/paymob-pixel-alpha@latest/main.js" type="module"></script>
         <script>
             const button = document.getElementById('payFromOutsideButton');
             button.addEventListener('click', function () {
                 // Calling pay request
-                const event = new Event('payFromOutside');
-                window.dispatchEvent(event);
+                window.dispatchEvent(new Event('payFromOutside'));
             });
             onload = (event) => {
                 new Pixel({
@@ -107,7 +145,7 @@ The full list of properties is as follows:
                     cardValidationChanged: (isValid) => {
                         console.log("Is valid ? ", isValid)
                     },
-                    beforePaymentComplete: async () => {
+                    beforePaymentComplete: async (paymentMethod) => {
                         console.log('Before payment start');
                         console.log('We are waiting for 5 seconds');
                         await new Promise(res => setTimeout(() => res(''),5000))

package/main.js

@@ -10216,7 +10216,8 @@ function ModalView_ModalView(props) {
   const {
     onClose,
     showModal,
-    children
+    children,
+    customStyle
   } = props;
   const stopPropagation = e => {
     e.stopPropagation();
@@ -10233,6 +10234,9 @@ function ModalView_ModalView(props) {
         className: "relative w-auto max-h-full mobile:w-11/12",
         children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           className: `relative bg-white shadow ${borderStyle === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'}`,
+          style: {
+            borderRadius: (customStyle == null ? void 0 : customStyle['borderRadius']) || ''
+          },
           children: children
         })
       })
@@ -10488,7 +10492,7 @@ function OTPViewTwo_OTP(props) {
   const [value, setValue] = (0,react.useState)(otpValue || '');
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
 
   //regular expression to tests whether a string is a digit
   const RExp_DIGIT = new RegExp(/^\d+$/);
@@ -10644,7 +10648,7 @@ const GenericOTP = props => {
   } = props;
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
   const [otp, setOTP] = (0,react.useState)('');
   const handleOTPChange = e => {
     const value = e.target.value.replace(/\D/g, '');
@@ -10696,7 +10700,8 @@ function OTPModal_OTPModal(props) {
     setResetCounter,
     loading,
     error,
-    onErrorMessage
+    onErrorMessage,
+    customStyle
   } = props;
   const {
     t
@@ -10706,7 +10711,7 @@ function OTPModal_OTPModal(props) {
   const [resendingOTP, setResendingOTP] = (0,react.useState)(false);
   const {
     borderStyle
-  } = useSelector_useSelector(state => state.customization);
+  } = useSafeSelector(state => state.customization);
   (0,react.useEffect)(() => {
     if (!loading && resendingOTP) {
       if (error) {
@@ -10733,8 +10738,10 @@ function OTPModal_OTPModal(props) {
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
     className: "max-w-[400px]",
+    style: customStyle == null ? void 0 : customStyle['container'],
     children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "flex px-6 py-6 flex-col gap-2 items-start",
+      style: customStyle == null ? void 0 : customStyle['label'],
       children: [length && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
         className: "text-lg font-semibold",
         children: modalHeader
@@ -10756,6 +10763,7 @@ function OTPModal_OTPModal(props) {
             onErrorMessage: onErrorMessage
           }), error && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
             className: "text-red-600 text-sm font-normal leading-[1.125rem] tracking-[.01rem]",
+            style: customStyle == null ? void 0 : customStyle['error'],
             children: error
           })]
         }, resetOtpComponent.toString()), onResend && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -10769,6 +10777,7 @@ function OTPModal_OTPModal(props) {
         })]
       }), (loading || resendingOTP) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "flex justify-center items-center bg-white w-full h-20 flex-col gap-4",
+        style: customStyle == null ? void 0 : customStyle['container'],
         children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "flex animate-pulse",
           children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -10792,17 +10801,18 @@ function OTPModal_OTPModal(props) {
         onClick: onClose,
         type: "button",
         className: `py-[10px] px-4 md:py-3 md:px-4 text-gray-500 bg-white hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 ${borderStyle === borderStyle_borderStyleConstants.RECTANGULAR ? 'rounded-none' : 'rounded-lg'} border border-gray-200 text-base hover:text-gray-900 focus:z-10`,
+        style: customStyle == null ? void 0 : customStyle['cancelButton'],
         children: "Cancel"
       }), /*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
         label: "Submit",
         id: "pay-button",
         onClick: handleOtpSubmit,
         disabled: !otp || loading,
-        customStyle: {
+        customStyle: Object.assign({
           height: 'unset',
           padding: '0.625rem 1rem'
-        },
-        className: "mt-0"
+        }, customStyle == null ? void 0 : customStyle['button']),
+        className: "!mt-0"
       })]
     })]
   });
@@ -17089,38 +17099,8 @@ function SecureCheckout(props) {
   });
 }
 /* harmony default export */ const components_SecureCheckout = ((/* unused pure expression or super */ null && (SecureCheckout)));
-;// CONCATENATED MODULE: ../../libs/kit-components/src/assets/icons/close-icon.svg
-var close_icon_path;
-var close_icon_excluded = (/* unused pure expression or super */ null && (["title", "titleId"]));
-function close_icon_extends() { return close_icon_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, close_icon_extends.apply(null, arguments); }
-function close_icon_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = close_icon_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function close_icon_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-
-
-var SvgCloseIcon = function SvgCloseIcon(_ref, ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = close_icon_objectWithoutProperties(_ref, close_icon_excluded);
-  return /*#__PURE__*/React.createElement("svg", close_icon_extends({
-    width: "800px",
-    height: "800px",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref,
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, close_icon_path || (close_icon_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z",
-    fill: "#667085"
-  })));
-};
-var close_icon_ForwardRef = /*#__PURE__*/(/* unused pure expression or super */ null && (forwardRef(SvgCloseIcon)));
-
-/* harmony default export */ const close_icon = (__webpack_require__.p + "close-icon.371f61902d3cf35dc76286080a72af1f.svg");
+;// CONCATENATED MODULE: ../../libs/kit-components/src/assets/icons/close-icon.png
+const close_icon_namespaceObject = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAACXBIWXMAAAFKAAABSgHphfmiAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAu5JREFUeJztms9u2kAQh38D4U6u8AwR4pGCgpq0lYLEIZIvlg9N6aGCtLRCUJEnqpTkHeAa7q69uQQRFY0x+9eR5rtwwMyOPtZrz+ySUgrCPrXQCVQVEcMgYhhEDIOIYRAxDCKGQcQwiBgGEcMgYhhEDIOIYTgxDXA1HHVVlp/lhKf5OHqwkVQVciGTtsOHwZevILoBQACUAqbtZjqI4zg3SepYkiSprTaNCQGft7kQMJqNo0g3praYq+Gom+f539dE3rJsNdO+LzlJktTWm8YCQO+/rxTV6t3Z95tHnbjaa4zK8jPsSwGA3nrTWCRJ4nz9KpACAIQs6+jG1k4+JzwB4KabczkHpACAQr2uNVsAAzHzcfSggGnBJc7klJACBUx1byPA8HG9mETXSmFWcElv/Xzyx6YcItDqufELBVKg1H27mQ5MxjFKWCmoxV30sVAO0bktOUSg/vXtbyJcFiR13zr9d2G6+Bsn60uOTymApTdf13J8SwEslgSu5ISQAliulWzLCSUFcFBE2pITUgrgqLo2lRNaCuCw7aArpwpSAMf9mGPlVEUKYNh2KEuZV3gAy9fPwmt8Ve5exAAlb5EiPM2ULd5am6VuK/7HXqUAnnu+WnICSAECNMOPkhNICiC7BCzexRy1CFtsWRyL1wG1nkyB5HgbzOhxHUCOvOAxOP8HyvZoW820P59EF757yBxOBzi29vHdQy7CWXDdgrAqcpwENq2SqyDHelBbrYPQcqwGtN1PCSnH6g6hiyZTKDlWArnuvIWQ8262TX3LMQrgu0frU47Rj/uD27sDtc/Sdj9FKaj2afoJuxJiH6Lz1aYxMRnHxVGzLU7rmjIHh6p21AzwUOzFcZy3mmkf/Myp3FEzbxXwATnhjpoRMMJOjgLRD58nNoGdHAX8fJsLASOTo2bG/ZjL4bcOsqyDev3RJBEb2MzF24bbe0N2CRhEDIOIYRAxDCKGQcQwiBgGEcMgYhhEDIOIYRAxDCKG4QXD79JL5r6MQwAAAABJRU5ErkJggg==";
 ;// CONCATENATED MODULE: ../../libs/kit-components/src/components/OrderDetailsModal/index.tsx
 
 
@@ -17377,7 +17357,8 @@ function MobileOTPModal_MobileOTPModal(props) {
     setResetCounter,
     error,
     onErrorMessage,
-    loading
+    loading,
+    customStyle
   } = props;
   const {
     t
@@ -17421,13 +17402,15 @@ function MobileOTPModal_MobileOTPModal(props) {
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       onClick: e => e.stopPropagation(),
       className: "flex relative flex-col gap-2 py-8 w-full bg-white h-[88%] rounded-3xl",
+      style: customStyle == null ? void 0 : customStyle['container'],
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("img", {
         onClick: onClose,
         className: "absolute top-4 right-4 w-6 cursor-pointer",
-        src: close_icon,
+        src: close_icon_namespaceObject,
         alt: "close"
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
         className: "flex flex-col gap-2 px-6 items-start",
+        style: customStyle == null ? void 0 : customStyle['label'],
         children: [length && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
           className: "text-lg font-semibold",
           children: modalHeader
@@ -17449,6 +17432,7 @@ function MobileOTPModal_MobileOTPModal(props) {
               onErrorMessage: onErrorMessage
             }), error && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
               className: "text-red-600 text-sm font-normal leading-[1.125rem] tracking-[.01rem]",
+              style: customStyle == null ? void 0 : customStyle['error'],
               children: error
             })]
           }, resetOtpComponent.toString()), onResend && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -17462,6 +17446,7 @@ function MobileOTPModal_MobileOTPModal(props) {
           })]
         }), (loading || resendingOTP) && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
           className: "flex justify-center items-center bg-white w-full h-20 flex-col gap-4",
+          style: customStyle == null ? void 0 : customStyle['container'],
           children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
             className: "flex animate-pulse",
             children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -17486,7 +17471,8 @@ function MobileOTPModal_MobileOTPModal(props) {
           id: "pay-button",
           onClick: handleOtpSubmit,
           disabled: !otp || loading,
-          className: "w-full"
+          className: "w-full",
+          customStyle: customStyle == null ? void 0 : customStyle['button']
         })
       })]
     })
@@ -19862,6 +19848,45 @@ const payWithSavedCard = payload => {
     api_source: 'PIXEL'
   }).then(res => res).catch(err => err == null ? void 0 : err.response);
 };
+;// CONCATENATED MODULE: ./src/utils/getErrorMsg.ts
+const getErrorMsg_isString = data => typeof data === 'string';
+const DECLINED_MESSAGE = 'Payment is declined';
+const getErrorMsg = err => {
+  var _data$data, _data$data2;
+  const data = err == null ? void 0 : err.data;
+  if (!err) {
+    return DECLINED_MESSAGE;
+  }
+  if (getErrorMsg_isString(err)) {
+    return err;
+  }
+  if (data != null && data['data.message'] && getErrorMsg_isString(data['data.message'])) {
+    return data['data.message'];
+  }
+  if (data != null && data.message && getErrorMsg_isString(data.message)) {
+    return data.message;
+  }
+  if (data != null && data.msg && getErrorMsg_isString(data.msg)) {
+    return data.msg;
+  }
+  if (data != null && data.detail && getErrorMsg_isString(data.detail)) {
+    return data.detail;
+  }
+  if (data != null && data.error && getErrorMsg_isString(data.error)) {
+    return data.error;
+  }
+  if (data != null && data.error_message && getErrorMsg_isString(data.error_message)) {
+    return data.error_message;
+  }
+  if (data != null && (_data$data = data.data) != null && _data$data.message && getErrorMsg_isString((_data$data2 = data.data) == null ? void 0 : _data$data2.message)) {
+    var _data$data3;
+    return (_data$data3 = data.data) == null ? void 0 : _data$data3.message;
+  }
+  if (Array.isArray(data) && getErrorMsg_isString(data[0])) {
+    return data[0];
+  }
+  return DECLINED_MESSAGE;
+};
 ;// CONCATENATED MODULE: ./src/components/Payments/Card/index.tsx
 
 
@@ -19873,6 +19898,7 @@ const payWithSavedCard = payload => {
 // import { DeleteCard } from '@unified-checkout/card';
 
 
+
 function CardElement({
   payment,
   customStyle,
@@ -19888,11 +19914,9 @@ function CardElement({
   onCardValidationChanged,
   showPaymobLogo,
   hideCardHolderName,
-  isLoading,
-  onProcessingPayment,
-  isProcessingPayment
+  isLoading
 }) {
-  var _customStyle$containe;
+  var _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3;
   const {
     token,
     amount,
@@ -19921,10 +19945,11 @@ function CardElement({
   const [selectedCardCVV, setSelectedCardCVV] = (0,react.useState)('');
   const [showCardModal, setShowCardModal] = (0,react.useState)(false);
   const [showCVVTooltipModal, setShowCVVTooltipModal] = (0,react.useState)(false);
+  const previousValidationRef = (0,react.useRef)(false);
   const [showOTP, setShowOTP] = (0,react.useState)(false);
   const [sendOTPLoading, setSendOTPLoading] = (0,react.useState)(false);
-  const previousValidationRef = (0,react.useRef)(false);
-  const [startCardPay, setStartCardPay] = (0,react.useState)(false);
+  const [paymentId, setPaymentId] = (0,react.useState)('');
+  const [otpErrorMessage, setOTPErrorMessage] = (0,react.useState)('');
   const isCardValid = hideCardHolderName ? !isActionBtnDisabled : !(isActionBtnDisabled || !cardHolderName);
   const isAmexCardSelected = (selectedCard == null ? void 0 : selectedCard.type) === constants_CARD_TYPES.AMEX;
   const selectedCardCvvLength = selectedCardCVV.length;
@@ -19969,7 +19994,8 @@ function CardElement({
     };
     const handlePaymentResponse = ({
       res,
-      requiresOTP
+      requiresOTP,
+      isOTPResponse
     }) => {
       var _res$data, _res$data2, _res$data3;
       setShouldSubmitData(false);
@@ -19978,20 +20004,29 @@ function CardElement({
       if (cardHolderInput) {
         setTimeout(() => cardHolderInput.disabled = false, 1000);
       }
+      const redirectionUrl = ((_res$data = res.data) == null ? void 0 : _res$data.redirection_url) || ((_res$data2 = res.data) == null ? void 0 : _res$data2.redirect_url);
       if (requiresOTP) {
+        setPaymentId(res.data.payment_id);
         setShowOTP(true);
-      } else if (onAfterPaymentComplete && ((_res$data = res.data) == null ? void 0 : _res$data.is_3d_secure) !== 'true') {
+      } else if (onAfterPaymentComplete && ((_res$data3 = res.data) == null ? void 0 : _res$data3.is_3d_secure) !== 'true') {
         onAfterPaymentComplete(res);
-      } else if (res.status === 200 && ((_res$data2 = res.data) != null && _res$data2.redirection_url || (_res$data3 = res.data) != null && _res$data3.redirect_url)) {
-        var _res$data4, _res$data5;
-        window.location.href = ((_res$data4 = res.data) == null ? void 0 : _res$data4.redirection_url) || ((_res$data5 = res.data) == null ? void 0 : _res$data5.redirect_url);
+      } else if (res.status === 200 && isOTPResponse) {
+        if (redirectionUrl && (res.data.result === 'CAPTURED' || res.data.result === 'APPROVED')) {
+          window.location.href = redirectionUrl;
+        } else {
+          setOTPErrorMessage(getErrorMsg(res));
+        }
+      } else if (res.status !== 200 && isOTPResponse) {
+        setOTPErrorMessage(getErrorMsg(res));
+      } else if (res.status === 200 && redirectionUrl) {
+        window.location.href = redirectionUrl;
       } else if (res.status === 400) {
-        var _res$data6, _res$data7, _res$data8;
-        if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data6 = res.data) == null ? void 0 : _res$data6.msg) === 'Retry limit reached.') {
+        var _res$data4, _res$data5, _res$data6;
+        if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data4 = res.data) == null ? void 0 : _res$data4.msg) === 'Retry limit reached.') {
           setErrorMessage(t('ERR_MSG_EXCEEDED_TRIALS'));
-        } else if (((_res$data7 = res.data) == null ? void 0 : _res$data7.message) === 'Session Error') {
+        } else if (((_res$data5 = res.data) == null ? void 0 : _res$data5.message) === 'Session Error') {
           setErrorMessage(t('ERR_MSG_ALREADY_PROCESSED'));
-        } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data8 = res.data) == null ? void 0 : _res$data8.msg) === 'Order has already paid.') {
+        } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data6 = res.data) == null ? void 0 : _res$data6.msg) === 'Order has already paid.') {
           setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
         } else {
           setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20053,39 +20088,21 @@ function CardElement({
             return;
           }
         }
-        setStartCardPay(true);
-        onProcessingPayment(true);
+        sendCardData(true);
         setShouldSubmitData(false);
       };
       handlePay();
     }
   }, [cardHolderName, saveCard, shouldSubmitData, iframe]);
   (0,react.useEffect)(() => {
-    if (isIframeLoaded || startCardPay && isProcessingPayment) {
-      var _iframe$contentWindow, _payment$subType, _payment$subType2;
-      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
-        type: 'cardData',
-        payload: {
-          paymentToken: payment.token,
-          subType: {
-            paymentToken: (_payment$subType = payment.subType) == null ? void 0 : _payment$subType.token,
-            type: (_payment$subType2 = payment.subType) == null ? void 0 : _payment$subType2.type
-          },
-          currency,
-          cardHolderName,
-          saveCard: forceSaveCard || saveCard,
-          tenure,
-          shouldSubmitData: startCardPay && isProcessingPayment
-        }
-      }, '*');
-      setStartCardPay(false);
-      onProcessingPayment(false);
+    if (isIframeLoaded) {
+      sendCardData();
     }
-  }, [isIframeLoaded, payment, isProcessingPayment]);
+  }, [isIframeLoaded, payment]);
   (0,react.useEffect)(() => {
     if (isIframeLoaded) {
-      var _iframe$contentWindow2;
-      (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
+      var _iframe$contentWindow;
+      (_iframe$contentWindow = iframe.contentWindow) == null || _iframe$contentWindow.postMessage({
         type: 'customStyles',
         payload: {
           styling: customStyle,
@@ -20097,8 +20114,8 @@ function CardElement({
     }
   }, [isIframeLoaded, iframeRef.current]);
   (0,react.useEffect)(() => {
-    var _iframe$contentWindow3;
-    iframe == null || (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+    var _iframe$contentWindow2;
+    iframe == null || (_iframe$contentWindow2 = iframe.contentWindow) == null || _iframe$contentWindow2.postMessage({
       type: 'cardHolderError',
       payload: {
         error: errors['name']
@@ -20116,6 +20133,24 @@ function CardElement({
       previousValidationRef.current = isCardValid;
     }
   }, [isCardValid, shouldDisablePayBtn]);
+  const sendCardData = shouldSubmitData => {
+    var _iframe$contentWindow3, _payment$subType, _payment$subType2;
+    (_iframe$contentWindow3 = iframe.contentWindow) == null || _iframe$contentWindow3.postMessage({
+      type: 'cardData',
+      payload: {
+        paymentToken: payment.token,
+        subType: {
+          paymentToken: (_payment$subType = payment.subType) == null ? void 0 : _payment$subType.token,
+          type: (_payment$subType2 = payment.subType) == null ? void 0 : _payment$subType2.type
+        },
+        currency,
+        cardHolderName,
+        saveCard: forceSaveCard || saveCard,
+        tenure,
+        shouldSubmitData: shouldSubmitData
+      }
+    }, '*');
+  };
   const handlePayWithoutButton = () => {
     setShouldSubmitData(true);
   };
@@ -20183,12 +20218,12 @@ function CardElement({
         window.location.href = res.data.redirection_url;
       }
     } else if (res.status === 400) {
-      var _res$data9, _res$data10, _res$data11;
-      if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data9 = res.data) == null ? void 0 : _res$data9.msg) === 'Retry limit reached.') {
+      var _res$data7, _res$data8, _res$data9;
+      if (res.data instanceof Array && res.data[0] === 'Retry limit reached.' || ((_res$data7 = res.data) == null ? void 0 : _res$data7.msg) === 'Retry limit reached.') {
         setErrorMessage(t('ERR_MSG_EXCEEDED_TRIALS'));
-      } else if (((_res$data10 = res.data) == null ? void 0 : _res$data10.message) === 'Session Error') {
+      } else if (((_res$data8 = res.data) == null ? void 0 : _res$data8.message) === 'Session Error') {
         setErrorMessage(t('ERR_MSG_ALREADY_PROCESSED'));
-      } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data11 = res.data) == null ? void 0 : _res$data11.msg) === 'Order has already paid.') {
+      } else if (res.data instanceof Array && res.data[0] === 'Order has already paid.' || ((_res$data9 = res.data) == null ? void 0 : _res$data9.msg) === 'Order has already paid.') {
         setErrorMessage(t('ERR_MSG_ALREADY_PAID'));
       } else {
         setErrorMessage(t('ERR_MSG_DECLINED'));
@@ -20215,7 +20250,8 @@ function CardElement({
         subType: {
           paymentToken: (_payment$subType3 = payment.subType) == null ? void 0 : _payment$subType3.token
         },
-        otp
+        otp,
+        paymentId
       }
     }, '*');
   };
@@ -20252,16 +20288,42 @@ function CardElement({
       onSubmit: handleOTPSubmit,
       length: 4,
       modalHeader: `${4}-digit code`,
-      loading: sendOTPLoading
+      loading: sendOTPLoading,
+      onErrorMessage: setOTPErrorMessage,
+      error: otpErrorMessage,
+      customStyle: {
+        container: {
+          backgroundColor: (customStyle == null || (_customStyle$containe2 = customStyle.container) == null ? void 0 : _customStyle$containe2.backgroundColor) || '',
+          borderRadius: (customStyle == null || (_customStyle$button = customStyle.button) == null ? void 0 : _customStyle$button.borderRadius) || ''
+        },
+        button: customStyle == null ? void 0 : customStyle.button,
+        label: customStyle == null ? void 0 : customStyle.label,
+        error: customStyle == null ? void 0 : customStyle.error
+      }
     }), !isMobile && showOTP && /*#__PURE__*/(0,jsx_runtime.jsx)(ModalView_ModalView, {
       showModal: showOTP,
       onClose: handleCloseOTP,
+      customStyle: customStyle == null ? void 0 : customStyle.button,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(OTPModal_OTPModal, {
         onClose: handleCloseOTP,
         onSubmit: handleOTPSubmit,
         length: 4,
         modalHeader: `${4}-digit code`,
-        loading: sendOTPLoading
+        loading: sendOTPLoading,
+        onErrorMessage: setOTPErrorMessage,
+        error: otpErrorMessage,
+        customStyle: {
+          container: {
+            backgroundColor: (customStyle == null || (_customStyle$containe3 = customStyle.container) == null ? void 0 : _customStyle$containe3.backgroundColor) || ''
+          },
+          cancelButton: Object.assign({}, customStyle == null ? void 0 : customStyle.button, {
+            backgroundColor: '#fff',
+            lineHeight: 'normal'
+          }),
+          button: customStyle == null ? void 0 : customStyle.button,
+          label: customStyle == null ? void 0 : customStyle.label,
+          error: customStyle == null ? void 0 : customStyle.error
+        }
       })
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(CVVToolTipModal_CVVToolTipModal, {
       onClose: () => setShowCVVTooltipModal(false),
@@ -26890,8 +26952,7 @@ function ApplePay(props) {
     checkDiscount,
     isPixel,
     isLoading,
-    paymentName,
-    onLayerClick
+    paymentName
   } = props;
   const [loading, setLoading] = (0,react.useState)(false);
   const [discount, setDiscount] = (0,react.useState)({
@@ -26938,6 +26999,13 @@ function ApplePay(props) {
       payload.requiredShippingContactFields = ['email', 'phone', 'name'];
     }
     const session = new window.ApplePaySession(3, payload);
+    if (onBeforePaymentComplete) {
+      const result = await onBeforePaymentComplete(paymentName);
+      if (!result) {
+        setLoading(false);
+        return;
+      }
+    }
     session.onvalidatemerchant = async event => {
       console.log("start validation request");
       console.log(`validationURL: ${event.validationURL}`);
@@ -27033,7 +27101,7 @@ function ApplePay(props) {
     session.begin();
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: `w-full ${isPixel ? 'relative' : ''} ${discount.hasDiscount ? `flex flex-col gap-2 !h-auto ${!isPixel ? 'sm:mb-6' : ''}` : ''}`,
+    className: `w-full ${discount.hasDiscount ? `flex flex-col gap-2 !h-auto ${!isPixel ? 'sm:mb-6' : ''}` : ''}`,
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Button_Button, {
       id: "apple-pay-button",
       icon: apple_pay_namespaceObject,
@@ -27043,9 +27111,6 @@ function ApplePay(props) {
       customStyle: customStyle,
       disabled: loading || isLoading,
       loading: loading || isLoading
-    }), isPixel && /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-      onClick: () => onLayerClick == null ? void 0 : onLayerClick(setLoading),
-      className: "absolute inset-0 cursor-pointer"
     }), discount.hasDiscount && /*#__PURE__*/(0,jsx_runtime.jsx)("p", {
       className: "flex text-center flex-col justify-center text-green-400 text-sm font-medium leading-6 tracking-[0.01rem]",
       children: discount.discountMessage
@@ -27239,9 +27304,7 @@ function GooglePayElement({
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onErrorMessage,
-  isLoading,
-  onProcessingPayment,
-  isProcessingPayment
+  isLoading
 }) {
   var _String;
   const {
@@ -27250,20 +27313,14 @@ function GooglePayElement({
     keyPrefix: 'googlePay'
   });
   const [loading, setLoading] = (0,react.useState)(false);
-  const [startGooglePay, setStartGooglePay] = (0,react.useState)(false);
   const {
     amount,
     currency
   } = payment;
   const googlePay = payment;
   const integrationId = googlePay == null ? void 0 : googlePay.integrationId;
-  (0,react.useEffect)(() => {
-    if (startGooglePay && isProcessingPayment) {
-      const googlePayButton = document.getElementById('gpay-button-online-api-id');
-      googlePayButton == null || googlePayButton.click();
-    }
-  }, [startGooglePay, isProcessingPayment]);
-  const handleLayerClick = async () => {
+  const handleSubmit = async (paymentToken, googlePayload) => {
+    var _res$data;
     setLoading(true);
     if (onBeforePaymentComplete) {
       const result = await onBeforePaymentComplete(payment.name);
@@ -27272,11 +27329,6 @@ function GooglePayElement({
         return;
       }
     }
-    setStartGooglePay(true);
-    onProcessingPayment(true);
-  };
-  const handleSubmit = async (paymentToken, googlePayload) => {
-    var _res$data;
     const res = await payWithGooglePay(paymentToken, integrationId, googlePayload);
     setLoading(false);
     const redirectionUrl = (_res$data = res.data) == null ? void 0 : _res$data.redirection_url;
@@ -27322,23 +27374,17 @@ function GooglePayElement({
     }
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-    children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: "relative w-full",
-      children: [/*#__PURE__*/(0,jsx_runtime.jsx)(GooglePay, {
-        onSubmit: handleSubmit,
-        paymentToken: (googlePay == null ? void 0 : googlePay.token) || '',
-        paymentGateway: (googlePay == null ? void 0 : googlePay.gateway) || '',
-        isLiveIntegration: googlePay == null ? void 0 : googlePay.live,
-        merchantIdentifier: googlePay == null ? void 0 : googlePay.merchantIdentifier,
-        amount: (_String = String(amount)) == null ? void 0 : _String.replace(/,/g, ''),
-        currency: currency,
-        countryCode: currency == null ? void 0 : currency.slice(0, 2),
-        customStyle: customStyle,
-        isLoading: isLoading
-      }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", {
-        onClick: handleLayerClick,
-        className: "absolute inset-0 cursor-pointer"
-      })]
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(GooglePay, {
+      onSubmit: handleSubmit,
+      paymentToken: (googlePay == null ? void 0 : googlePay.token) || '',
+      paymentGateway: (googlePay == null ? void 0 : googlePay.gateway) || '',
+      isLiveIntegration: googlePay == null ? void 0 : googlePay.live,
+      merchantIdentifier: googlePay == null ? void 0 : googlePay.merchantIdentifier,
+      amount: (_String = String(amount)) == null ? void 0 : _String.replace(/,/g, ''),
+      currency: currency,
+      countryCode: currency == null ? void 0 : currency.slice(0, 2),
+      customStyle: customStyle,
+      isLoading: isLoading
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(LoadingModal, {
       show: loading,
       text: t('LOADING_MSG')
@@ -27374,43 +27420,21 @@ const checkDiscount = paymentToken => {
 
 
 
-
 function ApplePayElements({
   payment,
   customStyle,
   onBeforePaymentComplete,
   onAfterPaymentComplete,
   onPaymentCancel,
-  isLoading,
-  onProcessingPayment,
-  isProcessingPayment
+  isLoading
 }) {
   var _amount$toString;
-  const [startApplePay, setStartApplePay] = (0,react.useState)(false);
   const {
     amount,
     currency,
     merchantName
   } = payment;
   const applePay = payment;
-  (0,react.useEffect)(() => {
-    if (startApplePay && isProcessingPayment) {
-      const applePayButton = document.getElementById('apple-pay-button');
-      applePayButton == null || applePayButton.click();
-    }
-  }, [startApplePay, isProcessingPayment]);
-  const handleLayerClick = async setLoading => {
-    setLoading(true);
-    if (onBeforePaymentComplete) {
-      const result = await onBeforePaymentComplete(payment.name);
-      if (!result) {
-        setLoading(false);
-        return;
-      }
-    }
-    setStartApplePay(true);
-    onProcessingPayment(true);
-  };
   const handleSubmit = (status, resData) => {
     window.location.href = resData.redirection_url;
   };
@@ -27431,8 +27455,7 @@ function ApplePayElements({
     checkDiscount: checkDiscount,
     isPixel: true,
     isLoading: isLoading,
-    paymentName: payment.name,
-    onLayerClick: handleLayerClick
+    paymentName: payment.name
   });
 }
 /* harmony default export */ const Payments_ApplePay = (ApplePayElements);
@@ -27514,7 +27537,7 @@ async function fetchPayments(publicKey, clientSecret, paymentMethods) {
 
 
 
-function PaymentsList(props) {
+const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   var _customStyle$containe;
   const {
     payments,
@@ -27543,28 +27566,24 @@ function PaymentsList(props) {
   const [savedCardsList, setSavedCardsList] = (0,react.useState)(savedCards);
   const [errorMessage, setErrorMessage] = (0,react.useState)('');
   const [isLoading, setIsLoading] = (0,react.useState)(false);
-  const [isProcessingPayment, setIsProcessingPayment] = (0,react.useState)(false);
-  (0,react.useEffect)(() => {
-    window.addEventListener('updateIntentionData', getData);
-    return () => {
-      window.removeEventListener('updateIntentionData', getData);
-    };
-  }, []);
-  const getData = async () => {
-    setIsLoading(true);
-    const {
-      res,
-      paymentList,
-      savedCards
-    } = await fetchPayments(publicKey, clientSecret, selectedPaymentMethods);
-    setIsLoading(false);
-    if (res.status === 200) {
-      setPaymentList(paymentList);
-      setSavedCardsList(savedCards);
+  (0,react.useImperativeHandle)(ref, () => ({
+    getData: async () => {
+      setIsLoading(true);
+      const {
+        res,
+        paymentList,
+        savedCards
+      } = await fetchPayments(publicKey, clientSecret, selectedPaymentMethods);
+      setIsLoading(false);
+      if (res.status === 200) {
+        setPaymentList(paymentList);
+        setSavedCardsList(savedCards);
+      }
+      return res;
     }
-  };
+  }));
   const handleOnBeforePaymentComplete = async paymentMethod => {
-    return await onBeforePaymentComplete(paymentMethod, getData);
+    return await onBeforePaymentComplete(paymentMethod);
   };
   const hasOnlyXPays = () => {
     const xPays = ['apple-pay', 'google-pay'];
@@ -27614,18 +27633,14 @@ function PaymentsList(props) {
             onAfterPaymentComplete: onAfterPaymentComplete,
             onPaymentCancel: onPaymentCancel,
             customStyle: customStyle == null ? void 0 : customStyle.button,
-            isLoading: isLoading,
-            onProcessingPayment: setIsProcessingPayment,
-            isProcessingPayment: isProcessingPayment
+            isLoading: isLoading
           }), isGooglePay() && /*#__PURE__*/(0,jsx_runtime.jsx)(GooglePayElement, {
             payment: googlePaymentMethod,
             customStyle: customStyle == null ? void 0 : customStyle.button,
             onBeforePaymentComplete: onBeforePaymentComplete && handleOnBeforePaymentComplete,
             onAfterPaymentComplete: onAfterPaymentComplete,
             onErrorMessage: setErrorMessage,
-            isLoading: isLoading,
-            onProcessingPayment: setIsProcessingPayment,
-            isProcessingPayment: isProcessingPayment
+            isLoading: isLoading
           })]
         })
       }), paymentList.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -27664,13 +27679,11 @@ function PaymentsList(props) {
         showPaymobLogo,
         hideCardHolderName,
         isLoading,
-        onProcessingPayment: setIsProcessingPayment,
-        isProcessingPayment,
         isList: true
       })
     })]
   });
-}
+});
 /* harmony default export */ const List = (PaymentsList);
 ;// CONCATENATED MODULE: ./src/utils/getStyles.ts
 function getStyles(customStyle) {
@@ -27805,7 +27818,7 @@ function getStyles(customStyle) {
 
 
 
-function Payments_Payments(props) {
+const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
   const {
     payment,
     customStyle,
@@ -27941,13 +27954,14 @@ function Payments_Payments(props) {
       hideCardHolderName: hideCardHolderName,
       publicKey: publicKey,
       clientSecret: clientSecret,
-      selectedPaymentMethods: selectedPaymentMethods
+      selectedPaymentMethods: selectedPaymentMethods,
+      ref: ref
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
     children: render()
   });
-}
+});
 /* harmony default export */ const components_Payments = (Payments_Payments);
 ;// CONCATENATED MODULE: ./src/utils/apiUrl.ts
 
@@ -31494,6 +31508,7 @@ i18next.use(initReactI18next).init({
 });
 /* harmony default export */ const localization_i18n = ((/* unused pure expression or super */ null && (i18n)));
 ;// CONCATENATED MODULE: ./src/lib/pixel.tsx
+var _Pixel;
 
 
 
@@ -31514,10 +31529,13 @@ class Pixel {
     this._showSaveCard = void 0;
     this._root = null;
     this._error = null;
+    this._paymentsRef = null;
     this._options = Object.assign({}, options, {
       showPaymobLogo: (_options$showPaymobLo = options.showPaymobLogo) != null ? _options$showPaymobLo : true
     });
     this._baseURL = this.updateAPIBaseURL();
+    this._paymentsRef = /*#__PURE__*/react.createRef();
+    Pixel._instance = this;
     this.getData();
   }
   updateAPIBaseURL() {
@@ -31559,9 +31577,9 @@ class Pixel {
       this.render();
     }
   }
-  async handleBeforePaymentComplete(paymentMethod, updateIntentionData) {
+  async handleBeforePaymentComplete(paymentMethod) {
     if (this._options.beforePaymentComplete) {
-      const result = await this._options.beforePaymentComplete(paymentMethod, updateIntentionData);
+      const result = await this._options.beforePaymentComplete(paymentMethod);
       if (result === false) return false;
       return true;
     }
@@ -31581,6 +31599,13 @@ class Pixel {
       this._options.cardValidationChanged(isValid);
     }
   }
+  static async updateIntentionData() {
+    var _Pixel$_instance;
+    if (!((_Pixel$_instance = Pixel._instance) != null && (_Pixel$_instance = _Pixel$_instance._paymentsRef) != null && (_Pixel$_instance = _Pixel$_instance.current) != null && _Pixel$_instance.getData)) {
+      throw new Error('Pixel not initialized');
+    }
+    return await Pixel._instance._paymentsRef.current.getData();
+  }
   render() {
     const container = document.getElementById(this._options['elementId']);
     if (!container) {
@@ -31610,7 +31635,8 @@ class Pixel {
         hideCardHolderName: this._options['hideCardHolderName'],
         publicKey: this._options['publicKey'],
         clientSecret: this._options['clientSecret'],
-        selectedPaymentMethods: this._options['paymentMethods']
+        selectedPaymentMethods: this._options['paymentMethods'],
+        ref: this._paymentsRef
       }, this._options.beforePaymentComplete && {
         onBeforePaymentComplete: this.handleBeforePaymentComplete.bind(this)
       }, this._options.afterPaymentComplete && {
@@ -31623,6 +31649,8 @@ class Pixel {
     }));
   }
 }
+_Pixel = Pixel;
+Pixel._instance = null;
 window.Pixel = Pixel;
 /* harmony default export */ const pixel = ((/* unused pure expression or super */ null && (Pixel)));
 ;// CONCATENATED MODULE: ./src/index.ts

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "paymob-pixel-alpha",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "keywords": ["paymob","pixel","paymob-pixel"],
   "main": "./main.js",
+  "license": "MIT",
   "homepage": "https://developers.paymob.com",
   "author": "Paymob <support@paymob.com> (https://developers.paymob.com)",
   "exports": {

package/styles.css

@@ -612,6 +612,10 @@ video {
   visibility: hidden;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }

package/close-icon.371f61902d3cf35dc76286080a72af1f.svg

@@ -1,19 +0,0 @@
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import * as React from "react";
-var SvgCloseIcon = function SvgCloseIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 800,
-    height: 800,
-    fill: "none",
-    viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "#667085",
-    fillRule: "evenodd",
-    d: "M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414",
-    clipRule: "evenodd"
-  })));
-};
-export { SvgCloseIcon as ReactComponent };
-export default "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUuMjkyODkgNS4yOTI4OUM1LjY4MzQyIDQuOTAyMzcgNi4zMTY1OCA0LjkwMjM3IDYuNzA3MTEgNS4yOTI4OUwxMiAxMC41ODU4TDE3LjI5MjkgNS4yOTI4OUMxNy42ODM0IDQuOTAyMzcgMTguMzE2NiA0LjkwMjM3IDE4LjcwNzEgNS4yOTI4OUMxOS4wOTc2IDUuNjgzNDIgMTkuMDk3NiA2LjMxNjU4IDE4LjcwNzEgNi43MDcxMUwxMy40MTQyIDEyTDE4LjcwNzEgMTcuMjkyOUMxOS4wOTc2IDE3LjY4MzQgMTkuMDk3NiAxOC4zMTY2IDE4LjcwNzEgMTguNzA3MUMxOC4zMTY2IDE5LjA5NzYgMTcuNjgzNCAxOS4wOTc2IDE3LjI5MjkgMTguNzA3MUwxMiAxMy40MTQyTDYuNzA3MTEgMTguNzA3MUM2LjMxNjU4IDE5LjA5NzYgNS42ODM0MiAxOS4wOTc2IDUuMjkyODkgMTguNzA3MUM0LjkwMjM3IDE4LjMxNjYgNC45MDIzNyAxNy42ODM0IDUuMjkyODkgMTcuMjkyOUwxMC41ODU4IDEyTDUuMjkyODkgNi43MDcxMUM0LjkwMjM3IDYuMzE2NTggNC45MDIzNyA1LjY4MzQyIDUuMjkyODkgNS4yOTI4OVoiIGZpbGw9IiM2NjcwODUiLz4KPC9zdmc+";