ordering-ui-react-native 0.22.52 → 0.22.53

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

@@ -57,9 +57,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [{ optimizeImage, parsePrice, parseDate }] = useUtils()
   const { top } = useSafeAreaInsets()
   const [{ configs }] = useConfig()
-	const [orderState] = useOrder()
-	const [{ auth }] = useSession()
-	const { product, loading, error } = productObject;
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const { product, loading, error } = productObject;
 
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
@@ -77,8 +77,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const styles = StyleSheet.create({
     photoStyle: {
       width: 45,
-			height: 45,
-			borderRadius: 7.6
+      height: 45,
+      borderRadius: 7.6
     },
     buttonStyle: {
       borderRadius: 7.6,
@@ -144,7 +144,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
-        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+          moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -166,9 +166,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleUpdateGuest = () => {
-		const guestToken = uuid.v4()
-		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
-	}
+    const guestToken = uuid.v4()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
 
   const customDayHeaderStylesCallback = () => {
     return {
@@ -193,11 +193,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleRedirectLogin = () => {
-		navigation && navigation.navigate('Login', {
-			store_slug: props.businessSlug
-		});
+    navigation && navigation.navigate('Login', {
+      store_slug: props.businessSlug
+    });
     onClose && onClose()
-	};
+  };
 
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
@@ -290,7 +290,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
     setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
   }, [productCart])
-  
+
   return (
     <>
       {loading && !error && (
@@ -450,7 +450,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               <CalendarWrapper>
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
-                    ref={dropdownRef} 
+                    ref={dropdownRef}
                     defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
@@ -462,7 +462,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     rowTextForSelection={(item, index) => {
                       return item.text
                     }}
-                    buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                    buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                     buttonTextStyle={{
                       color: theme.colors.disabled,
                       fontSize: 14,
@@ -485,7 +485,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     }}
                     renderCustomizedRowChild={(item, index) => {
                       return (
-                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                           {item.text}
                         </Text>
                       )
@@ -553,7 +553,6 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               auth &&
               orderState.options?.address_id)) && (
                 <OButton
-                  bgColor={theme.colors.primary}
                   onClick={() => handleSaveService()}
                   text={orderState.loading
                     ? t('LOADING', 'Loading')
@@ -562,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
                   isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
-                  textStyle={{ fontSize: 14, color: theme.colors.white }}
+                  textStyle={{ fontSize: 14 }}
                 />
               )}
             {auth &&
@@ -577,45 +576,44 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               ) : (
                 <OButton onClick={() => addressRedirect()} />
               ))}
-              {!auth && (
-                <OButton
-                  isDisabled={isSoldOut || maxProductQuantity <= 0}
-                  onClick={() => handleRedirectLogin()}
-                  text={
-                    isSoldOut || maxProductQuantity <= 0
-                      ? t('SOLD_OUT', 'Sold out')
-                      : t('LOGIN_SIGNUP', 'Login / Sign Up')
-                  }
-                  imgRightSrc=""
-                  textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-                  style={{
-                    height: 44,
-                    borderColor: theme.colors.primary,
-                    backgroundColor: theme.colors.white,
-                  }}
-                />
-              )}
-              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
-                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-                  {actionStatus?.loading ? (
-                    <Placeholder Animation={Fade}>
-                      <PlaceholderLine width={60} height={20} />
-                    </Placeholder>
-                  ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-                  )}
-                </TouchableOpacity>
-              )}
+            {!auth && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={
+                  isSoldOut || maxProductQuantity <= 0
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                }
+                imgRightSrc=""
+                textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+                style={{
+                  height: 44,
+                  backgroundColor: theme.colors.white,
+                }}
+              />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+              <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                {actionStatus?.loading ? (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine width={60} height={20} />
+                  </Placeholder>
+                ) : (
+                  <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                )}
+              </TouchableOpacity>
+            )}
           </ButtonWrapper>
         </Container>
       )}
 
       <OModal
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				entireModal
-			>
-				<ScrollView contentContainerStyle={styles.professionalList}>
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        entireModal
+      >
+        <ScrollView contentContainerStyle={styles.professionalList}>
           <View style={{ paddingVertical: 11 }}>
             <OText
               size={14}
@@ -671,7 +669,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
             </TouchableOpacity>
           ))}
         </ScrollView>
-			</OModal>
+      </OModal>
     </>
   )
 }

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

@@ -72,11 +72,6 @@ export const SessionsUI = (props: SessionsParams) => {
         showCall={false}
         paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
-        buttonProps={{
-          bgColor: theme.colors.white,
-          borderColor: theme.colors.white,
-          textStyle: { color: theme.colors.btnFont }
-        }}
       />
       {user?.session_strategy === 'jwt_session' ? (
         <>
@@ -116,14 +111,14 @@ export const SessionsUI = (props: SessionsParams) => {
                 <OButton
                   text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, true)}
                   style={{ borderRadius: 7.6, marginTop: 30 }}
                 />
                 <OButton
                   text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, false)}
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
@@ -141,7 +136,7 @@ export const SessionsUI = (props: SessionsParams) => {
           <OButton
             text={t('ACTIVE_SESSIONS', 'Active sessions')}
             isDisabled={actionState.loading}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            textStyle={{ fontSize: 14 }}
             onClick={() => onDeleteAllSessions(true, false)}
             style={{ borderRadius: 7.6, marginTop: 20 }}
           />

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

@@ -488,11 +488,6 @@ const SignupFormUI = (props: SignupParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginLeft: 0, marginRight: 0 }}
-          buttonProps={{
-						bgColor: theme.colors.white,
-						borderColor: theme.colors.white,
-						textStyle: { color: theme.colors.btnFont }
-					}}
 				/>
 			)}
 			<FormSide>
