paymob-pixel-alpha 1.1.68 → 1.1.69

package/main.js

@@ -24082,42 +24082,47 @@ const PhoneInput_PhoneInput = /*#__PURE__*/(/* unused pure expression or super *
     name,
     label,
     labelHint,
-    defaultPhoneNumber,
+    phoneNumber,
+    country,
     placeholder,
     disabled,
     autoFocus = false,
     error,
     onChangeHandler,
     onCountryChange,
-    defaultCountry = 'eg',
     disableSelectCountry,
     onFocus,
     onBlur,
     canToggleToTextInput = false,
     autoComplete = false
   } = props;
-  const [selectedCountry, setSelectedCountry] = useState(Countries[defaultCountry] || Countries.eg);
+  const isPhoneControlled = phoneNumber !== undefined;
+  const isCountryControlled = country !== undefined;
+  const countryIso2 = Countries[country || 'eg'];
+  const [internalCountry, setInternalCountry] = useState(countryIso2);
+  const [internalValue, setInternalValue] = useState(phoneNumber || '');
   const [showDropdown, setShowDropdown] = useState(false);
-  const [value, setValue] = useState(defaultPhoneNumber || '');
+  const selectedCountry = isCountryControlled ? countryIso2 : internalCountry;
+  const value = (isPhoneControlled ? phoneNumber : internalValue).replace(selectedCountry.countryCode, '');
   const toggleDropdown = () => {
     setShowDropdown(prevState => !prevState);
   };
   const selectCountry = country => {
-    setSelectedCountry(country);
+    if (!isCountryControlled) setInternalCountry(country);
     setShowDropdown(false);
-    onChangeHandler == null || onChangeHandler(country.countryCode + value, country.countryIso2);
+    onChangeHandler == null || onChangeHandler(country.countryCode + value, country.countryIso2, value);
     onCountryChange && onCountryChange(country.countryIso2);
   };
   const handlePhoneChange = e => {
-    const value = e.target.value;
-    if (value === '') {
-      setValue('');
-      onChangeHandler('', selectedCountry.countryIso2);
+    const newValue = e.target.value;
+    if (newValue === '') {
+      if (!isPhoneControlled) setInternalValue('');
+      onChangeHandler == null || onChangeHandler('', selectedCountry.countryIso2, '');
       return;
     }
-    if (!/^[0-9]+$/.test(value) && !canToggleToTextInput) return;
-    setValue(value);
-    onChangeHandler(selectedCountry.countryCode + value, selectedCountry.countryIso2);
+    if (!/^[0-9]+$/.test(newValue) && !canToggleToTextInput) return;
+    if (!isPhoneControlled) setInternalValue(newValue);
+    onChangeHandler == null || onChangeHandler(selectedCountry.countryCode + newValue, selectedCountry.countryIso2, newValue);
   };
   return /*#__PURE__*/_jsxs("div", {
     className: styles['container'],
@@ -24209,7 +24214,7 @@ const PhoneField_PhoneField = props => {
     onChangeHandler,
     onApplyHandler,
     onCountryChange,
-    defaultCountry,
+    country,
     applyBtnText,
     errorMsg,
     closeOnSubmit = true
@@ -24238,7 +24243,7 @@ const PhoneField_PhoneField = props => {
       ref: inputRef,
       name: fieldName,
       placeholder: placeholder,
-      defaultCountry: defaultCountry,
+      country: country,
       onChangeHandler: handleChange,
       onCountryChange: onCountryChange,
       onFocus: handleFocus,
@@ -50431,8 +50436,7 @@ const Modal_Modal = props => {
   onCloseHandler && useClickOutside_useClickOutside(dialogRef, onCloseHandler, open && closeOnClickOutside, true);
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [!isTopLayer && open && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: modal_module['modal__overlay'],
-      onClick: closeOnClickOutside ? onCloseHandler : undefined
+      className: modal_module['modal__overlay']
     }), /*#__PURE__*/(0,jsx_runtime.jsxs)("dialog", {
       ref: dialogRef,
       "data-modal-is-mobile": isMobile,
@@ -59959,7 +59963,7 @@ const FiltersBar_FiltersBar = ({
       placeholder: placeholder,
       horizontalPlacement: isMobile ? "center" : "inline_auto",
       verticalPlacement: "auto",
-      defaultCountry: COUNTRIES_INFO[country || "EGY"].country_code_iso2.toLowerCase(),
+      country: COUNTRIES_INFO[country || "EGY"].country_code_iso2.toLowerCase(),
       onChangeHandler: phone => handleFieldsErrors(phone, id, validations),
       errorMsg: fieldsErrors[id],
       onApplyHandler: onApply
@@ -70607,7 +70611,7 @@ const ContactForm = /*#__PURE__*/(/* unused pure expression or super */ null &&
       validate: value => {
         if (!value) return !phoneRequired || t('PHONE_IS_REQUIRED');
         const validPhone = parseMax(countryCode + value);
-        return (validPhone == null ? void 0 : validPhone.getType()) === 'MOBILE' && (validPhone == null ? void 0 : validPhone.isValid()) || t('PHONE_NOT_VALID');
+        return ((validPhone == null ? void 0 : validPhone.getType()) === 'MOBILE' || (validPhone == null ? void 0 : validPhone.getType()) === 'FIXED_LINE_OR_MOBILE') && (validPhone == null ? void 0 : validPhone.isValid()) || t('PHONE_NOT_VALID');
       }
     });
   }, []);
@@ -79070,10 +79074,13 @@ const ClickOTPModal = ({
     setOtp('');
   };
   const handleSendToEmail = async () => {
-    setIsLoading(true);
-    await onSendToEmail();
-    setIsLoading(false);
-    setOtp('');
+    try {
+      setIsLoading(true);
+      await onSendToEmail();
+    } catch (_unused) {} finally {
+      setIsLoading(false);
+      setOtp('');
+    }
   };
   const title = _type === 'phone' ? isPhoneVerified ? t('WELCOME_BACK') : t('VERIFY_YOUR_ACCOUNT') : t('CONFIRM_ITS_YOU');
   const text = (_type === 'phone' ? `${t('LOGGED_IN_AS')} ${email} \n` : '') + `${t('PLEASE_ENTER_CODE_TO_VERIFY', {
@@ -81589,14 +81596,15 @@ function IframeCard(props) {
     expiryRegister,
     cvcRegister,
     getValues,
-    cardType
+    cardType,
+    watch
   } = useHookForm({
     isIframe: true,
     hasOmanNetIntegration: hasOmanNetIntegration || integrationType === 'tokenization',
     countryName: country
   });
   const timeoutIdRef = useRef();
-  const cardNum = getValues('number');
+  const cardNum = watch('number');
   const isValidCard = valid.number(cardNum).isValid;
   const currentIntegrationId = hasOmanNetIntegration && (cardType === CARD_TYPES.OMAN || cardType === CARD_TYPES.MAAL) ? subType.integrationId : integrationId;
   const currentPaymentToken = hasOmanNetIntegration && (cardType === CARD_TYPES.OMAN || cardType === CARD_TYPES.MAAL) ? subType.paymentToken : paymentToken;
@@ -81777,6 +81785,8 @@ function IframeCard(props) {
             tenure
           }).then(() => {
             isSubmittingRef.current = false;
+          }).catch(() => {
+            isSubmittingRef.current = false;
           });
         }
         setShouldSubmitData(false);
@@ -82796,7 +82806,7 @@ function SavedCardsViewTwo(props) {
     if (loading) return true;
     if (isAddingCard) return false;
     if (isSplitPaymentsView && !splitAmount) return true;
-    if (showCvvInput) {
+    if (showCvvInput && !(selectedCard != null && selectedCard.networkToken)) {
       const requiredLength = isAmexCardSelected ? AMEX_CVV_LENGTH : CVV_LENGTH;
       return selectedCardCvvLength !== requiredLength;
     }
@@ -83679,7 +83689,8 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
   publicKey,
   discounts,
   onPaymentCancel,
-  isInstantRefundActive
+  isInstantRefundActive,
+  onPaymentStateChanged
 }, ref) => {
   var _customStyle$discount, _customStyle$containe, _customStyle$containe2, _customStyle$button, _customStyle$containe3, _customStyle$labelTex, _customStyle$buttonTe, _customStyle$placehol, _customStyle$discount2, _customStyle$discount3, _customStyle$errorTex, _customStyle$errorTex2, _customStyle$errorTex3, _customStyle$errorTex4, _customStyle$hintText, _customStyle$labelTex2, _customStyle$buttonTe2, _customStyle$labelTex3, _customStyle$buttonTe3, _customStyle$buttonTe4, _customStyle$buttonTe5;
   const {
@@ -83990,6 +84001,20 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
       previousValidationRef.current = isCardValid;
     }
   }, [isCardValid, shouldDisablePayBtn]);
+  (0,react.useEffect)(() => {
+    var _instantRefundData$in, _instantRefundData$el;
+    if (!instantRefundData || !totalAmount || !isInstantRefundActive) return;
+    onPaymentStateChanged == null || onPaymentStateChanged({
+      type: 'INSTANT_REFUND_TOGGLE',
+      payload: {
+        enabled: isInstantRefundChecked,
+        instantRefundAmount: (_instantRefundData$in = instantRefundData == null ? void 0 : instantRefundData.instant_refund_fees) != null ? _instantRefundData$in : '',
+        eligible: (_instantRefundData$el = instantRefundData == null ? void 0 : instantRefundData.eligible) != null ? _instantRefundData$el : false,
+        totalAmount,
+        originalAmount: payment == null ? void 0 : payment.amount
+      }
+    });
+  }, [isInstantRefundChecked, instantRefundData, totalAmount]);
   (0,react.useImperativeHandle)(ref, () => ({
     handleGenerateToken
   }));
@@ -84446,7 +84471,7 @@ const CardElement = /*#__PURE__*/(0,react.forwardRef)(({
             fontFamily: currencyFontFamily
           },
           children: displayCurrency
-        }), ' ', totalAmount || formattedAmount]
+        }), ' ', amount]
       })]
     }), discountedAmount && /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: "flex justify-between items-center text-green-600",
@@ -96038,7 +96063,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     discounts,
     viewMode,
     displayName,
-    isInstantRefundActive
+    isInstantRefundActive,
+    onPaymentStateChanged
   } = props;
   const {
     t
@@ -96200,7 +96226,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
         publicKey,
         ref: cardRef,
         discounts: discounts == null ? void 0 : discounts.cards,
-        isInstantRefundActive
+        isInstantRefundActive,
+        onPaymentStateChanged
       }) : /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
         children: viewMode === 'list' ? /*#__PURE__*/(0,jsx_runtime.jsx)(ListView, {
           paymentMethods: paymentMethods,
@@ -96221,7 +96248,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           publicKey,
           ref: cardRef,
           discounts: discounts == null ? void 0 : discounts.cards,
-          isInstantRefundActive
+          isInstantRefundActive,
+          onPaymentStateChanged
         }) : /*#__PURE__*/(0,jsx_runtime.jsx)(List_TabView, {
           paymentMethods: paymentMethods,
           customStyle,
@@ -96241,7 +96269,8 @@ const PaymentsList = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
           publicKey,
           ref: cardRef,
           discounts: discounts == null ? void 0 : discounts.cards,
-          isInstantRefundActive
+          isInstantRefundActive,
+          onPaymentStateChanged
         })
       })
     })]
@@ -96465,7 +96494,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
     integrationType,
     discounts,
     viewMode = 'tab',
-    isInstantRefundActive
+    isInstantRefundActive,
+    onPaymentStateChanged
   } = props;
   const [paymentMethod, setPaymentMethod] = (0,react.useState)(payment);
   const styles = getStyles_getStyles(customStyle);
@@ -96485,6 +96515,7 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
             onBeforePaymentComplete,
             onAfterPaymentComplete,
             onCardValidationChanged,
+            onPaymentStateChanged,
             showPaymobLogo,
             hideCardHolderName,
             integrationType,
@@ -96601,7 +96632,8 @@ const Payments_Payments = /*#__PURE__*/(0,react.forwardRef)((props, ref) => {
       integrationType: integrationType,
       discounts: discounts,
       viewMode: viewMode,
-      isInstantRefundActive: isInstantRefundActive
+      isInstantRefundActive: isInstantRefundActive,
+      onPaymentStateChanged: onPaymentStateChanged
     });
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
@@ -97636,6 +97668,11 @@ class Pixel {
       this._options.cardValidationChanged(isValid);
     }
   }
+  handlePaymentStateChanged(state) {
+    if (this._options.paymentStateChanged) {
+      this._options.paymentStateChanged(state);
+    }
+  }
   static getInstance(instanceId, callingMethodName) {
     if (Object.keys(this._instances).length > 1 && !instanceId) {
       throw new Error(`Multiple Pixel instances detected. Please provide an instance ID for the ${callingMethodName || 'requested'} method.`);
@@ -97722,6 +97759,8 @@ class Pixel {
           onPaymentCancel: this.handleOnPaymentCancel.bind(this)
         }, this._options.cardValidationChanged && {
           onCardValidationChanged: this.handleCardValidationChanged.bind(this)
+        }, this._options.paymentStateChanged && {
+          onPaymentStateChanged: this.handlePaymentStateChanged.bind(this)
         }, {
           integrationType: this._integrationType,
           discounts: this._discounts,

package/package.json

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