ordering-ui-react-native 0.15.96 → 0.15.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.96",
+  "version": "0.15.99",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/BusinessController/index.tsx

@@ -32,6 +32,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
     business,
     handleClick,
     isBusinessOpen,
+    getBusinessOffer,
     businessWillCloseSoonMinutes,
     isBusinessClose
   } = props;
@@ -145,9 +146,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           />
         </BusinessLogo>
         <BusinessState>
-          {!isBusinessOpen && (
+          {(isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
             <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
+              {getBusinessOffer(business?.offers) && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {getBusinessOffer(business?.offers) || parsePrice(0)}
+                </OText>
+              )}
+              <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
                 {t('PREORDER', 'PREORDER')}
               </OText>
             </View>

package/src/components/StripeMethodForm/index.tsx

@@ -131,7 +131,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
   return (
     <>
-      {paymethod === 'google_pay' && (
+      {paymethod === 'google_pay' ? (
         <View>
           <OButton
             textStyle={{
@@ -145,27 +145,26 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
             style={{ marginTop: 20 }}
           />
         </View>
-        // ) : (
-        //   <View>
-        //     {isApplePaySupported ? (
-        //       <>
-        //         <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
-        //         <ApplePayButton
-        //           onPress={pay}
-        //           type="plain"
-        //           buttonStyle="black"
-        //           borderRadius={4}
-        //           style={{
-        //             width: '100%',
-        //             height: 50,
-        //           }}
-        //         />
-        //       </>
-        //     ) : (
-        //       <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
-        //     )}
-        //   </View>
-        // )}
+      ) : (
+        <View>
+          {isApplePaySupported ? (
+            <>
+              <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
+              <ApplePayButton
+                onPress={pay}
+                type="plain"
+                buttonStyle="black"
+                borderRadius={4}
+                style={{
+                  width: '100%',
+                  height: 50,
+                }}
+              />
+            </>
+          ) : (
+            <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
+          )}
+        </View>
       )}
       <Spinner
         visible={loadingGooglePayment}

package/src/types/index.tsx

@@ -143,8 +143,9 @@ export interface BusinessControllerParams {
   orderType?: any;
   handleClick?: any;
   isBusinessOpen?: boolean;
-  businessWillCloseSoonMinutes?: number
-  isBusinessClose?: number
+  businessWillCloseSoonMinutes?: number;
+  isBusinessClose?: number;
+  getBusinessOffer: any;
 }
 export interface BusinessProductsListingParams {
   navigation?: any;

package/src/utils/index.tsx

@@ -450,7 +450,7 @@ export const orderCommentList = (value: string) => {
 
   if (!messages[status]) return null
 
-  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replaceAll('_', ' ')) }))
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replace(/_/g, ' ')) }))
 
   return { list }
 }

package/themes/business/src/components/LogoutButton/index.tsx

@@ -15,7 +15,7 @@ const LogoutButtonUI = (props: any) => {
     const data = await _retrieveStoreData('notification_state');
     const res = await handleLogoutClick(data);
     if (res) {
-      _clearStoreData({ excludedKeys: ['project_name'] });
+      _clearStoreData({ excludedKeys: ['isTutorial'] });
     }
   };
 

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -177,7 +177,16 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 		const _carts = orderState?.carts?.[adjustBusinessId]
 		const products = _carts?.products
 		const unavailableProducts = products.filter((product: any) => product.valid !== true)
-		unavailableProducts.length > 0 && multiRemoveProducts && multiRemoveProducts(unavailableProducts, _carts)
+		const alreadyRemoved = await _retrieveStoreData('already-removed')
+		_removeStoreData('already-removed')
+		if (unavailableProducts.length > 0) {
+			multiRemoveProducts && await multiRemoveProducts(unavailableProducts, _carts)
+			return
+		}
+	
+		if (alreadyRemoved === 'removed') {
+			setAlertState({ open: true, content: [t('NOT_AVAILABLE_PRODUCT', 'This product is not available.')] })
+		}
 	}
 
 	const removeCartByReOrder = async () => {

package/themes/original/src/components/OrderDetails/index.tsx

@@ -398,10 +398,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       const products = carts?.[_businessId]?.products
       const available = products.every((product: any) => product.valid === true)
 
-      if (available && reorderState?.result?.uuid) {
+      if (available && reorderState?.result?.uuid && (products?.length === order?.products.length)) {
         onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
       } else {
         _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        products?.length !== order?.products.length && _setStoreData('already-removed', JSON.stringify('removed'))
         navigation.navigate('Business', { store: businessData?.slug })
       }
     }

package/themes/original/src/components/UserFormDetails/index.tsx

@@ -229,7 +229,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	useEffect(() => {
 		if (!phoneInputData.error && phoneInputData?.phone?.country_phone_code && phoneInputData?.phone?.cellphone) {
-			setWillVerifyOtpState(true)
+			setWillVerifyOtpState?.(true)
 		}
 	}, [phoneInputData])
 

package/themes/original/src/components/UserVerification/index.tsx

@@ -7,6 +7,7 @@ import {
   TextInput,
   SafeAreaView,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 import {
   UserVerification as UserVerificationController,
@@ -81,7 +82,6 @@ const UserVerificationUI = (props: any) => {
   const [containerIsFocused, setContainerIsFocused] = useState(false);
 
   const [phoneState, setPhoneState] = useState<any>(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
   const [verificationState, setVerificationState] = useState({ email: false, phone: false })
 
   const codeDigitsArray = new Array(CODE_LENGTH).fill(0);
@@ -155,7 +155,7 @@ const UserVerificationUI = (props: any) => {
 
     const containerStyle =
       containerIsFocused && isFocused
-        ? {...style.inputContainer, ...style.inputContainerFocused}
+        ? { ...style.inputContainer, ...style.inputContainerFocused }
         : style.inputContainer;
 
     return (
@@ -250,8 +250,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyEmailState?.errorSendCode?.[0]
-          ?? verifyEmailState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyEmailState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -264,8 +264,8 @@ const UserVerificationUI = (props: any) => {
       showToast(
         ToastType.Error,
         verifyPhoneState?.errorSendCode?.[0]
-          ?? verifyPhoneState?.errorCheckCode?.[0]
-          ?? t('ERROR', 'Error'),
+        ?? verifyPhoneState?.errorCheckCode?.[0]
+        ?? t('ERROR', 'Error'),
       );
       setTimeout(() => {
         cleanErrorsState();
@@ -296,209 +296,195 @@ const UserVerificationUI = (props: any) => {
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <Container>
-        <WrapperActions>
-          <WrapperText>
-            <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
-              {t('VERIFICATION_CODE', 'Verification Code')}
-            </OText>
-            {isEmailVerifyRequired && (
-              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
-                {!verificationState.email ? (
-                  t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
-                ) : (
-                  t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
-                )}
+      <ScrollView>
+        <Container>
+          <WrapperActions>
+            <WrapperText>
+              <OText size={22} weight='bold' style={{ marginBottom: 10 }}>
+                {t('VERIFICATION_CODE', 'Verification Code')}
               </OText>
-            )}
-
-            {isPhoneVerifyRequired && !isEmailVerifyRequired && (
-              <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
-                {!verificationState.phone ? (
-                  t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
-                ) : (
-                  t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
-                )}
-              </OText>
-            )}
-          </WrapperText>
-          <View style={{ position: 'absolute', top: 0, right: 0 }}>
-            <LogoutButton iconSize={20} />
-          </View>
-        </WrapperActions>
-
-        {isEmailVerifyRequired && (
-          !verificationState.email ? (
-            <InputWrapper>
-              <OInput
-                placeholder={user?.email}
-                style={style.inputStyle}
-                icon={theme.images.general.email}
-                isDisabled
-              />
-            </InputWrapper>
-          ) : (
-            <>
-              <WrappCountdown>
-                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
-                  <OText
-                    size={26}
-                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
-                  >
-                    {timer}
-                  </OText>
-                </CountDownContainer>
-              </WrappCountdown>
-
-              <InputsSection>
-                <OtpSection>
-                  <DigitInput
-                    disabled={otpState.length === CODE_LENGTH}
-                    onPress={handleOnPress}
-                  >
-                    {codeDigitsArray.map(toDigitInput)}
-                  </DigitInput>
-                  <TextInput
-                    ref={ref}
-                    value={otpState}
-                    placeholder='0'
-                    onChangeText={setOtpState}
-                    onSubmitEditing={handleOnBlur}
-                    keyboardType="number-pad"
-                    returnKeyType="done"
-                    textContentType="oneTimeCode"
-                    maxLength={CODE_LENGTH}
-                    style={style.hiddenCodeInput}
-                  />
-                </OtpSection>
-              </InputsSection>
-
-              <WrapperText>
-                <TouchableOpacity
-                  onPress={() => handleSendOtp()}
-                >
-                  <OText color={theme.colors.primary}>
-                    {t('RESEND_AGAIN', 'Resend again?')}
-                  </OText>
-                </TouchableOpacity>
-              </WrapperText>
-            </>
-          )
-        )}
-
-        {isPhoneVerifyRequired && !isEmailVerifyRequired && (
-          !verificationState.phone ? (
-            phoneState?.formatted ? (
-              <>
-                <InputWrapper phone>
-                  <PhoneInputNumber
-                    handleData={() => {}}
-                    defaultValue={phoneState?.cellphone}
-                    defaultCode={phoneState?.country_phone_code.replace('+', '')}
-                    boxStyle={style.phoneSelect}
-                    inputStyle={style.phoneInputStyle}
-                    textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
-                    noDropIcon
-                    isDisabled
-                  />
-                </InputWrapper>
-              </>
+              {isEmailVerifyRequired && (
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {!verificationState.email ? (
+                    t('VERIFICATION_EMAIL_CODE_MESSAGE', 'In order to continue using our platform please verify your email')
+                  ) : (
+                    t('VERIFICATION_EMAIL_CODE_SENT_MESSAGE', 'Please type the verification code sent to your email')
+                  )}
+                </OText>
+              )}
+
+              {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+                <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
+                  {!verificationState.phone ? (
+                    t('VERIFICATION_PHONE_CODE_MESSAGE', 'In order to continue using our platform please verify your phone number')
+                  ) : (
+                    t('VERIFICATION_PHONE_CODE_SENT_MESSAGE', 'Please, enter the verification code we sent to your mobile ending with :number').replace(':number', lastNumbers)
+                  )}
+                </OText>
+              )}
+            </WrapperText>
+            <View style={{ position: 'absolute', top: 0, right: 0 }}>
+              <LogoutButton iconSize={20} />
+            </View>
+          </WrapperActions>
+
+          {isEmailVerifyRequired && (
+            !verificationState.email ? (
+              <InputWrapper>
+                <OInput
+                  placeholder={user?.email}
+                  style={style.inputStyle}
+                  icon={theme.images.general.email}
+                  isDisabled
+                />
+              </InputWrapper>
             ) : (
               <>
+                <WrappCountdown>
+                  <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
+                    <OText
+                      size={26}
+                      color={timer === '00:00' ? theme.colors.error : theme.colors.success}
+                    >
+                      {timer}
+                    </OText>
+                  </CountDownContainer>
+                </WrappCountdown>
+
+                <InputsSection>
+                  <OtpSection>
+                    <DigitInput
+                      disabled={otpState.length === CODE_LENGTH}
+                      onPress={handleOnPress}
+                    >
+                      {codeDigitsArray.map(toDigitInput)}
+                    </DigitInput>
+                    <TextInput
+                      ref={ref}
+                      value={otpState}
+                      placeholder='0'
+                      onChangeText={setOtpState}
+                      onSubmitEditing={handleOnBlur}
+                      keyboardType="number-pad"
+                      returnKeyType="done"
+                      textContentType="oneTimeCode"
+                      maxLength={CODE_LENGTH}
+                      style={style.hiddenCodeInput}
+                    />
+                  </OtpSection>
+                </InputsSection>
+
+                <WrapperText>
+                  <TouchableOpacity
+                    onPress={() => handleSendOtp()}
+                  >
+                    <OText color={theme.colors.primary}>
+                      {t('RESEND_AGAIN', 'Resend again?')}
+                    </OText>
+                  </TouchableOpacity>
+                </WrapperText>
+              </>
+            )
+          )}
+
+          {isPhoneVerifyRequired && !isEmailVerifyRequired && (
+            !verificationState.phone ? (
+              phoneState?.formatted ? (
+                <>
+                  <InputWrapper phone>
+                    <PhoneInputNumber
+                      handleData={() => { }}
+                      defaultValue={phoneState?.cellphone}
+                      defaultCode={phoneState?.country_phone_code.replace('+', '')}
+                      boxStyle={style.phoneSelect}
+                      inputStyle={style.phoneInputStyle}
+                      textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
+                      noDropIcon
+                      isDisabled
+                    />
+                  </InputWrapper>
+                </>
+              ) : (
                 <OText size={14} color={theme.colors.disabled} style={{ textAlign: 'center', paddingVertical: 20 }}>
                   {t('WARNING_PHONE_CODE_VALIDATION', 'Please update your phone number to continue')}
                 </OText>
+              )
+            ) : (
+              <>
+                <WrappCountdown>
+                  <CountDownContainer color={timer === '00:00' ? theme.colors.error : theme.colors.success}>
+                    <OText
+                      size={26}
+                      color={timer === '00:00' ? theme.colors.error : theme.colors.success}
+                    >
+                      {timer}
+                    </OText>
+                  </CountDownContainer>
+                </WrappCountdown>
+
+                <InputsSection>
+                  <OtpSection>
+                    <DigitInput
+                      disabled={otpState.length === CODE_LENGTH}
+                      onPress={handleOnPress}
+                    >
+                      {codeDigitsArray.map(toDigitInput)}
+                    </DigitInput>
+                    <TextInput
+                      ref={ref}
+                      value={otpState}
+                      placeholder='0'
+                      onChangeText={setOtpState}
+                      onSubmitEditing={handleOnBlur}
+                      keyboardType="number-pad"
+                      returnKeyType="done"
+                      textContentType="oneTimeCode"
+                      maxLength={CODE_LENGTH}
+                      style={style.hiddenCodeInput}
+                    />
+                  </OtpSection>
+                </InputsSection>
+
                 <WrapperText>
                   <TouchableOpacity
-                    onPress={() => setModalIsOpen(true)}
+                    onPress={() => handleSendOtp('phone')}
+                    disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
                   >
                     <OText color={theme.colors.primary}>
-                      {t('UPDATE_PROFILE', 'Update profile')}
+                      {t('RESEND_AGAIN', 'Resend again?')}
                     </OText>
                   </TouchableOpacity>
                 </WrapperText>
               </>
             )
-          ) : (
-            <>
-              <WrappCountdown>
-                <CountDownContainer color={timer === '00:00' ? theme.colors.error: theme.colors.success}>
-                  <OText
-                    size={26}
-                    color={timer === '00:00' ? theme.colors.error: theme.colors.success}
-                  >
-                    {timer}
-                  </OText>
-                </CountDownContainer>
-              </WrappCountdown>
-
-              <InputsSection>
-                <OtpSection>
-                  <DigitInput
-                    disabled={otpState.length === CODE_LENGTH}
-                    onPress={handleOnPress}
-                  >
-                    {codeDigitsArray.map(toDigitInput)}
-                  </DigitInput>
-                  <TextInput
-                    ref={ref}
-                    value={otpState}
-                    placeholder='0'
-                    onChangeText={setOtpState}
-                    onSubmitEditing={handleOnBlur}
-                    keyboardType="number-pad"
-                    returnKeyType="done"
-                    textContentType="oneTimeCode"
-                    maxLength={CODE_LENGTH}
-                    style={style.hiddenCodeInput}
-                  />
-                </OtpSection>
-              </InputsSection>
-
-              <WrapperText>
-                <TouchableOpacity
-                  onPress={() => handleSendOtp('phone')}
-                  disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-                >
-                  <OText color={theme.colors.primary}>
-                    {t('RESEND_AGAIN', 'Resend again?')}
-                  </OText>
-                </TouchableOpacity>
-              </WrapperText>
-            </>
-          )
-        )}
-
-      </Container>
-      <ButtonsActions>
-        <View style={{ width: '100%' }}>
-          <OButton
-            onClick={(verificationState.email || verificationState.phone)
-              ? () => setVerificationState({ email: false, phone: false })
-              : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-            }
-            text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-            bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-            borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-            textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-            imgRightSrc={null}
-            isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-            style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+          )}
+
+        </Container>
+        <ButtonsActions>
+          <View style={{ width: '100%' }}>
+            <OButton
+              onClick={(verificationState.email || verificationState.phone)
+                ? () => setVerificationState({ email: false, phone: false })
+                : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+              }
+              text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+              bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+              borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+              textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+              imgRightSrc={null}
+              isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+              style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+            />
+          </View>
+        </ButtonsActions>
+        <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
+          <UserDetails
+            user={user}
+            isEdit
+            isVerifiedPhone
           />
         </View>
-      </ButtonsActions>
-
-      <OModal
-        open={modalIsOpen}
-        entireModal
-        customClose
-        onClose={() => setModalIsOpen(false)}
-      >
-        <UserDetails
-          user={user}
-          handleSuccessUpdate={() => setModalIsOpen(false)}
-        />
-      </OModal>
+      </ScrollView>
     </SafeAreaView>
   )
 }