@@ -794,9 +789,9 @@ const SignupFormUI = (props: SignupParams) => {
 										<OButton
 											imgRightSrc={null}
 											text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-											bgColor='#FFF'
-											borderColor='#FFF'
-											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+											bgColor={theme.colors.white}
+											borderColor={theme.colors.white}
+											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
 											textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
 											onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
 										/>
@@ -881,9 +876,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-							borderColor={theme.colors.primary}
 							imgRightSrc={null}
-							textStyle={{ color: 'white' }}
 							isLoading={isLoadingVerifyModal}
 							indicatorColor={theme.colors.white}
 							style={{ borderRadius: 7.6, marginTop: 6 }}
@@ -892,9 +885,6 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={signupButtonText}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
 							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}

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

@@ -82,7 +82,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       elevation: 3
     },
     buttonText: {
-      color: theme.colors.primary,
       fontSize: 10,
       marginLeft: 2,
       marginRight: 2,

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

@@ -315,8 +315,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 
 							}}
 							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
-							borderColor={theme?.colors.primary}
-							textStyle={{ color: theme.colors.primary }}
+							borderColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
+							textStyle={{ color: isSoldOut ? theme?.colors?.white : theme?.colors?.primary }}
 							text={t('ADD', 'Add')}
 						/>
 					)}

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

@@ -65,9 +65,6 @@ const StripeCardFormUI = (props: any) => {
 					<OButton
 						text={loading ? t('LOADING', 'Loading...') : t('ADD', 'Add')}
 						isDisabled={!cardState?.valid || loading}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={handleSubmit}
 					/>

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

@@ -284,7 +284,6 @@ const StripeElementsFormUI = (props: any) => {
 					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
 					imgRightSrc={null}
 					onClick={() => handleSaveCard()}
 					isDisabled={!isCompleted}

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

@@ -138,9 +138,6 @@ const StripeRedirectFormUI = (props: any) => {
 			<OButton
 				// text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
 				text={t('OK', 'OK')}
-				bgColor={theme.colors.primary}
-				borderColor={theme.colors.primary}
-				textStyle={{ color: 'white' }}
 				imgRightSrc={null}
 				// isDisabled={formState.isSubmitting}
 				// onClick={() => handleSubmit(onSubmit)}

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -158,9 +158,7 @@ export const UpsellingContent = (props: any) => {
                 <OButton
                     imgRightSrc=''
                     text={t('CHECKOUT', 'Checkout')}
-                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
-                    bgColor={theme.colors.primary}
-                    borderColor={theme.colors.primary}
+                    textStyle={{ fontSize: 14 }}
                     style={{ ...styles.closeUpsellingButton }}
                     onClick={() => handleUpsellingPage(cart)}
                 />

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

@@ -484,9 +484,7 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.primary}
-								textStyle={{ color: theme.colors.white, fontSize: 14 }}
-								borderColor={theme.colors.primary}
+								textStyle={{ fontSize: 14 }}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
 								style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -504,12 +502,10 @@ export const UserFormDetailsUI = (props: any) => {
 								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
 								: t('CONTINUE', 'Continue'))
 					}
-					bgColor={theme.colors.primary}
 					textStyle={{
 						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
 						fontSize: 14
 					}}
-					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{

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

@@ -287,11 +287,6 @@ const ProfileUI = (props: ProfileParams) => {
 					onActionLeft={() => navigation.goBack()}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
-          buttonProps={{
-            bgColor: theme.colors.white,
-            borderColor: theme.colors.white,
-            textStyle: { color: theme.colors.btnFont }
-          }}
 				/>
 				<CenterView>
 					<View style={styles.photo}>

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

@@ -309,13 +309,11 @@ const WalletsUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
                 marginBottom: 10
               }}
+              useArrow
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}
               iconProps={{

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

@@ -143,15 +143,12 @@ const SocketStatusUI = (props: any) => {
               <OButton
                 onClick={() => setOpenModal(false)}
                 bgColor={theme.colors.white}
-                borderColor={theme.colors.primary}
                 textStyle={{ color: theme.colors.primary }}
                 style={{ borderRadius: 8, height: 48 }}
                 text={t('CLOSE', 'Close')}
               />
-               <OButton
+              <OButton
                 onClick={() => RNRestart.Restart()}
-                borderColor={theme.colors.primary}
-                textStyle={{ color: theme.colors.white }}
                 style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
                 text={t('UPDATE', 'Update')}
               />

package/themes/original/src/components/shared/OButton.tsx

@@ -85,6 +85,7 @@ interface Props {
 	isDisabledWithSameStyles?: boolean;
 	icon?: any;
 	iconProps?: any
+	useArrow?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -119,7 +120,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={{ ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: props.useArrow ? theme.colors.white : props.bgColor ?? theme.colors.primary, borderColor: props.useArrow ? theme.colors.white : props.borderColor ?? theme.colors.primary, borderRadius: props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +128,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={{ ...props.textStyle, color: props?.textStyle?.color }}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: props.useArrow ? theme.colors.btnFont : props?.textStyle?.color ?? theme.colors.white }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />