ordering-ui-react-native 0.15.37 → 0.15.38-test

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

@@ -61,7 +61,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleChangeSearch,
 		businessId
 	} = props;
-	
 	const theme = useTheme();
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
@@ -318,7 +317,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled

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

@@ -255,7 +255,7 @@ const CartUI = (props: any) => {
                   <OSRow>
                     <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -446,8 +446,6 @@ const CartUI = (props: any) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -22,9 +22,9 @@ export const CartContent = (props: any) => {
 		<CCContainer>
 			{isOrderStateCarts && carts?.length > 0 && (
 				<>
-					<OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
+					{/* <OText size={24} lineHeight={36} weight={'600'} style={{ marginBottom: 20 }}>
 						{carts.length > 1 ? t('MY_CARTS', 'My Carts') : t('CART', 'Cart')}
-					</OText>
+					</OText> */}
 					{carts.map((cart: any, i: number) => (
 						<CCList key={i} style={{ overflow: 'visible' }}>
 							{cart.products.length > 0 && (

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

@@ -554,11 +554,12 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-					{!cartState.loading && cart && isWalletEnabled && (
+					{!cartState.loading && cart && isWalletEnabled && businessDetails?.business?.configs && (
 						<WalletPaymentOptionContainer>
 							<PaymentOptionWallet
 								cart={cart}
 								businessId={cart?.business_id}
+								businessConfigs={businessDetails?.business?.configs}
 							/>
 						</WalletPaymentOptionContainer>
 					)}

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

@@ -36,7 +36,7 @@ export const Home = (props: any) => {
 					{t('WELCOME', 'Welcome!')}
 				</OText>
 				<OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
-					{t('LETS_START_ORDER', "Let's start to order now")}
+					{t('SUBTITLE_HOME', "Let's start to order now")}
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}

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

@@ -4,6 +4,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Recaptcha from 'react-native-recaptcha-that-works'
 
 import {
 	LoginForm as LoginFormController,
@@ -18,7 +19,6 @@ import { FacebookLogin } from '../FacebookLogin';
 import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
 import { OModal } from '../../../../../src/components/shared';
 
-
 import {
 	Container,
 	ButtonsWrapper,
@@ -32,6 +32,7 @@ import {
 	LineSeparator,
 	SkeletonWrapper,
 	TabBtn,
+  RecaptchaButton
 } from './styles';
 
 import NavBar from '../NavBar';
@@ -60,7 +61,9 @@ const LoginFormUI = (props: LoginParams) => {
 		handleSendVerifyCode,
 		handleCheckPhoneCode,
 		onNavigationRedirect,
-		notificationState
+		notificationState,
+		handleReCaptcha,
+		enableReCaptcha
 	} = props;
 
 	const [, { showToast }] = useToast();
@@ -79,6 +82,8 @@ const LoginFormUI = (props: LoginParams) => {
 			cellphone: null,
 		},
 	});
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const theme = useTheme();
 
@@ -100,10 +105,15 @@ const LoginFormUI = (props: LoginParams) => {
 			flexGrow: 1,
 			marginBottom: 7,
 		},
+		recaptchaIcon: {
+		width: 100,
+		height: 100,
+		}
 	});
 
 	const emailRef = useRef<any>({});
 	const passwordRef = useRef<any>({});
+  	const recaptchaRef = useRef<any>({});
 
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
@@ -156,6 +166,33 @@ const LoginFormUI = (props: LoginParams) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
+  	const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
 			formState.result?.result &&
@@ -399,6 +436,39 @@ const LoginFormUI = (props: LoginParams) => {
 								</OText>
 							</TouchableOpacity>
 						)}
+
+						{enableReCaptcha && (
+							<>
+								<TouchableOpacity
+									onPress={handleOpenRecaptcha}
+								>
+									<RecaptchaButton>
+										{recaptchaVerified ? (
+											<MaterialCommunityIcons
+												name="checkbox-marked"
+												size={26}
+												color={theme.colors.primary}
+											/>
+										) : (
+											<MaterialCommunityIcons
+												name="checkbox-blank-outline"
+												size={26}
+												color={theme.colors.mediumGray}
+											/>
+										)}
+										<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+									</RecaptchaButton>
+								</TouchableOpacity>
+								<Recaptcha
+									ref={recaptchaRef}
+									siteKey={recaptchaConfig?.siteKey}
+									baseUrl={recaptchaConfig?.baseUrl}
+									onVerify={onRecaptchaVerify}
+									onExpire={() => setRecaptchaVerified(false)}
+								/>
+							</>
+						)}
+
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={loginButtonText}
@@ -559,6 +629,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
 	const loginProps = {
 		...props,
+    isRecaptchaEnable: true,
 		UIComponent: LoginFormUI,
 	};
 	return <LoginFormController {...loginProps} />;

package/themes/original/src/components/LoginForm/styles.tsx

@@ -36,7 +36,7 @@ export const LoginWith = styled.View`
   width: 100%;
   align-items: flex-start;
   border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border}
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
 `;
 
 export const FormInput = styled.View`
@@ -80,3 +80,8 @@ export const LineSeparator = styled.View`
 export const SkeletonWrapper = styled.View`
   width: 90%;
 `
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

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

@@ -3,14 +3,20 @@ import { TouchableOpacity } from 'react-native';
 import { LogoutAction } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
+import { _retrieveStoreData } from '../../providers/StoreUtil';
 
 const LogoutButtonUI = (props: any) => {
 	const { handleLogoutClick, text, color, iconSize } = props
 	const theme = useTheme();
 
+	const handleClick = async () => {
+		const data = await _retrieveStoreData('notification_state');
+		handleLogoutClick(data)
+	  };
+	
 	return (
 		<TouchableOpacity
-			onPress={() => handleLogoutClick()}
+			onPress={() => handleClick()}
 			style={{ flexDirection: 'row', alignItems: 'center' }}
 		>
 			<OIcon

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

@@ -540,6 +540,11 @@ const styles = StyleSheet.create({
 
 export const Messages = (props: MessagesParams) => {
 	const [allMessages, setAllMessages] = useState(props.messages)
+
+	useEffect(() => {
+		setAllMessages(props.messages)
+	}, [props.messages])
+
 	const MessagesProps = {
 		...props,
 		UIComponent: MessagesUI,

package/themes/original/src/components/Messages/styles.tsx

@@ -1,7 +1,5 @@
-
 import styled, { css } from 'styled-components/native'
 
-
 export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -39,4 +37,4 @@ export const MessageTypeItem = styled.View`
   ${({ active }: any) => active && css`
     background-color: ${(props: any) => props.theme.colors.whiteGray};
   `}
-`
+`

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

@@ -4,6 +4,7 @@ import CalendarStrip from 'react-native-calendar-strip'
 import {
 	useLanguage,
 	useConfig,
+	useUtils,
 	useOrder,
 	MomentOption as MomentOptionController,
 } from 'ordering-components/native';
@@ -132,6 +133,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
+	const [{ parseTime }] = useUtils()
 	const [orderState] = useOrder();
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
@@ -143,6 +145,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	});
 	const { bottom } = useSafeAreaInsets();
 
+	const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
 	const [selectedTime, setSelectedTime] = useState(null);
 	const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
 	const [selectDate, setSelectedDate] = useState<any>(null)
@@ -338,7 +342,12 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 													style={{
 														lineHeight: 24
 													}}
-												>{time.startTime}</OText>
+												>{is12hours ? ( 
+													time.startTime.includes('12') 
+														? `${time.startTime}PM`
+														: parseTime(moment(time.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+													) : time.startTime
+												}</OText>
 											</TimeItem>
 										</TouchableOpacity>
 									))}

package/themes/original/src/components/MomentOption/styles.tsx

@@ -18,7 +18,7 @@ export const OrderTimeWrapper = styled.View`
 
 export const TimeListWrapper = styled.ScrollView`
   margin-top: 30px;
-  max-height: 160px;
+  max-height: 210px;
 `
 
 export const TimeContentWrapper = styled.View`

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

@@ -898,7 +898,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <OSRow>
                       <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
@@ -1025,8 +1025,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
-        title={`${openTaxModal.data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
         <TaxInformation
           type={openTaxModal.type}

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

@@ -98,7 +98,7 @@ const OrderProgressUI = (props: any) => {
       { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
       { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
       { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY  || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
+      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
     ]
 
     const objectStatus = orderStatus.find((o) => o.key === status)
@@ -131,7 +131,7 @@ const OrderProgressUI = (props: any) => {
 
   useEffect(() => {
     if (isFocused) {
-      loadOrders()
+      loadOrders(false, false, false, true)
     }
   }, [isFocused])
 
@@ -188,7 +188,7 @@ const OrderProgressUI = (props: any) => {
               <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${getOrderStatus(lastOrder.status)?.percentage}%` : '0%' }} />
             </ProgressContentWrapper>
             <ProgressTextWrapper>
-              <OText size={12}>{getOrderStatus(lastOrder.status)?.value}</OText>
+              <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
               <TimeWrapper>
                 <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
                 <OText size={11}>

package/themes/original/src/components/OrderProgress/styles.tsx

@@ -20,6 +20,7 @@ export const ProgressTextWrapper = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
 `
 
 export const OrderInfoWrapper = styled.View`

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

@@ -112,7 +112,7 @@ const OrderSummaryUI = (props: any) => {
       {cart?.products?.length > 0 && (
         <>
           <OSProductList>
-            {cart?.products.map((product: any) => (
+            {cart?.products?.map((product: any) => (
               <ProductItemAccordion
                 key={product.code}
                 product={product}
@@ -202,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%)
                       </OText>
                       <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />

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

@@ -20,6 +20,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
+    businessConfigs,
     businessId,
     walletsState,
     selectWallet,
@@ -37,6 +38,9 @@ const PaymentOptionWalletUI = (props: any) => {
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
 
+  const isBusinessWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
+  const isBusinessWalletPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -53,11 +57,11 @@ const PaymentOptionWalletUI = (props: any) => {
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-      isActive: isWalletCashEnabled
+      isActive: isWalletCashEnabled && isBusinessWalletCashEnabled
     },
     credit_point: {
       name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-      isActive: isWalletPointsEnabled
+      isActive: isWalletPointsEnabled && isBusinessWalletPointsEnabled
     }
   }
 

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

@@ -126,7 +126,9 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (props.paySelected && props.paySelected?.data) {
-			setPaymethodData && setPaymethodData(props.paySelected?.data)
+			requestAnimationFrame(() => {
+				setPaymethodData && setPaymethodData(props.paySelected?.data)
+			})
 		}
 	}, [props.paySelected])
 

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

@@ -22,8 +22,9 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		textStyle,
 		flagStyle,
 		noDropIcon,
-    isDisabled,
-		isStartValidation
+		isDisabled,
+		isStartValidation,
+		changeCountry
 	} = props
 
 	const theme = useTheme();
@@ -106,11 +107,16 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 			)}
 			<PhoneInput
 				ref={phoneInput}
-        disabled={isDisabled}
+				disabled={isDisabled}
 				defaultValue={userphoneNumber || defaultValue}
-				defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+				defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: defaultCode
+					: configs?.default_country_code?.value}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
+				onChangeCountry={(country) => changeCountry?.(country)}
 				countryPickerProps={{ withAlphaFilter: true }}
 				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
 				textInputStyle={textStyle}

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

@@ -143,18 +143,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 							</OText>
 						</Information>
 						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
+							{order.cart && (
+								<OButton
+									text={t('REORDER', 'Reorder')}
+									imgRightSrc={''}
+									textStyle={styles.buttonText}
+									style={
+										reorderLoading && order.id === reorderSelected
+											? styles.reorderLoading
+											: styles.reorderbutton
+									}
+									onClick={() => handleReorderClick(order.id)}
+									isLoading={reorderLoading && order.id === reorderSelected}
+								/>
+							)}
 							{allowedOrderStatus.includes(parseInt(order?.status)) &&
 								!order.review && (
 									<TouchableOpacity

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

@@ -695,7 +695,7 @@ export const ProductOptionsUI = (props: any) => {
 												</View>
 											)}
 											{product?.extras.map((extra: any) =>
-												extra.options.map((option: any) => {
+												extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 													const currentState =
 														productCart.options[`id:${option.id}`] || {};
 													return (
@@ -711,7 +711,7 @@ export const ProductOptionsUI = (props: any) => {
 																				backgroundColor: isError(option.id),
 																				borderRadius: 7.6
 																			}}>
-																			{option.suboptions.map(
+																			{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																				(suboption: any) => {
 																					const currentState =
 																						productCart.options[
@@ -779,7 +779,7 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													{product?.extras.map((extra: any) =>
-														extra.options.map((option: any) => {
+														extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
 															if (
 																option.id == selOpt ||
 																(hasRespected(
@@ -804,7 +804,7 @@ export const ProductOptionsUI = (props: any) => {
 																								option.id,
 																							),
 																						}}>
-																						{option.suboptions.map(
+																						{option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
 																							(suboption: any) => {
 																								const currentState =
 																									productCart.options[