ordering-ui-external 1.6.3 → 1.6.5

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

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+import { darken } from 'polished'
 
 export const Header = styled.div`
   display: flex;
@@ -241,6 +242,11 @@ export const MenuLink = styled.a`
     color: ${props => props.theme.colors.primaryContrast};
     border-radius: 7.6px;
     padding: 11px 15px;
+
+    &:hover {
+      background: ${props => darken(0.07, props.theme.colors.primary)};
+      color: #FFF;
+    }
   `}
 `
 
@@ -431,3 +437,37 @@ export const AddressFormWrapper = styled.div`
     margin-top: 20px;
   }
 `
+export const InputGroup = styled.div`
+  p {
+    font-weight: 500;
+    font-size: 20px;
+    color: ${props => props.theme.colors.darkTextColor};
+    width: 100%;
+    text-align: left;
+    margin: 0 0 7px 0;
+  }
+`
+
+export const LanguageSelectorWrapper = styled(InputGroup)`
+  > div {
+    border-radius: 7.6px;
+    text-align: left;
+    background: #F8F9FA !important;
+    border-color: #F8F9FA;
+    background-color: #F8F9FA !important;
+    height: 44px;
+
+    > div:first-child {
+      height: 44px;
+    }
+
+    #list {
+      border-radius: 7.6px;
+      background: #F8F9FA !important;
+      border-color: #F8F9FA;
+    }
+  }
+  #select-input {
+    margin: 0px 10px 0 5px;
+  }
+`

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

@@ -9,6 +9,7 @@ import {
   useLanguage,
   useConfig,
   useSession,
+  useToast, ToastType,
   ReCaptcha,
   useApi
 } from 'ordering-components-external'
@@ -88,10 +89,10 @@ const LoginFormUI = (props) => {
     useLoginOtpCellphone
   } = props
   const numOtpInputs = loginTab === 'otp' ? 6 : 4
-  const otpPlaceholder = [...Array(numOtpInputs)].fill(0).join('')
   const [ordering, { setOrdering }] = useApi()
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
@@ -305,15 +306,9 @@ const LoginFormUI = (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) {
-      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])
@@ -516,13 +511,12 @@ const LoginFormUI = (props) => {
                     numInputs={numOtpInputs}
                     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/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};

package/src/utils/index.js

@@ -132,35 +132,40 @@ export const bytesConverter = bytes => {
 }
 
 /**
- * Function to get colors darker/lighten.
+ * Function to get brightness of color.
  */
-export const LightenDarkenColor = (col, amt) => {
+export const lightenDarkenColor = (color) => {
 
-    var usePound = false;
-  
-    if (col[0] == "#") {
-        col = col.slice(1);
-        usePound = true;
-    }
- 
-    var num = parseInt(col,16);
- 
-    var r = (num >> 16) + amt;
- 
-    if (r > 255) r = 255;
-    else if  (r < 0) r = 0;
- 
-    var b = ((num >> 8) & 0x00FF) + amt;
- 
-    if (b > 255) b = 255;
-    else if  (b < 0) b = 0;
- 
-    var g = (num & 0x0000FF) + amt;
- 
-    if (g > 255) g = 255;
-    else if (g < 0) g = 0;
- 
-    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
+  let r, g, b, hsp;
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(
+    0.299 * (r * r) +
+    0.587 * (g * g) +
+    0.114 * (b * b)
+  );
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true; //is light color
+  } else {
+    return false;
+  }
 }
 
 /**