react-native-moyasar-sdk/lib/module/views/stc_pay/stc_pay_otp.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, TouchableOpacity, useColorScheme, ActivityIndicator } from 'react-native';
import { debugLog } from "../../helpers/debug_log.js";
import { isArabicLang, getConfiguredLocalizations } from "../../localizations/i18n.js";
import { mapArabicNumbers } from "../../helpers/arabic_numbers_mapper.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// TODO: Make this component and it's styles reusable with Stc Pay phone number component and CC
export function StcPayOtp({
  onPaymentResult,
  style: customStyle,
  stcPayService
}) {
  useEffect(() => {
    debugLog('Moyasar SDK: stc pay OTP view mounted');
    return () => {
      debugLog('Moyasar SDK: stc pay OTP view unmounted');
    };
  }, []);
  const {
    t
  } = getConfiguredLocalizations();
  const isLightMode = useColorScheme() === 'light';
  const [otp, setOtp] = useState('');
  const [otpError, setOtpError] = useState(null);
  const [isPaymentInProgress, setIsPaymentInProgress] = useState(false);
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
  useEffect(() => {
    setIsButtonDisabled(!!stcPayService.otpValidator.validate(otp) || isPaymentInProgress);
    // stcPayService is not a changing prop
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [otp, isPaymentInProgress]);
  return /*#__PURE__*/_jsxs(View, {
    style: [defaultStyle.container, customStyle?.container],
    children: [/*#__PURE__*/_jsx(Text, {
      style: [{
        ...defaultStyle.title,
        color: isLightMode ? 'black' : 'white'
      }, customStyle?.title],
      children: t('moyasarTranslation:otpTitle')
    }), /*#__PURE__*/_jsx(View, {
      style: defaultStyle.inputSubContainer,
      children: /*#__PURE__*/_jsx(TextInput, {
        style: [{
          ...defaultStyle.input,
          color: isLightMode ? 'black' : 'white'
        }, customStyle?.textInputs],
        value: otp,
        onChangeText: value => {
          const cleanOtp = value.replace(/\s/g, '').replace(/[^\d٠-٩]/gi, '');
          const mappedCleanOtp = mapArabicNumbers(cleanOtp);
          setOtp(mappedCleanOtp);
          setOtpError(stcPayService.otpValidator.visualValidate(mappedCleanOtp));
        },
        placeholder: 'XXXXXX',
        placeholderTextColor: customStyle?.textInputsPlaceholderColor,
        keyboardType: "numeric",
        editable: !isPaymentInProgress,
        maxLength: 10,
        textContentType: "oneTimeCode",
        autoComplete: "sms-otp"
      })
    }), /*#__PURE__*/_jsx(Text, {
      style: [defaultStyle.errorText, customStyle?.errorText],
      children: otpError
    }), /*#__PURE__*/_jsx(View, {
      style: defaultStyle.buttonContainer,
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        style: [defaultStyle.button, customStyle?.paymentButton, isButtonDisabled && {
          opacity: 0.5
        }],
        onPress: async () => {
          setIsPaymentInProgress(true);
          await stcPayService.submitStcPaymentOtp(otp, onPaymentResult);
          setIsPaymentInProgress(false);
        },
        disabled: isButtonDisabled,
        children: isPaymentInProgress ? /*#__PURE__*/_jsx(ActivityIndicator, {
          size: "small",
          color: customStyle?.activityIndicatorColor ?? '#ffffff'
        }) : /*#__PURE__*/_jsx(Text, {
          style: [
          // TODO: Make this component reusable with CC
          defaultStyle.buttonText, customStyle?.paymentButtonText],
          children: t('moyasarTranslation:otpConfirm')
        })
      })
    })]
  });
}
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_otp.js.map