ordering-components-external 13.2.13 → 13.2.15

package/src/components/ForgotPasswordForm/index.js

@@ -1,180 +1,180 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import { useApi } from '../../contexts/ApiContext'
-import { useConfig } from '../../contexts/ConfigContext'
-import { useLanguage } from '../../contexts/LanguageContext'
-
-/**
- * Component to manage forgot password behavior without UI component
- */
-export const ForgotPasswordForm = (props) => {
-  const {
-    UIComponent,
-    defaultEmail,
-    handleButtonForgotPasswordClick,
-    handleSuccessForgotPassword,
-    handleCustomForgotPasswordClick
-  } = props
-
-  const [ordering] = useApi()
-  const [{ configs }] = useConfig()
-  const [formState, setFormState] = useState({ loading: false, result: { error: false } })
-  const [formData, setFormData] = useState({ email: defaultEmail || '' })
-  const [reCaptchaValue, setReCaptchaValue] = useState(null)
-  const [isReCaptchaEnable, setIsReCaptchaEnable] = useState(false)
-  const [, t] = useLanguage()
-
-  /**
-   * Default fuction for forgot password workflow
-   */
-  const handleForgotPasswordClick = async (data) => {
-    if (isReCaptchaEnable) {
-      if (reCaptchaValue === null) {
-        setFormState({
-          result: {
-            error: true,
-            result: t('RECAPTCHA_VALIDATION_IS_REQUIRED', 'The captcha validation is required')
-          },
-          loading: false
-        })
-        return
-      }
-    }
-    if (handleCustomForgotPasswordClick) {
-      const values = data || formData
-      return handleCustomForgotPasswordClick(values)
-    }
-    try {
-      setFormState({ ...formState, loading: true })
-      const values = data || formData
-      const response = await ordering.users().forgotPassword(values)
-      setFormState({
-        result: response.content,
-        loading: false
-      })
-      if (isReCaptchaEnable && window?.grecaptcha) {
-        window.grecaptcha.reset()
-        setReCaptchaValue(null)
-      }
-      if (!response.content.error) {
-        if (handleSuccessForgotPassword) {
-          handleSuccessForgotPassword(formData.email)
-        }
-      }
-    } catch (err) {
-      setFormState({
-        result: {
-          error: true,
-          result: err.message
-        },
-        loading: false
-      })
-    }
-  }
-
-  /**
-   * Update form data data
-   * @param {EventTarget} e Related HTML event
-   */
-  const hanldeChangeInput = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-  }
-
-  useEffect(() => {
-    setIsReCaptchaEnable(props.isRecaptchaEnable && configs &&
-      Object.keys(configs).length > 0 &&
-      configs?.security_recaptcha_auth?.value === '1')
-  }, [configs])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          formState={formState}
-          formData={formData}
-          hanldeChangeInput={hanldeChangeInput}
-          enableReCaptcha={isReCaptchaEnable}
-          handleReCaptcha={setReCaptchaValue}
-          reCaptchaValue={reCaptchaValue}
-          handleButtonForgotPasswordClick={handleButtonForgotPasswordClick || handleForgotPasswordClick}
-        />
-      )}
-    </>
-  )
-}
-
-ForgotPasswordForm.propTypes = {
-  /**
-   * UI Component, this must be containt all graphic elements and use parent props
-   */
-  UIComponent: PropTypes.elementType,
-  /**
-   * Function to change default forgot password behavior
-   */
-  handleButtonForgotPasswordClick: PropTypes.func,
-  /**
-   * Function to get forgot password success event
-   * @param {string} email Email to which it was sent
-   */
-  handleSuccessForgotPassword: PropTypes.func,
-  /**
-   * Default email to forgot password form
-   */
-  defaultEmail: PropTypes.string,
-  /**
-   * @param {form_data} data
-   * handleCustomClick, function to get click event and return data without default behavior
-   */
-  handleCustomForgotPasswordClick: PropTypes.func,
-  /**
-   * Components types before forgot password form
-   * Array of type components, the parent props will pass to these components
-   */
-  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Components types after forgot password form
-   * Array of type components, the parent props will pass to these components
-   */
-  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
-  /**
-   * Elements before forgot password form
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  beforeElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Elements after forgot password form
-   * Array of HTML/Components elements, these components will not get the parent props
-   */
-  afterElements: PropTypes.arrayOf(PropTypes.element),
-  /**
-   * Url to signup page
-   * Url to create element link to signup page
-   */
-  linkToSignup: PropTypes.string,
-  /**
-   * Url to login page
-   * Url to create element link to login
-   */
-  linkToLogin: PropTypes.string,
-  /**
-   * Element to custom link to signup
-   * You can provide de link element as react router Link or your custom Anchor to signup page
-   */
-  elementLinkToSignup: PropTypes.element,
-  /**
-   * Element to custo link to Login
-   * You can provide de link element as react router Link or your custom Anchor to login page
-   */
-  elementLinkToLogin: PropTypes.element
-}
-
-ForgotPasswordForm.defaultProps = {
-  beforeComponents: [],
-  afterComponents: [],
-  beforeElements: [],
-  afterElements: []
-}
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useApi } from '../../contexts/ApiContext'
+import { useConfig } from '../../contexts/ConfigContext'
+import { useLanguage } from '../../contexts/LanguageContext'
+
+/**
+ * Component to manage forgot password behavior without UI component
+ */
+export const ForgotPasswordForm = (props) => {
+  const {
+    UIComponent,
+    defaultEmail,
+    handleButtonForgotPasswordClick,
+    handleSuccessForgotPassword,
+    handleCustomForgotPasswordClick
+  } = props
+
+  const [ordering] = useApi()
+  const [{ configs }] = useConfig()
+  const [formState, setFormState] = useState({ loading: false, result: { error: false } })
+  const [formData, setFormData] = useState({ email: defaultEmail || '' })
+  const [reCaptchaValue, setReCaptchaValue] = useState(null)
+  const [isReCaptchaEnable, setIsReCaptchaEnable] = useState(false)
+  const [, t] = useLanguage()
+
+  /**
+   * Default fuction for forgot password workflow
+   */
+  const handleForgotPasswordClick = async (data) => {
+    if (isReCaptchaEnable) {
+      if (reCaptchaValue === null) {
+        setFormState({
+          result: {
+            error: true,
+            result: t('RECAPTCHA_VALIDATION_IS_REQUIRED', 'The captcha validation is required')
+          },
+          loading: false
+        })
+        return
+      }
+    }
+    if (handleCustomForgotPasswordClick) {
+      const values = data || formData
+      return handleCustomForgotPasswordClick(values)
+    }
+    try {
+      setFormState({ ...formState, loading: true })
+      const values = data || formData
+      const response = await ordering.users().forgotPassword(values)
+      setFormState({
+        result: response.content,
+        loading: false
+      })
+      if (isReCaptchaEnable && window?.grecaptcha) {
+        window.grecaptcha.reset()
+        setReCaptchaValue(null)
+      }
+      if (!response.content.error) {
+        if (handleSuccessForgotPassword) {
+          handleSuccessForgotPassword(formData.email)
+        }
+      }
+    } catch (err) {
+      setFormState({
+        result: {
+          error: true,
+          result: err.message
+        },
+        loading: false
+      })
+    }
+  }
+
+  /**
+   * Update form data data
+   * @param {EventTarget} e Related HTML event
+   */
+  const hanldeChangeInput = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  useEffect(() => {
+    setIsReCaptchaEnable(props.isRecaptchaEnable && configs &&
+      Object.keys(configs).length > 0 &&
+      configs?.security_recaptcha_auth?.value === '1')
+  }, [configs])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          formState={formState}
+          formData={formData}
+          hanldeChangeInput={hanldeChangeInput}
+          enableReCaptcha={isReCaptchaEnable}
+          handleReCaptcha={setReCaptchaValue}
+          reCaptchaValue={reCaptchaValue}
+          handleButtonForgotPasswordClick={handleButtonForgotPasswordClick || handleForgotPasswordClick}
+        />
+      )}
+    </>
+  )
+}
+
+ForgotPasswordForm.propTypes = {
+  /**
+   * UI Component, this must be containt all graphic elements and use parent props
+   */
+  UIComponent: PropTypes.elementType,
+  /**
+   * Function to change default forgot password behavior
+   */
+  handleButtonForgotPasswordClick: PropTypes.func,
+  /**
+   * Function to get forgot password success event
+   * @param {string} email Email to which it was sent
+   */
+  handleSuccessForgotPassword: PropTypes.func,
+  /**
+   * Default email to forgot password form
+   */
+  defaultEmail: PropTypes.string,
+  /**
+   * @param {form_data} data
+   * handleCustomClick, function to get click event and return data without default behavior
+   */
+  handleCustomForgotPasswordClick: PropTypes.func,
+  /**
+   * Components types before forgot password form
+   * Array of type components, the parent props will pass to these components
+   */
+  beforeComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Components types after forgot password form
+   * Array of type components, the parent props will pass to these components
+   */
+  afterComponents: PropTypes.arrayOf(PropTypes.elementType),
+  /**
+   * Elements before forgot password form
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  beforeElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Elements after forgot password form
+   * Array of HTML/Components elements, these components will not get the parent props
+   */
+  afterElements: PropTypes.arrayOf(PropTypes.element),
+  /**
+   * Url to signup page
+   * Url to create element link to signup page
+   */
+  linkToSignup: PropTypes.string,
+  /**
+   * Url to login page
+   * Url to create element link to login
+   */
+  linkToLogin: PropTypes.string,
+  /**
+   * Element to custom link to signup
+   * You can provide de link element as react router Link or your custom Anchor to signup page
+   */
+  elementLinkToSignup: PropTypes.element,
+  /**
+   * Element to custo link to Login
+   * You can provide de link element as react router Link or your custom Anchor to login page
+   */
+  elementLinkToLogin: PropTypes.element
+}
+
+ForgotPasswordForm.defaultProps = {
+  beforeComponents: [],
+  afterComponents: [],
+  beforeElements: [],
+  afterElements: []
+}

