ordering-ui-external 14.1.21 → 14.1.23

package/src/themes/orderAndPay/src/components/ForgotPasswordForm/index.js

@@ -1,183 +1,183 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { useForm } from 'react-hook-form'
-import { Alert } from '../Confirm'
-import {
-  ForgotPasswordForm as ForgotPasswordController,
-  useLanguage
-} from 'ordering-components-external'
-import {
-  ForgotPasswordContainer,
-  FormSide,
-  FormInput,
-  RedirectLink
-} from './styles'
-
-import { Input } from '../../styles/Inputs'
-import { Button } from '../../styles/Buttons'
-import { useTheme } from 'styled-components'
-
-const ForgotPasswordUI = (props) => {
-  const {
-    hanldeChangeInput,
-    handleButtonForgotPasswordClick,
-    formState,
-    formData,
-    elementLinkToLogin,
-    isPopup
-  } = props
-
-  const formMethods = useForm()
-  const [alertState, setAlertState] = useState({ open: false, title: '', content: [], success: false })
-  const [, t] = useLanguage()
-  const theme = useTheme()
-  const emailInput = useRef(null)
-
-  const onSubmit = () => {
-    setAlertState({ ...alertState, success: true })
-    handleButtonForgotPasswordClick()
-  }
-
-  const closeAlert = () => {
-    setAlertState({
-      ...alertState,
-      open: false,
-      content: []
-    })
-  }
-
-  const handleChangeInputEmail = (e) => {
-    hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
-    formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
-    if (emailInput?.current) {
-      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
-    }
-  }
-
-  useEffect(() => {
-    if (Object.keys(formMethods.errors).length > 0) {
-      setAlertState({
-        ...alertState,
-        success: false,
-        open: true,
-        title: t('ERROR_UNKNOWN', 'An error has ocurred'),
-        content: Object.values(formMethods.errors).map(error => error.message)
-      })
-    }
-  }, [formMethods.errors])
-
-  useEffect(() => {
-    if (!formState.loading && formState.result?.error) {
-      setAlertState({
-        ...alertState,
-        success: false,
-        open: true,
-        title: t('ERROR_UNKNOWN', 'An error has ocurred'),
-        content: formState.result?.result || [t('ERROR', 'Error')]
-      })
-    }
-    if (!formState.loading && !formState.result?.error && alertState.success) {
-      setAlertState({
-        ...alertState,
-        open: true,
-        title: t('LINK_SEND_SUCCESSFULLY', 'Link Sent Successfully'),
-        content: `${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${formData.email}`
-      })
-    }
-  }, [formState.loading])
-
-  useEffect(() => {
-    formMethods.register('email', {
-      required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
-      pattern: {
-        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-        message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-      }
-    })
-  }, [formMethods])
-
-  return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <ForgotPasswordContainer isPopup={isPopup}>
-        <h1>{t('TITLE_FORGOT_PASSWORD', 'Forgot your password?')}</h1>
-        <FormSide isPopup={isPopup}>
-          <img src={theme?.images?.logos?.logotype} alt='Logo' width='200' height='66' loading='lazy' />
-          <FormInput
-            noValidate
-            isPopup={isPopup}
-            onSubmit={formMethods.handleSubmit(onSubmit)}
-          >
-            {props.beforeMidElements?.map((BeforeMidElements, i) => (
-              <React.Fragment key={i}>
-                {BeforeMidElements}
-              </React.Fragment>))}
-            {props.beforeMidComponents?.map((BeforeMidComponents, i) => (
-              <BeforeMidComponents key={i} {...props} />))}
-            <Input
-              type='email'
-              name='email'
-              aria-label='email'
-              placeholder={t('EMAIL', 'Email')}
-              ref={(e) => {
-                emailInput.current = e
-              }}
-              onChange={handleChangeInputEmail}
-              autoComplete='off'
-            />
-            {
-              props.afterMidElements?.map((MidElement, i) => (
-                <React.Fragment key={i}>
-                  {MidElement}
-                </React.Fragment>))
-            }
-            {
-              props.afterMidComponents?.map((MidComponent, i) => (
-                <MidComponent key={i} {...props} />))
-            }
-            <Button color={formState.loading || alertState.success ? 'secondary' : 'primary'} type='submit' disabled={formState.loading || alertState.success}>
-              {formState.loading
-                ? t('LOADING', 'Loading...')
-                : alertState.success && formState.result.result
-                  ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent')
-                  : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-            </Button>
-          </FormInput>
-          {elementLinkToLogin && (
-            <RedirectLink register isPopup={isPopup}>
-              <span>{t('SIGN_IN_MESSAGE', 'Do you want to sign in?')}</span>
-              {elementLinkToLogin}
-            </RedirectLink>
-          )}
-        </FormSide>
-        <Alert
-          title={alertState.title}
-          content={alertState.content}
-          acceptText={t('ACCEPT', 'Accept')}
-          open={alertState.open}
-          onClose={() => closeAlert()}
-          onAccept={() => closeAlert()}
-          closeOnBackdrop={false}
-        />
-      </ForgotPasswordContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
-  )
-}
-
-export const ForgotPasswordForm = (props) => {
-  const ForgotPasswordProps = {
-    ...props,
-    UIComponent: ForgotPasswordUI
-  }
-  return <ForgotPasswordController {...ForgotPasswordProps} />
-}
+import React, { useEffect, useState, useRef } from 'react'
+import { useForm } from 'react-hook-form'
+import { Alert } from '../Confirm'
+import {
+  ForgotPasswordForm as ForgotPasswordController,
+  useLanguage
+} from 'ordering-components-external'
+import {
+  ForgotPasswordContainer,
+  FormSide,
+  FormInput,
+  RedirectLink
+} from './styles'
+
+import { Input } from '../../styles/Inputs'
+import { Button } from '../../styles/Buttons'
+import { useTheme } from 'styled-components'
+
+const ForgotPasswordUI = (props) => {
+  const {
+    hanldeChangeInput,
+    handleButtonForgotPasswordClick,
+    formState,
+    formData,
+    elementLinkToLogin,
+    isPopup
+  } = props
+
+  const formMethods = useForm()
+  const [alertState, setAlertState] = useState({ open: false, title: '', content: [], success: false })
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const emailInput = useRef(null)
+
+  const onSubmit = () => {
+    setAlertState({ ...alertState, success: true })
+    handleButtonForgotPasswordClick()
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      ...alertState,
+      open: false,
+      content: []
+    })
+  }
+
+  const handleChangeInputEmail = (e) => {
+    hanldeChangeInput({ target: { name: 'email', value: e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
+    formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
+    if (emailInput?.current) {
+      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '')
+    }
+  }
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        ...alertState,
+        success: false,
+        open: true,
+        title: t('ERROR_UNKNOWN', 'An error has ocurred'),
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        ...alertState,
+        success: false,
+        open: true,
+        title: t('ERROR_UNKNOWN', 'An error has ocurred'),
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setAlertState({
+        ...alertState,
+        open: true,
+        title: t('LINK_SEND_SUCCESSFULLY', 'Link Sent Successfully'),
+        content: `${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${formData.email}`
+      })
+    }
+  }, [formState.loading])
+
+  useEffect(() => {
+    formMethods.register('email', {
+      required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+      pattern: {
+        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+        message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
+      }
+    })
+  }, [formMethods])
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <ForgotPasswordContainer isPopup={isPopup}>
+        <h1>{t('TITLE_FORGOT_PASSWORD', 'Forgot your password?')}</h1>
+        <FormSide isPopup={isPopup}>
+          <img src={theme?.images?.logos?.logotype} alt='Logo' width='200' height='66' loading='lazy' />
+          <FormInput
+            noValidate
+            isPopup={isPopup}
+            onSubmit={formMethods.handleSubmit(onSubmit)}
+          >
+            {props.beforeMidElements?.map((BeforeMidElements, i) => (
+              <React.Fragment key={i}>
+                {BeforeMidElements}
+              </React.Fragment>))}
+            {props.beforeMidComponents?.map((BeforeMidComponents, i) => (
+              <BeforeMidComponents key={i} {...props} />))}
+            <Input
+              type='email'
+              name='email'
+              aria-label='email'
+              placeholder={t('EMAIL', 'Email')}
+              ref={(e) => {
+                emailInput.current = e
+              }}
+              onChange={handleChangeInputEmail}
+              autoComplete='off'
+            />
+            {
+              props.afterMidElements?.map((MidElement, i) => (
+                <React.Fragment key={i}>
+                  {MidElement}
+                </React.Fragment>))
+            }
+            {
+              props.afterMidComponents?.map((MidComponent, i) => (
+                <MidComponent key={i} {...props} />))
+            }
+            <Button color={formState.loading || alertState.success ? 'secondary' : 'primary'} type='submit' disabled={formState.loading || alertState.success}>
+              {formState.loading
+                ? t('LOADING', 'Loading...')
+                : alertState.success && formState.result.result
+                  ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent')
+                  : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
+            </Button>
+          </FormInput>
+          {elementLinkToLogin && (
+            <RedirectLink register isPopup={isPopup}>
+              <span>{t('SIGN_IN_MESSAGE', 'Do you want to sign in?')}</span>
+              {elementLinkToLogin}
+            </RedirectLink>
+          )}
+        </FormSide>
+        <Alert
+          title={alertState.title}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </ForgotPasswordContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const ForgotPasswordForm = (props) => {
+  const ForgotPasswordProps = {
+    ...props,
+    UIComponent: ForgotPasswordUI
+  }
+  return <ForgotPasswordController {...ForgotPasswordProps} />
+}

package/src/themes/orderAndPay/src/components/ForgotPasswordForm/styles.js

@@ -1,114 +1,114 @@
-import styled, { css } from 'styled-components'
-
-export const ForgotPasswordContainer = styled.div`
-  width: 100%;
-  height: ${({ isPopup }) => isPopup ? '100vh' : 'auto'};
-
-  h1 {
-    font-weight: 600;
-    font-size: 24px;
-    margin-top: 0;
-    margin-bottom: 30px;
-    text-align: center;
-  }
-  @media (min-width: 992px) {
-    height: 100%;
-    min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
-  }
-`
-const Side = styled.div`
-  display: flex;
-  width: 100%;
-`
-
-export const FormSide = styled(Side)`
-  flex-direction: column;
-  align-items: center;
-  margin-top: 30px;
-
-  @media (min-width: 992px) {
-
-    margin: auto;
-    font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
-  }
-`
-
-export const FormInput = styled.form`
-  width: ${({ isPopup }) => isPopup ? '95%' : '80%'};
-  display: flex;
-  flex-direction: column;
-
-  * {
-    padding: 8px 20px;
-    margin: 10px;
-  }
-
-  input:not(:last-child) {
-    margin-top: 10px;
-    margin-bottom: 0px;
-  }
-
-  button {
-    margin-top: 10px;
-    padding: 5px;
-  }
-`
-
-export const RedirectLink = styled.div`
-  padding: 10px;
-  padding-left: 0px;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  margin: 0px;
-  font-size: 14px;
-  font-weight: 400;
-
-  span {
-    margin-right: 5px;
-    color: black;
-    ${props => props.theme?.rtl && css`
-      margin-left: 5px;
-      margin-right: 0px;
-    `}
-  }
-
-  a {
-    color: ${props => props.theme.colors.primary};
-    text-decoration: none;
-  }
-
-  * {
-    margin: 0px;
-    padding: 0px;
-  }
-
-  ${({ register }) => register && css`
-    flex-direction: row;
-    justify-content: center;
-    width: calc(100% - 20px);
-    align-items: center;
-    @media (min-width: 481px) {
-      width: ${({ isPopup }) => isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)'};
-    }
-  `}
-
-  @media (min-width: 425px) {
-    flex-direction: row;
-  }
-
-  @media (min-width: 768px) {
-    font-size: 14px;
-  }
-
-  @media (min-width: 992px) {
-    font-size: ${({ isPopup }) => isPopup ? '13px' : '18px'};
-    flex-direction: row;
-  }
-
-  @media (min-width: 1200px) {
-    ${({ isPopup }) => isPopup && css`
-      font-size: 16px;
-    `};
-  }
-`
+import styled, { css } from 'styled-components'
+
+export const ForgotPasswordContainer = styled.div`
+  width: 100%;
+  height: ${({ isPopup }) => isPopup ? '100vh' : 'auto'};
+
+  h1 {
+    font-weight: 600;
+    font-size: 24px;
+    margin-top: 0;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+  @media (min-width: 992px) {
+    height: 100%;
+    min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
+  }
+`
+const Side = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+export const FormSide = styled(Side)`
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30px;
+
+  @media (min-width: 992px) {
+
+    margin: auto;
+    font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
+  }
+`
+
+export const FormInput = styled.form`
+  width: ${({ isPopup }) => isPopup ? '95%' : '80%'};
+  display: flex;
+  flex-direction: column;
+
+  * {
+    padding: 8px 20px;
+    margin: 10px;
+  }
+
+  input:not(:last-child) {
+    margin-top: 10px;
+    margin-bottom: 0px;
+  }
+
+  button {
+    margin-top: 10px;
+    padding: 5px;
+  }
+`
+
+export const RedirectLink = styled.div`
+  padding: 10px;
+  padding-left: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 0px;
+  font-size: 14px;
+  font-weight: 400;
+
+  span {
+    margin-right: 5px;
+    color: black;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0px;
+    `}
+  }
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    text-decoration: none;
+  }
+
+  * {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  ${({ register }) => register && css`
+    flex-direction: row;
+    justify-content: center;
+    width: calc(100% - 20px);
+    align-items: center;
+    @media (min-width: 481px) {
+      width: ${({ isPopup }) => isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)'};
+    }
+  `}
+
+  @media (min-width: 425px) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 768px) {
+    font-size: 14px;
+  }
+
+  @media (min-width: 992px) {
+    font-size: ${({ isPopup }) => isPopup ? '13px' : '18px'};
+    flex-direction: row;
+  }
+
+  @media (min-width: 1200px) {
+    ${({ isPopup }) => isPopup && css`
+      font-size: 16px;
+    `};
+  }
+`

package/src/themes/orderAndPay/src/components/GoogleLogin/index.js

@@ -1,31 +1,31 @@
-import React from 'react'
-import {
-  GoogleLoginButton as GoogleLoginController,
-  useLanguage
-} from 'ordering-components-external'
-import FcGoogle from '@meronex/icons/fc/FcGoogle'
-import { GoogleButton } from './styles'
-
-export const GoogleLoginButtonUI = (props) => {
-  const [, t] = useLanguage()
-  const { signIn } = props
-
-  return (
-    <GoogleButton
-      initialIcon
-      color='secondary'
-      onClick={signIn}
-    >
-      <FcGoogle />
-      <div>{t('CONTINUE_WITH_GOOGLE', 'Continue with Google')}</div>
-    </GoogleButton>
-  )
-}
-
-export const GoogleLoginButton = (props) => {
-  const googleLoginProps = {
-    ...props,
-    UIComponent: GoogleLoginButtonUI
-  }
-  return <GoogleLoginController {...googleLoginProps} />
-}
+import React from 'react'
+import {
+  GoogleLoginButton as GoogleLoginController,
+  useLanguage
+} from 'ordering-components-external'
+import FcGoogle from '@meronex/icons/fc/FcGoogle'
+import { GoogleButton } from './styles'
+
+export const GoogleLoginButtonUI = (props) => {
+  const [, t] = useLanguage()
+  const { signIn } = props
+
+  return (
+    <GoogleButton
+      initialIcon
+      color='secondary'
+      onClick={signIn}
+    >
+      <FcGoogle />
+      <div>{t('CONTINUE_WITH_GOOGLE', 'Continue with Google')}</div>
+    </GoogleButton>
+  )
+}
+
+export const GoogleLoginButton = (props) => {
+  const googleLoginProps = {
+    ...props,
+    UIComponent: GoogleLoginButtonUI
+  }
+  return <GoogleLoginController {...googleLoginProps} />
+}