ordering-components-external 13.2.32 → 13.2.34

package/src/components/PaymentOptionStripeDirect/index.js

@@ -1,116 +1,116 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useSession } from '../../contexts/SessionContext'
-import { useApi } from '../../contexts/ApiContext'
-import { useWebsocket } from '../../contexts/WebsocketContext'
-
-/**
- * Component to manage payment option stripe direct behavior without UI component
- */
-export const PaymentOptionStripeDirect = (props) => {
-  const {
-    UIComponent
-  } = props
-
-  const [ordering] = useApi()
-  const socket = useWebsocket()
-  const [{ token }] = useSession()
-  /**
-   * save stripe public key
-   */
-  const [stripePK, setStripePK] = useState(null)
-  /**
-   * Save client id used in stripe
-   */
-  const [requirements, setRequirements] = useState(null)
-
-  /**
-   * Method to get stripe credentials from API
-   */
-  const getCredentials = async () => {
-    // Replace for a sdk method
-    const response = await fetch(
-      `${ordering.root}/payments/stripe/credentials`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'X-App-X': ordering.appId,
-          'X-Socket-Id-X': socket?.getId()
-        }
-      }
-    )
-    const { result: { publishable } } = await response.json()
-    setStripePK(publishable)
-  }
-
-  /**
-   * Method to get client id for create stripe payment method
-   */
-  const getRequirements = async () => {
-    // Replace for a sdk method
-    const response = await fetch(
-      `${ordering.root}/payments/stripe/requirements?type=add_card`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'X-App-X': ordering.appId,
-          'X-Socket-Id-X': socket?.getId()
-        }
-      }
-    )
-    const { result } = await response.json()
-    setRequirements(result)
-  }
-
-  useEffect(() => {
-    if (!token) return
-    getCredentials()
-    getRequirements()
-  }, [token])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          stripeKey={stripePK}
-          clientSecret={requirements}
-        />
-      )}
-    </>
-  )
-}
-
-PaymentOptionStripeDirect.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType,
-  /**
-   * Components types before payment option stripe direct
-   * Array of type components, the parent props will pass to these components
-   */
-  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Components types after payment option stripe direct
-   * Array of type components, the parent props will pass to these components
-   */
-  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Elements before payment option stripe direct
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  beforeElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Elements after payment option stripe direct
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  afterElements: PropTypes.arrayOf(PropTypes.element)
-}
-
-PaymentOptionStripeDirect.defaultProps = {
-  beforeComponents: [],
-  afterComponents: [],
-  beforeElements: [],
-  afterElements: []
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useSession } from '../../contexts/SessionContext'
+import { useApi } from '../../contexts/ApiContext'
+import { useWebsocket } from '../../contexts/WebsocketContext'
+
+/**
+ * Component to manage payment option stripe direct behavior without UI component
+ */
+export const PaymentOptionStripeDirect = (props) => {
+  const {
+    UIComponent
+  } = props
+
+  const [ordering] = useApi()
+  const socket = useWebsocket()
+  const [{ token }] = useSession()
+  /**
+   * save stripe public key
+   */
+  const [stripePK, setStripePK] = useState(null)
+  /**
+   * Save client id used in stripe
+   */
+  const [requirements, setRequirements] = useState(null)
+
+  /**
+   * Method to get stripe credentials from API
+   */
+  const getCredentials = async () => {
+    // Replace for a sdk method
+    const response = await fetch(
+      `${ordering.root}/payments/stripe/credentials`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'X-App-X': ordering.appId,
+          'X-Socket-Id-X': socket?.getId()
+        }
+      }
+    )
+    const { result: { publishable } } = await response.json()
+    setStripePK(publishable)
+  }
+
+  /**
+   * Method to get client id for create stripe payment method
+   */
+  const getRequirements = async () => {
+    // Replace for a sdk method
+    const response = await fetch(
+      `${ordering.root}/payments/stripe/requirements?type=add_card`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'X-App-X': ordering.appId,
+          'X-Socket-Id-X': socket?.getId()
+        }
+      }
+    )
+    const { result } = await response.json()
+    setRequirements(result)
+  }
+
+  useEffect(() => {
+    if (!token) return
+    getCredentials()
+    getRequirements()
+  }, [token])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          stripeKey={stripePK}
+          clientSecret={requirements}
+        />
+      )}
+    </>
+  )
+}
+
+PaymentOptionStripeDirect.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType,
+  /**
+   * Components types before payment option stripe direct
+   * Array of type components, the parent props will pass to these components
+   */
+  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Components types after payment option stripe direct
+   * Array of type components, the parent props will pass to these components
+   */
+  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Elements before payment option stripe direct
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  beforeElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Elements after payment option stripe direct
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  afterElements: PropTypes.arrayOf(PropTypes.element)
+}
+
+PaymentOptionStripeDirect.defaultProps = {
+  beforeComponents: [],
+  afterComponents: [],
+  beforeElements: [],
+  afterElements: []
+}

