ordering-ui-external 10.10.2 → 10.10.3

package/src/components/ForgotPasswordForm/styles.js

@@ -1,153 +1,153 @@
-import styled, { css } from 'styled-components'
-
-export const ForgotPasswordContainer = styled.div`
-  width: 100%;
-  height: ${({ isPopup }) => isPopup ? '100vh' : 'auto'};
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 992px) {
-    flex-direction: row;
-    height: 100%;
-    min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
-  }
-`
-const Side = styled.div`
-  display: flex;
-  width: 100%;
-`
-export const HeroSide = styled(Side)`
-  height: ${({ isPopup }) => isPopup ? '50vh' : 'calc(40vh - 65px)'};
-  justify-content: center;
-  align-items: center;
-  color: ${props => props.theme.colors.primaryContrast};
-  background-color:  ${props => props.theme.colors.primary};
-  padding-bottom: 5px;
-
-  @media (min-width: 992px) {
-    width: 55%;
-    height: ${({ isPopup }) => isPopup ? 'auto' : 'calc(100vh - 65px)'};
-  }
-`
-
-export const TitleHeroSide = styled.div`
-  width: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-
-  h1 {
-    font-size: 22px;
-  }
-
-  p {
-    font-size: 13px;
-  }
-
-  h1,
-  p {
-    margin: 0px;
-    color: #FFF;
-  }
-
-  @media (min-width: 768px) {
-    h1 {
-      font-size: 50px;
-    }
-
-    p {
-      font-size: 18px;
-    }
-  }
-`
-
-export const FormSide = styled(Side)`
-  flex-direction: column;
-  align-items: center;
-  margin-top: 30px;
-
-  @media (min-width: 992px) {
-
-    margin: auto;
-    width: 45%;
-    font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
-  }
-`
-
-export const FormInput = styled.form`
-  width: ${({ isPopup }) => isPopup ? '90%' : '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;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin: 0px;
-  font-size: 17px;
-
-  span {
-    margin-right: 5px;
-
-    ${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`
-    width: calc(90% - 20px);
-
-    @media (min-width: 481px) {
-      width: ${({ isPopup }) => isPopup ? 'calc(90% - 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'};
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 992px) {
+    flex-direction: row;
+    height: 100%;
+    min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
+  }
+`
+const Side = styled.div`
+  display: flex;
+  width: 100%;
+`
+export const HeroSide = styled(Side)`
+  height: ${({ isPopup }) => isPopup ? '50vh' : 'calc(40vh - 65px)'};
+  justify-content: center;
+  align-items: center;
+  color: ${props => props.theme.colors.primaryContrast};
+  background-color:  ${props => props.theme.colors.primary};
+  padding-bottom: 5px;
+
+  @media (min-width: 992px) {
+    width: 55%;
+    height: ${({ isPopup }) => isPopup ? 'auto' : 'calc(100vh - 65px)'};
+  }
+`
+
+export const TitleHeroSide = styled.div`
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  h1 {
+    font-size: 22px;
+  }
+
+  p {
+    font-size: 13px;
+  }
+
+  h1,
+  p {
+    margin: 0px;
+    color: #FFF;
+  }
+
+  @media (min-width: 768px) {
+    h1 {
+      font-size: 50px;
+    }
+
+    p {
+      font-size: 18px;
+    }
+  }
+`
+
+export const FormSide = styled(Side)`
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30px;
+
+  @media (min-width: 992px) {
+
+    margin: auto;
+    width: 45%;
+    font-size: ${({ isPopup }) => isPopup ? '12px' : '1em'};
+  }
+`
+
+export const FormInput = styled.form`
+  width: ${({ isPopup }) => isPopup ? '90%' : '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;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin: 0px;
+  font-size: 17px;
+
+  span {
+    margin-right: 5px;
+
+    ${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`
+    width: calc(90% - 20px);
+
+    @media (min-width: 481px) {
+      width: ${({ isPopup }) => isPopup ? 'calc(90% - 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/components/GoogleGpsButton/index.js

@@ -1,39 +1,39 @@
-import React from 'react'
-import { GoogleGpsButton as GpsButton } from 'ordering-components-external'
-import { GpsButtonStyle } from './styles'
-
-const GoogleGpsButtonUI = (props) => {
-  const {
-    handleGPS,
-    isGoogleButton,
-    googleReady,
-    isLoading,
-    IconButton,
-    IconLoadingButton
-  } = props
-
-  return (
-    <GpsButtonStyle
-      className={props.className || ''}
-      type='button'
-      disabled={(isGoogleButton && !googleReady) || isLoading}
-      onClick={handleGPS}
-    >
-      {isLoading ? (
-        IconLoadingButton ? <IconLoadingButton /> : '...'
-      ) : (
-        IconButton ? <IconButton /> : 'GPS'
-      )}
-    </GpsButtonStyle>
-  )
-}
-
-export const GoogleGpsButton = (props) => {
-  const gpsButtonProps = {
-    ...props,
-    UIComponent: GoogleGpsButtonUI
-  }
-  return (
-    <GpsButton {...gpsButtonProps} />
-  )
-}
+import React from 'react'
+import { GoogleGpsButton as GpsButton } from 'ordering-components-external'
+import { GpsButtonStyle } from './styles'
+
+const GoogleGpsButtonUI = (props) => {
+  const {
+    handleGPS,
+    isGoogleButton,
+    googleReady,
+    isLoading,
+    IconButton,
+    IconLoadingButton
+  } = props
+
+  return (
+    <GpsButtonStyle
+      className={props.className || ''}
+      type='button'
+      disabled={(isGoogleButton && !googleReady) || isLoading}
+      onClick={handleGPS}
+    >
+      {isLoading ? (
+        IconLoadingButton ? <IconLoadingButton /> : '...'
+      ) : (
+        IconButton ? <IconButton /> : 'GPS'
+      )}
+    </GpsButtonStyle>
+  )
+}
+
+export const GoogleGpsButton = (props) => {
+  const gpsButtonProps = {
+    ...props,
+    UIComponent: GoogleGpsButtonUI
+  }
+  return (
+    <GpsButton {...gpsButtonProps} />
+  )
+}

package/src/components/GoogleGpsButton/styles.js

@@ -1,29 +1,29 @@
-import styled, { css } from 'styled-components'
-
-export const GpsButtonStyle = styled.button`
-  position: absolute;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #FFF;
-  padding: 0;
-  width: 43px;
-  height: 43px;
-  line-height: 34px;
-  text-align: center;
-  border-radius: 50%;
-  border-style: solid;
-  border-width: 1px;
-  border-color: ${props => props.theme.colors.primary};
-  outline: none;
-  cursor: pointer;
-  ${props => props.theme?.rtl && css`
-    left: 0;
-    right: initial;
-  `}
-  svg {
-    color: ${props => props.theme.colors.primary};
-    font-size: 25px;
-  }
-`
+import styled, { css } from 'styled-components'
+
+export const GpsButtonStyle = styled.button`
+  position: absolute;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #FFF;
+  padding: 0;
+  width: 43px;
+  height: 43px;
+  line-height: 34px;
+  text-align: center;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${props => props.theme.colors.primary};
+  outline: none;
+  cursor: pointer;
+  ${props => props.theme?.rtl && css`
+    left: 0;
+    right: initial;
+  `}
+  svg {
+    color: ${props => props.theme.colors.primary};
+    font-size: 25px;
+  }
+`

package/src/components/GoogleIdentity/index.js

@@ -1,62 +1,62 @@
-import React, { useState, useEffect } from 'react'
-import { GoogleIdentityButton as GoogleIdentityButtonController, useLanguage } from 'ordering-components-external'
-import { GoogleButton } from './styles'
-import { Alert } from '../Confirm'
-
-export const GoogleLoginButtonUI = (props) => {
-  const { initParams, handleSigninSuccess, formState } = props
-  const [, t] = useLanguage()
-  const [alertState, setAlertState] = useState({ open: false, content: [] })
-
-  useEffect(() => {
-    window.handleCredentialResponse = (response) => {
-      handleSigninSuccess(response.credential)
-    }
-    const GoogleButton = document.getElementById('g_id_onload')
-    GoogleButton.setAttribute('data-callback', 'handleCredentialResponse')
-  })
-
-  useEffect(() => {
-    if (formState.error) {
-      setAlertState({
-        open: true,
-        content: formState.result
-      })
-    }
-  }, [formState])
-
-  return (
-    <>
-      <GoogleButton
-        initialIcon
-        color='secondary'
-        id='g_id_onload'
-        data-client_id={initParams.client_id}
-        data-auto_prompt='false'
-      >
-        <div
-          className='g_id_signin'
-          data-size='medium'
-          data-shape='pill'
-          data-text='signin_with'
-          data-locale='en'
-        />
-      </GoogleButton>
-      <Alert
-        open={alertState.open}
-        title={t('GOOGLE_LOGIN_ERROR', 'Google Login error')}
-        content={alertState?.result}
-        onClose={() => setAlertState({ open: false, content: [] })}
-        onAccept={() => setAlertState({ open: false, content: [] })}
-      />
-    </>
-  )
-}
-
-export const GoogleIdentityButton = (props) => {
-  const googleLoginProps = {
-    ...props,
-    UIComponent: GoogleLoginButtonUI
-  }
-  return <GoogleIdentityButtonController {...googleLoginProps} />
-}
+import React, { useState, useEffect } from 'react'
+import { GoogleIdentityButton as GoogleIdentityButtonController, useLanguage } from 'ordering-components-external'
+import { GoogleButton } from './styles'
+import { Alert } from '../Confirm'
+
+export const GoogleLoginButtonUI = (props) => {
+  const { initParams, handleSigninSuccess, formState } = props
+  const [, t] = useLanguage()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  useEffect(() => {
+    window.handleCredentialResponse = (response) => {
+      handleSigninSuccess(response.credential)
+    }
+    const GoogleButton = document.getElementById('g_id_onload')
+    GoogleButton.setAttribute('data-callback', 'handleCredentialResponse')
+  })
+
+  useEffect(() => {
+    if (formState.error) {
+      setAlertState({
+        open: true,
+        content: formState.result
+      })
+    }
+  }, [formState])
+
+  return (
+    <>
+      <GoogleButton
+        initialIcon
+        color='secondary'
+        id='g_id_onload'
+        data-client_id={initParams.client_id}
+        data-auto_prompt='false'
+      >
+        <div
+          className='g_id_signin'
+          data-size='medium'
+          data-shape='pill'
+          data-text='signin_with'
+          data-locale='en'
+        />
+      </GoogleButton>
+      <Alert
+        open={alertState.open}
+        title={t('GOOGLE_LOGIN_ERROR', 'Google Login error')}
+        content={alertState?.result}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+      />
+    </>
+  )
+}
+
+export const GoogleIdentityButton = (props) => {
+  const googleLoginProps = {
+    ...props,
+    UIComponent: GoogleLoginButtonUI
+  }
+  return <GoogleIdentityButtonController {...googleLoginProps} />
+}

package/src/components/GoogleIdentity/styles.js

@@ -1,23 +1,23 @@
-import styled from 'styled-components'
-import { Button } from '../../styles/Buttons'
-
-export const GoogleButton = styled(Button)`
-  background-color: #EFEFEF;
-  border-color: #EFEFEF;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 10px;
-  height: 41.6px;
-  svg {
-    font-size: 28px;
-    color: #1977F2;
-  }
-
-  div {
-    margin: 0 auto;
-  }
-`
+import styled from 'styled-components'
+import { Button } from '../../styles/Buttons'
+
+export const GoogleButton = styled(Button)`
+  background-color: #EFEFEF;
+  border-color: #EFEFEF;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  height: 41.6px;
+  svg {
+    font-size: 28px;
+    color: #1977F2;
+  }
+
+  div {
+    margin: 0 auto;
+  }
+`

package/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('LOGIN_WITH_GOOGLE', 'Login 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('LOGIN_WITH_GOOGLE', 'Login with Google')}</div>
+    </GoogleButton>
+  )
+}
+
+export const GoogleLoginButton = (props) => {
+  const googleLoginProps = {
+    ...props,
+    UIComponent: GoogleLoginButtonUI
+  }
+  return <GoogleLoginController {...googleLoginProps} />
+}