package/src/components/GiftCard/GiftCardOrdersList/index.js

@@ -1,155 +1,155 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useSession } from '../../../contexts/SessionContext'
-import { useApi } from '../../../contexts/ApiContext'
-
-export const GiftCardOrdersList = props => {
-  const {
-    UIComponent,
-    paginationSettings,
-    defaultStatus
-  } = props
-
-  const [ordering] = useApi()
-  const [{ token }] = useSession()
-  const [giftCards, setGiftCards] = useState({ loading: true, list: [], error: null })
-  const [paginationProps, setPaginationProps] = useState({
-    currentPage: (paginationSettings.initialPage && paginationSettings.initialPage >= 1) ? paginationSettings.initialPage - 1 : 0,
-    pageSize: paginationSettings.pageSize ?? 10,
-    totalItems: null,
-    totalPages: null
-  })
-  const [activeStatus, setActiveStatus] = useState(defaultStatus || null)
-
-  /**
-   * Method to get the gift cards from API
-   */
-  const getGiftCards = async (page, pageSize = paginationProps.pageSize) => {
-    setGiftCards({
-      ...giftCards,
-      loading: true
-    })
-    let where = null
-    const conditions = []
-    if (activeStatus) {
-      conditions.push(
-        {
-          attribute: 'status',
-          value: activeStatus
-        }
-      )
-    }
-    if (conditions.length) {
-      where = {
-        conditions,
-        conector: 'AND'
-      }
-    }
-
-    const requestOptions = {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`
-      }
-    }
-    const fetchEndpoint = where
-      ? `${ordering.root}/gift_cards?orderBy=-id&&page=${page}&page_size=${pageSize}&&where=${JSON.stringify(where)}`
-      : `${ordering.root}/gift_cards?orderBy=-id&&page=${page}&page_size=${pageSize}`
-
-    return await fetch(fetchEndpoint, requestOptions)
-  }
-
-  const loadMoreOrders = async () => {
-    setGiftCards({
-      ...giftCards,
-      loading: true
-    })
-    try {
-      const response = await getGiftCards(paginationProps.currentPage + 1)
-      const { error, result, pagination } = await response.json()
-      if (!error) {
-        setPaginationProps({
-          currentPage: pagination.current_page,
-          pageSize: pagination.page_size === 0 ? paginationProps.pageSize : pagination.page_size,
-          totalPages: pagination.total_pages,
-          totalItems: pagination.total,
-          from: pagination.from,
-          to: pagination.to
-        })
-      }
-      setGiftCards({
-        loading: false,
-        list: error ? giftCards.list : giftCards.list.concat(result),
-        error: error ? result : null
-      })
-    } catch (err) {
-      setGiftCards({
-        ...giftCards,
-        loading: false,
-        error: [err.message]
-      })
-    }
-  }
-
-  const goToPage = async page => {
-    setGiftCards({
-      ...giftCards,
-      loading: true
-    })
-    try {
-      const response = await getGiftCards(page)
-      const { error, result, pagination } = await response.json()
-      if (!error) {
-        setPaginationProps({
-          currentPage: pagination.current_page,
-          pageSize: pagination.page_size === 0 ? paginationProps.pageSize : pagination.page_size,
-          totalPages: pagination.total_pages,
-          totalItems: pagination.total,
-          from: pagination.from,
-          to: pagination.to
-        })
-      }
-      setGiftCards({
-        loading: false,
-        list: error ? [] : result,
-        error: error ? result : null
-      })
-    } catch (err) {
-      setGiftCards({
-        ...giftCards,
-        loading: false,
-        error: [err.message]
-      })
-    }
-  }
-
-  useEffect(() => {
-    goToPage(1)
-  }, [])
-
-  return (
-    <>
-      {UIComponent && (
-        <UIComponent
-          {...props}
-          giftCards={giftCards}
-          paginationProps={paginationProps}
-          activeStatus={activeStatus}
-          setActiveStatus={setActiveStatus}
-          loadMoreOrders={loadMoreOrders}
-          goToPage={goToPage}
-        />
-      )}
-    </>
-  )
-}
-GiftCardOrdersList.propTypes = {
-  /**
- * UI Component, this must be containt all graphic elements and use parent props
- */
-  UIComponent: PropTypes.elementType
-}
-GiftCardOrdersList.defaultProps = {
-  paginationSettings: { initialPage: 1, pageSize: 10 }
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useSession } from '../../../contexts/SessionContext'
+import { useApi } from '../../../contexts/ApiContext'
+
+export const GiftCardOrdersList = props => {
+  const {
+    UIComponent,
+    paginationSettings,
+    defaultStatus
+  } = props
+
+  const [ordering] = useApi()
+  const [{ token }] = useSession()
+  const [giftCards, setGiftCards] = useState({ loading: true, list: [], error: null })
+  const [paginationProps, setPaginationProps] = useState({
+    currentPage: (paginationSettings.initialPage && paginationSettings.initialPage >= 1) ? paginationSettings.initialPage - 1 : 0,
+    pageSize: paginationSettings.pageSize ?? 10,
+    totalItems: null,
+    totalPages: null
+  })
+  const [activeStatus, setActiveStatus] = useState(defaultStatus || null)
+
+  /**
+   * Method to get the gift cards from API
+   */
+  const getGiftCards = async (page, pageSize = paginationProps.pageSize) => {
+    setGiftCards({
+      ...giftCards,
+      loading: true
+    })
+    let where = null
+    const conditions = []
+    if (activeStatus) {
+      conditions.push(
+        {
+          attribute: 'status',
+          value: activeStatus
+        }
+      )
+    }
+    if (conditions.length) {
+      where = {
+        conditions,
+        conector: 'AND'
+      }
+    }
+
+    const requestOptions = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      }
+    }
+    const fetchEndpoint = where
+      ? `${ordering.root}/gift_cards?orderBy=-id&&page=${page}&page_size=${pageSize}&&where=${JSON.stringify(where)}`
+      : `${ordering.root}/gift_cards?orderBy=-id&&page=${page}&page_size=${pageSize}`
+
+    return await fetch(fetchEndpoint, requestOptions)
+  }
+
+  const loadMoreOrders = async () => {
+    setGiftCards({
+      ...giftCards,
+      loading: true
+    })
+    try {
+      const response = await getGiftCards(paginationProps.currentPage + 1)
+      const { error, result, pagination } = await response.json()
+      if (!error) {
+        setPaginationProps({
+          currentPage: pagination.current_page,
+          pageSize: pagination.page_size === 0 ? paginationProps.pageSize : pagination.page_size,
+          totalPages: pagination.total_pages,
+          totalItems: pagination.total,
+          from: pagination.from,
+          to: pagination.to
+        })
+      }
+      setGiftCards({
+        loading: false,
+        list: error ? giftCards.list : giftCards.list.concat(result),
+        error: error ? result : null
+      })
+    } catch (err) {
+      setGiftCards({
+        ...giftCards,
+        loading: false,
+        error: [err.message]
+      })
+    }
+  }
+
+  const goToPage = async page => {
+    setGiftCards({
+      ...giftCards,
+      loading: true
+    })
+    try {
+      const response = await getGiftCards(page)
+      const { error, result, pagination } = await response.json()
+      if (!error) {
+        setPaginationProps({
+          currentPage: pagination.current_page,
+          pageSize: pagination.page_size === 0 ? paginationProps.pageSize : pagination.page_size,
+          totalPages: pagination.total_pages,
+          totalItems: pagination.total,
+          from: pagination.from,
+          to: pagination.to
+        })
+      }
+      setGiftCards({
+        loading: false,
+        list: error ? [] : result,
+        error: error ? result : null
+      })
+    } catch (err) {
+      setGiftCards({
+        ...giftCards,
+        loading: false,
+        error: [err.message]
+      })
+    }
+  }
+
+  useEffect(() => {
+    goToPage(1)
+  }, [])
+
+  return (
+    <>
+      {UIComponent && (
+        <UIComponent
+          {...props}
+          giftCards={giftCards}
+          paginationProps={paginationProps}
+          activeStatus={activeStatus}
+          setActiveStatus={setActiveStatus}
+          loadMoreOrders={loadMoreOrders}
+          goToPage={goToPage}
+        />
+      )}
+    </>
+  )
+}
+GiftCardOrdersList.propTypes = {
+  /**
+ * UI Component, this must be containt all graphic elements and use parent props
+ */
+  UIComponent: PropTypes.elementType
+}
+GiftCardOrdersList.defaultProps = {
+  paginationSettings: { initialPage: 1, pageSize: 10 }
+}