package/src/components/PaymentOptionStripeLink/index.js

@@ -1,101 +1,101 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useLanguage } from '../../contexts/LanguageContext'
-import { useApi } from '../../contexts/ApiContext'
-import { useToast, ToastType } from '../../contexts/ToastContext'
-import { useSession } from '../../contexts/SessionContext'
-
-/**
- * Component to manage payment option stripe link behavior UI component
- */
-export const PaymentOptionStripeLink = (props) => {
-  const {
-    UIComponent,
-    paymentURL,
-    cartTotal
-  } = props
-
-  const [ordering] = useApi()
-  const [{ token }] = useSession()
-  const [, t] = useLanguage()
-  const [, { showToast }] = useToast()
-
-  const [stripeLinkState, setStripeLinkState] = useState({ loading: true, error: null, paymentURL: null })
-  const [userInfo, setUserInfo] = useState({})
-
-  const handleChangeUserInfo = (changes) => {
-    setUserInfo({ ...userInfo, ...changes })
-  }
-
-  const handleSendStripeLink = async (type, callback) => {
-    try {
-      setStripeLinkState({ ...stripeLinkState, loading: true })
-      const customProviders = ['pizzahutstaging', 'pizzahutmexico']
-      const data = {
-        type,
-        provider: customProviders.includes(ordering?.project) ? 'custom' : 'twilio',
-        country_phone_code: userInfo.country_phone_code,
-        cellphone: userInfo.cellphone,
-        payment_url: paymentURL,
-        user: {
-          name: userInfo?.name,
-          lastname: userInfo?.lastname
-        },
-        cart: {
-          total: cartTotal ?? 0
-        },
-        message: t('LINK_TO_PAY_MESSAGE',
-          'Hello there _name_ _lastname_, click on the following link to complete the payment: _link_')
-          .replace('_name_', userInfo?.name)
-          .replace('_lastname_', userInfo?.lastname)
-          .replace('_link_', paymentURL)
-      }
-      const response = await fetch(`${ordering.root}/text_messages/send`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-          'X-App-X': ordering.appId
-        },
-        body: JSON.stringify(data)
-      })
-      const { result, error } = await response.json()
-      if (error) {
-        setStripeLinkState({ ...stripeLinkState, loading: false, error: result })
-        return
-      }
-      setStripeLinkState({ ...stripeLinkState, loading: false })
-      callback && callback()
-      showToast(ToastType.Success, t('MESSAGE_SENT_SUCCESSFULLY', 'The link has been sent'))
-    } catch (error) {
-      setStripeLinkState({ ...stripeLinkState, loading: false, error: [error.message] })
-    }
-  }
-
-  useEffect(() => {
-    if (!paymentURL) return
-    setStripeLinkState({ ...stripeLinkState, loading: false, paymentURL })
-  }, [paymentURL])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          userInfo={userInfo}
-          stripeLinkState={stripeLinkState}
-          setStripeLinkState={setStripeLinkState}
-          handleSendStripeLink={handleSendStripeLink}
-          handleChangeUserInfo={handleChangeUserInfo}
-        />
-      )}
-    </>
-  )
-}
-
-PaymentOptionStripeLink.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useLanguage } from '../../contexts/LanguageContext'
+import { useApi } from '../../contexts/ApiContext'
+import { useToast, ToastType } from '../../contexts/ToastContext'
+import { useSession } from '../../contexts/SessionContext'
+
+/**
+ * Component to manage payment option stripe link behavior UI component
+ */
+export const PaymentOptionStripeLink = (props) => {
+  const {
+    UIComponent,
+    paymentURL,
+    cartTotal
+  } = props
+
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [, t] = useLanguage()
+  const [, { showToast }] = useToast()
+
+  const [stripeLinkState, setStripeLinkState] = useState({ loading: true, error: null, paymentURL: null })
+  const [userInfo, setUserInfo] = useState({})
+
+  const handleChangeUserInfo = (changes) => {
+    setUserInfo({ ...userInfo, ...changes })
+  }
+
+  const handleSendStripeLink = async (type, callback) => {
+    try {
+      setStripeLinkState({ ...stripeLinkState, loading: true })
+      const customProviders = ['pizzahutstaging', 'pizzahutmexico']
+      const data = {
+        type,
+        provider: customProviders.includes(ordering?.project) ? 'custom' : 'twilio',
+        country_phone_code: userInfo.country_phone_code,
+        cellphone: userInfo.cellphone,
+        payment_url: paymentURL,
+        user: {
+          name: userInfo?.name,
+          lastname: userInfo?.lastname
+        },
+        cart: {
+          total: cartTotal ?? 0
+        },
+        message: t('LINK_TO_PAY_MESSAGE',
+          'Hello there _name_ _lastname_, click on the following link to complete the payment: _link_')
+          .replace('_name_', userInfo?.name)
+          .replace('_lastname_', userInfo?.lastname)
+          .replace('_link_', paymentURL)
+      }
+      const response = await fetch(`${ordering.root}/text_messages/send`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+          'X-App-X': ordering.appId
+        },
+        body: JSON.stringify(data)
+      })
+      const { result, error } = await response.json()
+      if (error) {
+        setStripeLinkState({ ...stripeLinkState, loading: false, error: result })
+        return
+      }
+      setStripeLinkState({ ...stripeLinkState, loading: false })
+      callback && callback()
+      showToast(ToastType.Success, t('MESSAGE_SENT_SUCCESSFULLY', 'The link has been sent'))
+    } catch (error) {
+      setStripeLinkState({ ...stripeLinkState, loading: false, error: [error.message] })
+    }
+  }
+
+  useEffect(() => {
+    if (!paymentURL) return
+    setStripeLinkState({ ...stripeLinkState, loading: false, paymentURL })
+  }, [paymentURL])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          userInfo={userInfo}
+          stripeLinkState={stripeLinkState}
+          setStripeLinkState={setStripeLinkState}
+          handleSendStripeLink={handleSendStripeLink}
+          handleChangeUserInfo={handleChangeUserInfo}
+        />
+      )}
+    </>
+  )
+}
+
+PaymentOptionStripeLink.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType
+}

