react-native-moyasar-sdk/lib/module/views/stc_pay/stc_pay_phone_number.js

Official React Native Moyasar SDK - Integrate Credit Cards, Apple Pay, Samsung Pay, and STC Pay with simple interfaces for a seamless payment experience in your React Native app

"use strict";

import { useEffect, useState } from 'react';
import { View, TextInput, Text, StyleSheet, KeyboardAvoidingView, ScrollView, TouchableOpacity, Platform, useColorScheme, ActivityIndicator } from 'react-native';
import { debugLog } from "../../helpers/debug_log.js";
import { isArabicLang, getConfiguredLocalizations } from "../../localizations/i18n.js";
import { StcPayService } from "../../services/stc_pay_service.js";
import { formatAmount, toMajor } from "../../helpers/currency_util.js";
import { mapArabicNumbers } from "../../helpers/arabic_numbers_mapper.js";
import { formatMobileNumber } from "../../helpers/formatters.js";
import { StcPayOtp } from "./stc_pay_otp.js";
import { SaudiRiyal } from "../../assets/saudi_riyal.js";

// TODO: Modify to a better approach rather than global variable
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const stcPayService = new StcPayService();
let formattedAmount;
// TODO: Move this to a helper function to be reusable with CC
function getFormattedAmount(amount, currency) {
  if (!formattedAmount) {
    return formattedAmount = formatAmount(amount, currency);
  }
  return formattedAmount;
}
export function StcPay({
  paymentConfig,
  onPaymentResult,
  style: customStyle
}) {
  useEffect(() => {
    debugLog('Moyasar SDK: stc pay view mounted');
    return () => {
      debugLog('Moyasar SDK: stc pay view unmounted');
    };
  }, []);
  const {
    t
  } = getConfiguredLocalizations();
  const isLightMode = useColorScheme() === 'light';
  const [mobileNumber, setMobileNumber] = useState('');
  const [mobileNumberError, setMobileNumberError] = useState(null);
  const [isOtpVisible, setIsOtpVisible] = useState(false);
  const [isPaymentInProgress, setIsPaymentInProgress] = useState(false);
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  useEffect(() => {
    setIsButtonDisabled(!!stcPayService.phoneNumberValidator.validate(mobileNumber) || isPaymentInProgress);
  }, [mobileNumber, isPaymentInProgress]);
  return /*#__PURE__*/_jsx(KeyboardAvoidingView, {
    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
    children: /*#__PURE__*/_jsx(ScrollView, {
      contentContainerStyle: defaultStyle.scrollView,
      children: isOtpVisible ? /*#__PURE__*/_jsx(StcPayOtp, {
        onPaymentResult: onPaymentResult,
        style: customStyle,
        stcPayService: stcPayService
      }) : /*#__PURE__*/_jsxs(View, {
        style: [defaultStyle.container, customStyle?.container],
        children: [/*#__PURE__*/_jsx(Text, {
          style: [{
            ...defaultStyle.title,
            color: isLightMode ? 'black' : 'white'
          }, customStyle?.title],
          children: t('moyasarTranslation:phoneNumberTitle')
        }), /*#__PURE__*/_jsx(View, {
          style: defaultStyle.inputSubContainer,
          children: /*#__PURE__*/_jsx(TextInput, {
            style: [{
              ...defaultStyle.input,
              color: isLightMode ? 'black' : 'white'
            }, customStyle?.textInputs],
            value: formatMobileNumber({
              cleanedNumber: mobileNumber
            }),
            onChangeText: value => {
              const cleanNumber = value.replace(/\s/g, '').replace(/[^\d٠-٩]/gi, '');
              const mappedCleanNumbers = mapArabicNumbers(cleanNumber);
              setMobileNumber(mappedCleanNumbers);
              setMobileNumberError(stcPayService.phoneNumberValidator.visualValidate(mappedCleanNumbers));
            },
            placeholder: '05X XXX XXXX',
            placeholderTextColor: customStyle?.textInputsPlaceholderColor,
            keyboardType: "numeric",
            editable: !isPaymentInProgress,
            maxLength: 12
          })
        }), /*#__PURE__*/_jsx(Text, {
          style: [defaultStyle.errorText, customStyle?.errorText],
          children: mobileNumberError
        }), /*#__PURE__*/_jsx(View, {
          style: defaultStyle.buttonContainer,
          children: /*#__PURE__*/_jsx(TouchableOpacity, {
            style: [defaultStyle.button, customStyle?.paymentButton, isButtonDisabled && {
              opacity: 0.5
            }],
            onPress: async () => {
              setIsPaymentInProgress(true);
              const showOtp = await stcPayService.beginStcPayment(paymentConfig, mobileNumber, onPaymentResult);
              setIsPaymentInProgress(false);
              setIsOtpVisible(showOtp);
            },
            disabled: isButtonDisabled,
            children: isPaymentInProgress ? /*#__PURE__*/_jsx(ActivityIndicator, {
              size: "small",
              color: customStyle?.activityIndicatorColor ?? '#ffffff'
            }) : paymentConfig.currency === 'SAR' ?
            /*#__PURE__*/
            // TODO: Remove this temp solution when the new symbol is supported by RN dependencies
            _jsxs(View, {
              style: [defaultStyle.inputSubContainer, {
                alignItems: 'center'
              }],
              children: [/*#__PURE__*/_jsx(Text, {
                style: [defaultStyle.buttonText, {
                  marginEnd: 5
                }, customStyle?.paymentButtonText],
                children: `${t('moyasarTranslation:pay')}`
              }), /*#__PURE__*/_jsxs(View, {
                style: [defaultStyle.inputSubContainer, {
                  alignItems: 'center',
                  direction: 'ltr'
                }],
                children: [/*#__PURE__*/_jsx(SaudiRiyal, {
                  height: "16",
                  width: "16",
                  style: customStyle?.paymentButtonText
                }), /*#__PURE__*/_jsx(Text, {
                  style: [defaultStyle.buttonText, {
                    marginStart: 4
                  }, customStyle?.paymentButtonText],
                  children: `${toMajor(paymentConfig.amount, 'SAR')}`
                })]
              })]
            }) : /*#__PURE__*/_jsxs(Text, {
              style: [
              // TODO: Make this component reusable with CC
              defaultStyle.buttonText, customStyle?.paymentButtonText],
              children: [t('moyasarTranslation:pay'), ' ', getFormattedAmount(paymentConfig.amount, paymentConfig.currency)]
            })
          })
        })]
      })
    })
  });
}
const defaultStyle = StyleSheet.create({
  scrollView: {
    maxWidth: '100%',
    flexGrow: 1,
    justifyContent: 'space-between',
    flexDirection: 'column'
  },
  container: {
    flex: 1,
    padding: 25
  },
  title: {
    fontSize: 18,
    marginStart: 4,
    marginTop: 4,
    textAlign: 'left',
    direction: isArabicLang() ? 'rtl' : 'ltr'
  },
  inputSubContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    direction: isArabicLang() ? 'rtl' : 'ltr'
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    marginTop: 10
  },
  input: {
    width: '100%',
    fontSize: 18,
    textAlign: isArabicLang() ? 'right' : 'left',
    borderWidth: 1.25,
    borderColor: '#DCDCDC',
    borderRadius: 7,
    margin: 8,
    padding: 10
  },
  button: {
    minWidth: '100%',
    justifyContent: 'center',
    backgroundColor: '#480986',
    borderRadius: 9,
    padding: 10,
    height: 50
  },
  buttonText: {
    color: 'white',
    fontSize: 20,
    fontWeight: '500',
    textAlign: 'center'
  },
  errorText: {
    color: 'red',
    fontSize: 12,
    textAlign: 'left',
    direction: isArabicLang() ? 'rtl' : 'ltr'
  }
});
//# sourceMappingURL=stc_pay_phone_number.js.map