ordering-ui-external 1.6.3 → 1.6.4

package/src/themes/five/src/components/LoginForm/styles.js

@@ -233,18 +233,18 @@ export const OtpWrapper = styled.div`
   .otp-container{
     display: flex;
     justify-content: space-evenly;
-    margin: 20px;
-    
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+
     .otp-input{
-      width: 30px;
-      height: 30px;
-      padding: 12px 20px;
-      border: 2px solid #CCC;
-      border-radius: 16px;
+      width: 25px !important;
+      height: 35px;
+      border: 1px solid #CCC;
+      border-radius: 8px;
       background-color: #FFF;
       outline: none;
       font-size: 20px;
-      font-weight: bold; 
+      font-weight: bold;
 
       &:focus{
         border-color: ${() => darken(0.07, '#CCC')} !important;
@@ -259,6 +259,27 @@ export const OtpWrapper = styled.div`
       }
     }
   }
+  @media (min-width: 768px) {
+    .otp-container {
+      margin: 20px;
+      div {
+        padding: 10px;
+      }
+
+      .otp-input {
+        width: 80px !important;
+        height: 100px;
+      }
+    }
+  }
+  @media (min-width: 1024px) {
+    .otp-container {
+      .otp-input {
+        width: 60px !important;
+        height: 80px;
+      }
+    }
+  }
 `
 
 export const CountdownTimer = styled.div`

package/src/themes/five/src/components/SignUpForm/index.js

@@ -17,6 +17,7 @@ import {
   useLanguage,
   useConfig,
   useSession,
+  useToast, ToastType,
   ReCaptcha,
   useEvent
 } from 'ordering-components-external'
@@ -98,6 +99,7 @@ const SignUpFormUI = (props) => {
     useSignUpOtpCellphone
   } = props
   const [, t] = useLanguage()
+  const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [events] = useEvent()
@@ -110,8 +112,7 @@ const SignUpFormUI = (props) => {
   const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
   const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
 
-  const otpPlaceholder = [...Array(numOtpInputs)].fill(0).join('')
-  const [otpLeftTime, _, resetOtpLeftTime] = useCountdownTimer(600, !checkPhoneCodeState?.loading && willVerifyOtpState)
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(600, !checkPhoneCodeState?.loading && willVerifyOtpState)
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [passwordSee, setPasswordSee] = useState(false)
@@ -310,15 +311,9 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (checkPhoneCodeState?.result?.error) {
-      setAlertState({
-        open: true,
-        content: checkPhoneCodeState?.result?.result || [t('ERROR', 'Error')]
-      })
+      showToast(ToastType.Error, checkPhoneCodeState?.result?.result || [t('ERROR', 'Error')])
     } else if (checkPhoneCodeState?.result?.result && checkPhoneCodeState?.result?.result?.[0] === 'VERIFICATION_CODE_WAS_SENT_TO') {
-      setAlertState({
-        open: true,
-        content: t('CODE_SENT', 'The code has been sent')
-      })
+      showToast(ToastType.Success, t('CODE_SENT', 'The code has been sent'))
       resetOtpLeftTime()
     }
   }, [checkPhoneCodeState])
@@ -613,13 +608,12 @@ const SignUpFormUI = (props) => {
                   numInputs={numOtpInputs || 6}
                   containerStyle='otp-container'
                   inputStyle='otp-input'
-                  placeholder={otpPlaceholder}
                   isInputNum
                   shouldAutoFocus
                 />
               </OtpWrapper>
               <ResendCode disabled={otpLeftTime > 520} onClick={handleSendOtp}>
-                {t('RESEND_AGAIN', 'Resend again')}?
+                {t('LANG_SEND_AGAIN', 'Send again')}?
               </ResendCode>
               <Button
                 type='button'

package/src/themes/five/src/components/SignUpForm/styles.js

@@ -4,7 +4,9 @@ export const SignUpContainer = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
-  min-height: ${({ isPopup }) => isPopup ? '500px' : 'calc(100vh - 65px)'};
+  ${({ isPopup }) => !isPopup && css`
+    min-height: calc(100vh - 65px);
+  `}
   padding: 0 10px;
   box-sizing: border-box;
 

package/src/themes/five/src/styles/Buttons/index.js

@@ -90,6 +90,10 @@ export const Button = styled.button`
     &:active {
       background: ${props => darken(0.07, props.theme.colors.primary)};
     }
+    &:hover {
+      background: ${props => darken(0.07, props.theme.colors.primary)};
+      color: #FFF;
+    }
     ${({ outline }) => outline && css`
       background: #FFF;
       color: ${props => props.theme.colors.primary};