package/src/components/PaymentOptionStripeRedirect/StripeRedirectForm/index.js

@@ -1,71 +1,71 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-/**
- * Component to manage stripe redirect form behavior without UI component
- */
-export const StripeRedirectForm = (props) => {
-  const {
-    UIComponent,
-    handleStripeRedirect
-  } = props
-
-  /**
-   * Method to handle all workflow about stripe redirect page
-   * @param {Object} param0 object with name, email and paydata from stripe form
-   */
-  const handleSubmitPaymentMethod = async ({ type, name, email }) => {
-    handleStripeRedirect && handleStripeRedirect({
-      type,
-      owner: {
-        name,
-        email
-      }
-    })
-  }
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          handleSubmitPaymentMethod={handleSubmitPaymentMethod}
-        />
-      )}
-    </>
-  )
-}
-
-StripeRedirectForm.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType,
-  /**
-   * Components types before stripe redirect form
-   * Array of type components, the parent props will pass to these components
-   */
-  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Components types after stripe redirect form
-   * Array of type components, the parent props will pass to these components
-   */
-  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Elements before stripe redirect form
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  beforeElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Elements after stripe redirect form
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  afterElements: PropTypes.arrayOf(PropTypes.element)
-}
-
-StripeRedirectForm.defaultProps = {
-  beforeComponents: [],
-  afterComponents: [],
-  beforeElements: [],
-  afterElements: []
-}
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * Component to manage stripe redirect form behavior without UI component
+ */
+export const StripeRedirectForm = (props) => {
+  const {
+    UIComponent,
+    handleStripeRedirect
+  } = props
+
+  /**
+   * Method to handle all workflow about stripe redirect page
+   * @param {Object} param0 object with name, email and paydata from stripe form
+   */
+  const handleSubmitPaymentMethod = async ({ type, name, email }) => {
+    handleStripeRedirect && handleStripeRedirect({
+      type,
+      owner: {
+        name,
+        email
+      }
+    })
+  }
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          handleSubmitPaymentMethod={handleSubmitPaymentMethod}
+        />
+      )}
+    </>
+  )
+}
+
+StripeRedirectForm.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType,
+  /**
+   * Components types before stripe redirect form
+   * Array of type components, the parent props will pass to these components
+   */
+  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Components types after stripe redirect form
+   * Array of type components, the parent props will pass to these components
+   */
+  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Elements before stripe redirect form
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  beforeElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Elements after stripe redirect form
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  afterElements: PropTypes.arrayOf(PropTypes.element)
+}
+
+StripeRedirectForm.defaultProps = {
+  beforeComponents: [],
+  afterComponents: [],
+  beforeElements: [],
+  afterElements: []
+}