ordering-ui-react-native 0.12.47 → 0.12.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/AcceptOrRejectOrder/index.tsx +4 -3
  3. package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx +1 -0
  4. package/themes/business/src/components/OrderDetails/Business.tsx +54 -102
  5. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +36 -3
  6. package/themes/business/src/components/OrderDetails/styles.tsx +3 -4
  7. package/themes/business/src/types/index.tsx +3 -3
  8. package/themes/doordash/src/components/ProductForm/index.tsx +37 -28
  9. package/themes/instacart/src/components/ProductForm/index.tsx +26 -15
  10. package/themes/original/src/components/ActiveOrders/index.tsx +19 -0
  11. package/themes/original/src/components/ActiveOrders/styles.tsx +5 -0
  12. package/themes/original/src/components/BusinessController/styles.tsx +5 -5
  13. package/themes/original/src/components/BusinessTypeFilter/index.tsx +16 -16
  14. package/themes/original/src/components/BusinessTypeFilter/styles.tsx +1 -0
  15. package/themes/original/src/components/BusinessesListing/index.tsx +8 -9
  16. package/themes/original/src/components/BusinessesListing/styles.tsx +1 -0
  17. package/themes/original/src/components/ProductForm/index.tsx +39 -36
  18. package/themes/single-business/src/components/ProductForm/index.tsx +15 -12
  19. package/themes/uber-eats/src/components/ProductForm/index.tsx +41 -44
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.47",
3
+ "version": "0.12.51",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/src/components/AcceptOrRejectOrder/index.tsx CHANGED
@@ -214,7 +214,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
214
214
  if (actions && action === 'accept') {
215
215
  const interval = setTimeout(() => {
216
216
  timerRef?.current?.focus?.()
217
- }, 250)
217
+ }, 200)
218
218
  return () => {
219
219
  clearTimeout(interval)
220
220
  }
@@ -225,7 +225,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
225
225
  <KeyboardAvoidingView
226
226
  enabled
227
227
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
228
- style={{ flex: 1, paddingHorizontal: 30, paddingTop: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
228
+ style={{ flex: 1, paddingHorizontal: 30, paddingVertical: 30, marginTop: top, marginBottom: bottom, justifyContent: 'space-between' }}>
229
229
  <View>
230
230
  <OIconButton
231
231
  icon={theme.images.general.arrow_left}
@@ -369,6 +369,8 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
369
369
  placeholderTextColor={theme.colors.textGray}
370
370
  color={theme.colors.textGray}
371
371
  onEndEditing={handleFixTime}
372
+ onSubmitEditing={() => handleAcceptOrReject()}
373
+ onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
372
374
  />
373
375
 
374
376
  {showTextArea && (
@@ -384,7 +386,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
384
386
  value={comments}
385
387
  onChange={setComments}
386
388
  />
387
- <View style={{ height: 20 }} />
388
389
  </Comments>
389
390
  )}
390
391
  </Content>
package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx CHANGED
@@ -33,4 +33,5 @@ export const Action = styled.View``;
33
33
 
34
34
  export const Comments = styled.View`
35
35
  margin-top: 20px;
36
+ padding-bottom: 40px;
36
37
  `;
package/themes/business/src/components/OrderDetails/Business.tsx CHANGED
@@ -157,9 +157,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
157
157
  : '';
158
158
 
159
159
  const customerName = !!order?.customer?.name
160
- ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${
161
- order?.customer?.lastname || ''
162
- } ${order?.customer?.second_lastname || ''} \n`
160
+ ? `${order?.customer?.name} ${order?.customer?.middle_name || ''} ${order?.customer?.lastname || ''
161
+ } ${order?.customer?.second_lastname || ''} \n`
163
162
  : '';
164
163
 
165
164
  const customerEmail = !!order?.customer.email
@@ -183,26 +182,25 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
183
182
  : '';
184
183
 
185
184
  const payment = order?.paymethod?.name
186
- ? `${order?.paymethod?.name} - ${
187
- order.delivery_type === 1
188
- ? t('DELIVERY', 'Delivery')
189
- : order.delivery_type === 2
190
- ? t('PICKUP', 'Pickup')
191
- : order.delivery_type === 3
185
+ ? `${order?.paymethod?.name} - ${order.delivery_type === 1
186
+ ? t('DELIVERY', 'Delivery')
187
+ : order.delivery_type === 2
188
+ ? t('PICKUP', 'Pickup')
189
+ : order.delivery_type === 3
192
190
  ? t('EAT_IN', 'Eat in')
193
191
  : order.delivery_type === 4
194
- ? t('CURBSIDE', 'Curbside')
195
- : t('DRIVER_THRU', 'Driver thru')
196
- }\n`
192
+ ? t('CURBSIDE', 'Curbside')
193
+ : t('DRIVER_THRU', 'Driver thru')
194
+ }\n`
197
195
  : '';
198
196
 
199
197
  const getSuboptions = (suboptions: any) => {
200
198
  const array: any = []
201
199
  suboptions?.length > 0 &&
202
- suboptions?.map((suboption: any) => {
203
- const string = `${getFormattedSubOptionName(suboption)}`
204
- array.push(string)
205
- })
200
+ suboptions?.map((suboption: any) => {
201
+ const string = `${getFormattedSubOptionName(suboption)}`
202
+ array.push(string)
203
+ })
206
204
 
207
205
  return array.join('')
208
206
  }
@@ -211,12 +209,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
211
209
  const array: any = [];
212
210
 
213
211
  options?.length &&
214
- options?.map((option: any) => {
215
- const string =
216
- ` ${option.name}\n ${getSuboptions(option.suboptions)}`;
212
+ options?.map((option: any) => {
213
+ const string =
214
+ ` ${option.name}\n ${getSuboptions(option.suboptions)}`;
217
215
 
218
- array.push(string)
219
- })
216
+ array.push(string)
217
+ })
220
218
 
221
219
  if (productComment) {
222
220
  array.push(` ${t('COMMENT', 'Comment')}\n ${productComment}\n`)
@@ -415,7 +413,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
415
413
  onClickButton={() => navigation.navigate('Orders')}
416
414
  />
417
415
  )}
418
-
419
416
  {order && Object.keys(order).length > 0 && (error?.length < 1 || !error) && (
420
417
  <View style={{ flex: 1 }}>
421
418
  <OrderHeaderComponent
@@ -423,6 +420,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
423
420
  handleOpenMapView={handleOpenMapView}
424
421
  handleOpenMessagesForBusiness={handleOpenMessagesForBusiness}
425
422
  getOrderStatus={getOrderStatus}
423
+ handleViewSummaryOrder={handleViewSummaryOrder}
424
+ handleCopyClipboard={handleCopyClipboard}
426
425
  handleArrowBack={handleArrowBack}
427
426
  />
428
427
  <OrderDetailsContainer
@@ -468,7 +467,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
468
467
  <OText>
469
468
  {itemsDrivers.length > 0
470
469
  ? order?.driver?.name ||
471
- t('SELECT_DRIVER', 'Select Driver')
470
+ t('SELECT_DRIVER', 'Select Driver')
472
471
  : t('WITHOUT_DRIVERS', 'Without drivers')}
473
472
  </OText>
474
473
  <OIcon
@@ -515,66 +514,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
515
514
  </AssignDriver>
516
515
  )}
517
516
 
518
- {order?.status === 7 && (
519
- <Pickup>
520
- <OButton
521
- style={styles.btnPickUp}
522
- textStyle={{ color: theme.colors.primary }}
523
- text={t('READY_FOR_PICKUP', 'Ready for pickup')}
524
- onClick={() =>
525
- handleChangeOrderStatus && handleChangeOrderStatus(4)
526
- }
527
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
528
- imgRightSrc={false}
529
- isLoading={loading}
530
- />
531
- </Pickup>
532
- )}
533
-
534
- {order?.status === 4 && ![1].includes(order?.delivery_type) && (
535
- <Pickup>
536
- <OButton
537
- style={{
538
- ...styles.btnPickUp,
539
- backgroundColor: theme.colors.green,
540
- }}
541
- textStyle={{ color: theme.colors.white }}
542
- text={t(
543
- 'PICKUP_COMPLETED_BY_CUSTOMER',
544
- 'Pickup completed by customer',
545
- )}
546
- onClick={() =>
547
- handleChangeOrderStatus && handleChangeOrderStatus(15)
548
- }
549
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
550
- imgRightSrc={false}
551
- isLoading={loading}
552
- />
553
- </Pickup>
554
- )}
555
-
556
- {order?.status === 4 && ![1].includes(order?.delivery_type) && (
557
- <Pickup>
558
- <OButton
559
- style={{
560
- ...styles.btnPickUp,
561
- backgroundColor: theme.colors.red,
562
- }}
563
- textStyle={{ color: theme.colors.white }}
564
- text={t(
565
- 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
566
- 'Order not picked up by customer',
567
- )}
568
- onClick={() =>
569
- handleChangeOrderStatus && handleChangeOrderStatus(17)
570
- }
571
- imgLeftStyle={{ tintColor: theme.colors.backArrow }}
572
- imgRightSrc={false}
573
- isLoading={loading}
574
- />
575
- </Pickup>
576
- )}
577
-
578
517
  <OModal
579
518
  open={openModalForBusiness}
580
519
  order={order}
@@ -636,7 +575,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
636
575
  {order &&
637
576
  Object.keys(order).length > 0 &&
638
577
  getOrderStatus(order?.status, t)?.value ===
639
- t('PENDING', 'Pending') && (
578
+ t('PENDING', 'Pending') && (
640
579
  <FloatingButton
641
580
  btnText={t('REJECT', 'Reject')}
642
581
  isSecondaryBtn={false}
@@ -649,24 +588,37 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
649
588
  widthButton={'45%'}
650
589
  />
651
590
  )}
652
-
653
- {order &&
654
- Object.keys(order).length > 0 &&
655
- getOrderStatus(order?.status, t)?.value !==
656
- t('PENDING', 'Pending') && (
657
- <FloatingButton
658
- btnText={t('COPY', 'Copy')}
659
- isSecondaryBtn={false}
660
- colorTxt1={theme.colors.primary}
661
- secondButtonClick={handleViewSummaryOrder}
662
- firstButtonClick={handleCopyClipboard}
663
- secondBtnText={t('PRINT', 'Print')}
664
- secondButton={true}
665
- firstColorCustom="transparent"
666
- secondColorCustom={theme.colors.primary}
667
- widthButton={'45%'}
668
- />
669
- )}
591
+ {order?.status === 7 && (
592
+ <FloatingButton
593
+ btnText={t('READY_FOR_PICKUP', 'Ready for pickup')}
594
+ colorTxt1={theme.colors.primary}
595
+ color={theme.colors.btnBGWhite}
596
+ firstButtonClick={() => handleChangeOrderStatus?.(4)}
597
+ widthButton={'100%'}
598
+ disabled={loading}
599
+ />
600
+ )}
601
+ {order?.status === 4 && ![1].includes(order?.delivery_type) && (
602
+ <FloatingButton
603
+ btnText={t(
604
+ 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
605
+ 'Order not picked up by customer',
606
+ )}
607
+ isSecondaryBtn={false}
608
+ colorTxt1={theme.colors.white}
609
+ secondButtonClick={() => handleChangeOrderStatus?.(15)}
610
+ firstButtonClick={() => handleChangeOrderStatus?.(17)}
611
+ secondBtnText={t(
612
+ 'PICKUP_COMPLETED_BY_CUSTOMER',
613
+ 'Pickup completed by customer',
614
+ )}
615
+ secondButton={true}
616
+ firstColorCustom={theme.colors.red}
617
+ secondColorCustom={theme.colors.green}
618
+ widthButton={'45%'}
619
+ disabled={loading}
620
+ />
621
+ )}
670
622
  </View>
671
623
  )}
672
624
  </>
package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx CHANGED
@@ -27,7 +27,9 @@ interface OrderHeader {
27
27
  handleOpenMapView?: any,
28
28
  handleOpenMessagesForBusiness?: any,
29
29
  getOrderStatus?: any,
30
- logisticOrderStatus?: Array<number>
30
+ logisticOrderStatus?: Array<number>,
31
+ handleViewSummaryOrder: any;
32
+ handleCopyClipboard: any
31
33
  }
32
34
 
33
35
  export const OrderHeaderComponent = (props: OrderHeader) => {
@@ -37,7 +39,9 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
37
39
  handleOpenMapView,
38
40
  handleOpenMessagesForBusiness,
39
41
  getOrderStatus,
40
- logisticOrderStatus
42
+ logisticOrderStatus,
43
+ handleViewSummaryOrder,
44
+ handleCopyClipboard
41
45
  } = props
42
46
  const theme = useTheme();
43
47
  const [, t] = useLanguage();
@@ -46,7 +50,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
46
50
  const styles = StyleSheet.create({
47
51
  icons: {
48
52
  maxWidth: 40,
49
- height: 25,
53
+ height: 40,
54
+ padding: 10,
50
55
  alignItems: 'flex-end',
51
56
  },
52
57
  })
@@ -93,6 +98,34 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
93
98
  {
94
99
  (!order?.isLogistic || !logisticOrderStatus?.includes(order?.status)) && (
95
100
  <Actions>
101
+ {getOrderStatus(order?.status, t)?.value !==
102
+ t('PENDING', 'Pending') && (
103
+ <>
104
+ <OIconButton
105
+ icon={theme.images.general.copy}
106
+ iconStyle={{
107
+ width: 20,
108
+ height: 25,
109
+ top: 2,
110
+ tintColor: theme.colors.backArrow,
111
+ }}
112
+ borderColor={theme.colors.clear}
113
+ style={styles.icons}
114
+ onClick={() => handleCopyClipboard()}
115
+ />
116
+ <OIconButton
117
+ icon={theme.images.general.print}
118
+ iconStyle={{
119
+ width: 25,
120
+ height: 22,
121
+ tintColor: theme.colors.backArrow,
122
+ }}
123
+ borderColor={theme.colors.clear}
124
+ style={styles.icons}
125
+ onClick={() => handleViewSummaryOrder()}
126
+ />
127
+ </>
128
+ )}
96
129
  <OIconButton
97
130
  icon={theme.images.general.map}
98
131
  iconStyle={{
package/themes/business/src/components/OrderDetails/styles.tsx CHANGED
@@ -28,14 +28,13 @@ export const OrderContent = styled.View`
28
28
  `;
29
29
 
30
30
  export const OrderHeader = styled.View`
31
- padding-vertical: 20px;
32
- border-bottom-width: 10px;
33
- border-bottom-color: ${(props: any) => props.theme.colors.inputChat};
31
+ padding-top: 20px;
32
+ padding-bottom: 10px;
34
33
  `;
35
34
 
36
35
  export const OrderBusiness = styled.View`
37
36
  position: relative;
38
- bottom: 10px;
37
+ bottom: 20px;
39
38
  padding-vertical: 20px;
40
39
  flex-direction: column;
41
40
  border-bottom-width: 10px;
package/themes/business/src/types/index.tsx CHANGED
@@ -526,9 +526,9 @@ export interface TagsParams {
526
526
  interface actions {
527
527
  accept: string;
528
528
  reject: string;
529
- pickupFailed?: string;
530
- deliveryFailed?: string;
531
- notReady?: string;
529
+ pickupFailed: string;
530
+ deliveryFailed: string;
531
+ notReady: string;
532
532
  }
533
533
 
534
534
  interface textTranslate {
package/themes/doordash/src/components/ProductForm/index.tsx CHANGED
@@ -172,24 +172,33 @@ export const ProductOptionsUI = (props: any) => {
172
172
  </View>
173
173
  </Placeholder>
174
174
  ) : (
175
- <>
176
- <OText style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.large }}>{product?.name || productCart.name}</OText>
177
- {/* <OText size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText> */}
178
- </>
175
+ <View style={{ flexDirection: 'column', width: '100%' }}>
176
+ <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
177
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
178
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
179
+ <OText size={14} style={{ marginBottom: 10, flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
180
+ {
181
+ ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
182
+ && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
183
+ }
184
+ {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
185
+ <>&nbsp;&#183;&nbsp;</>
186
+ )}
187
+ {product?.estimated_person
188
+ && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
189
+ }
190
+ </OText>
191
+ )}
192
+ </View>
193
+ <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
194
+ </View>
179
195
  )}
180
196
  </ProductTitle>
181
- <ProductDescription>
182
- <OText style={theme.labels.small as TextStyle} color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
183
- {(
184
- (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
185
- (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
186
- ) && (
187
- <>
188
- <OText size={20}>{t('SKU', 'Sku')}</OText>
189
- <OText>{product?.sku || productCart?.sku}</OText>
190
- </>
191
- )}
192
- </ProductDescription>
197
+ {(product?.description || productCart?.description) && (
198
+ <ProductDescription>
199
+ <OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
200
+ </ProductDescription>
201
+ )}
193
202
  {loading && !product ? (
194
203
  <>
195
204
  {[...Array(2)].map((item, i) => (
@@ -319,18 +328,18 @@ export const ProductOptionsUI = (props: any) => {
319
328
 
320
329
  <View style={{ width: '100%' }}>
321
330
  {/* {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && ( */}
322
- <OButton
323
- onClick={() => handleSaveProduct()}
324
- imgRightSrc=''
325
- text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
326
- textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
327
- textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
328
- style={{
329
- backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
330
- borderWidth: 1, shadowOpacity: 0, height: 40,
331
- borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
332
- }}
333
- />
331
+ <OButton
332
+ onClick={() => handleSaveProduct()}
333
+ imgRightSrc=''
334
+ text={`${orderState.loading ? t('LOADING', 'Loading') : editMode ? t('UPDATE', 'Update') : t('ADD_TO_CART', 'Add to Cart')}`}
335
+ textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
336
+ textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
337
+ style={{
338
+ backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
339
+ borderWidth: 1, shadowOpacity: 0, height: 40,
340
+ borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
341
+ }}
342
+ />
334
343
  {/* )} */}
335
344
  {auth && !orderState.options?.address_id && (
336
345
  orderState.loading ? (
package/themes/instacart/src/components/ProductForm/index.tsx CHANGED
@@ -120,7 +120,7 @@ export const ProductOptionsUI = (props: any) => {
120
120
  <ProductHeader
121
121
  source={{ uri: product?.images || productCart?.images }}
122
122
  resizeMode={'contain'}
123
- style={{height: windowWidth, maxHeight: windowWidth}}
123
+ style={{ height: windowWidth, maxHeight: windowWidth }}
124
124
  />
125
125
  </>
126
126
  )}
@@ -135,22 +135,33 @@ export const ProductOptionsUI = (props: any) => {
135
135
  </View>
136
136
  </Placeholder>
137
137
  ) : (
138
- <OText mBottom={7} style={{ flex: I18nManager.isRTL ? 0 : 1, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
138
+ <View style={{ flexDirection: 'column', width: '100%' }}>
139
+ <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}>{product?.name || productCart.name}</OText>
140
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
141
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
142
+ <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
143
+ {
144
+ ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
145
+ && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
146
+ }
147
+ {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
148
+ <>&nbsp;&#183;&nbsp;</>
149
+ )}
150
+ {product?.estimated_person
151
+ && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
152
+ }
153
+ </OText>
154
+ )}
155
+ </View>
156
+ <OText size={16} mBottom={7} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
157
+ </View>
139
158
  )}
140
159
  </ProductTitle>
141
- <ProductDescription>
142
- <OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
143
- <OText style={{ flex: I18nManager.isRTL ? 1 : 0, ...theme.labels.subtitle, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }} color={theme.colors.textPrimary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
144
- {(
145
- (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
146
- (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
147
- ) && (
148
- <>
149
- <OText size={20}>{t('SKU', 'Sku')}</OText>
150
- <OText>{product?.sku || productCart?.sku}</OText>
151
- </>
152
- )}
153
- </ProductDescription>
160
+ {(product?.description || productCart?.description) && (
161
+ <ProductDescription>
162
+ <OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
163
+ </ProductDescription>
164
+ )}
154
165
  <View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
155
166
  {loading && !product ? (
156
167
  <>
package/themes/original/src/components/ActiveOrders/index.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  OrderInformation,
11
11
  BusinessInformation,
12
12
  Price,
13
+ LoadMore
13
14
  } from './styles';
14
15
  import { View, StyleSheet } from 'react-native';
15
16
  import { getGoogleMapImage } from '../../utils';
@@ -113,6 +114,18 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
113
114
  orders.map((order: any, index: any) => (
114
115
  <Order key={order?.id || order?.uuid} order={order} index={index} />
115
116
  ))}
117
+ {pagination?.totalPages && pagination?.currentPage < pagination?.totalPages && (
118
+ <LoadMore>
119
+ <OButton
120
+ bgColor={theme.colors.white}
121
+ textStyle={{ color: theme.colors.primary, fontSize: 14 }}
122
+ text={t('LOAD_MORE_ORDERS', 'Load more orders')}
123
+ borderColor={theme.colors.primary}
124
+ onClick={loadMoreOrders}
125
+ style={styles.loadMoreButton}
126
+ />
127
+ </LoadMore>
128
+ )}
116
129
  </ActiveOrdersContainer>
117
130
  <View
118
131
  style={{
@@ -140,4 +153,10 @@ const styles = StyleSheet.create({
140
153
  alignItems: 'center',
141
154
  minWidth: 230,
142
155
  },
156
+ loadMoreButton: {
157
+ width: 200,
158
+ height: 46,
159
+ marginLeft: 'auto',
160
+ marginRight: 'auto',
161
+ },
143
162
  });
package/themes/original/src/components/ActiveOrders/styles.tsx CHANGED
@@ -42,3 +42,8 @@ export const Price = styled.View`
42
42
  margin-left: 10px;
43
43
  width: 30%;
44
44
  `
45
+ export const LoadMore = styled.View`
46
+ flex-direction: row;
47
+ justify-content: center;
48
+ margin-top: 10px;
49
+ `
package/themes/original/src/components/BusinessController/styles.tsx CHANGED
@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components/native';
3
3
  export const Card = styled.TouchableOpacity`
4
4
  margin-vertical: 20px;
5
5
  border-radius: 7.6px;
6
- flex: 1;
7
6
  width: 100%;
8
- `;
7
+ position: relative;
8
+ `
9
9
 
10
10
  export const BusinessHero = styled.View`
11
11
  position: relative;
@@ -40,9 +40,9 @@ export const Metadata = styled.View`
40
40
  `;
41
41
 
42
42
  export const BusinessState = styled.View`
43
- position: absolute;
44
- top: 13px;
45
- end: 18px;
43
+ position: absolute;
44
+ top: 13px;
45
+ end: 18px;
46
46
  `
47
47
 
48
48
  export const BusinessLogo = styled.View`
package/themes/original/src/components/BusinessTypeFilter/index.tsx CHANGED
@@ -29,7 +29,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
29
29
  const [, t] = useLanguage();
30
30
 
31
31
  const theme = useTheme();
32
- const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
32
+ const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
33
33
 
34
34
  const renderTypes = ({ item }: any) => {
35
35
  return (
@@ -110,17 +110,17 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
110
110
  entireModal
111
111
  >
112
112
  <ScrollView style={styles.allCategoriesContainer}>
113
- <OText
114
- size={20}
115
- mBottom={30}
116
- color={theme.colors.textSecondary}
117
- style={{ paddingHorizontal: 10 }}
118
- >
119
- {t('ALL_CATEGORIES', 'All categories')}
120
- </OText>
121
- <View style={styles.allCategoriesWrapper}>
122
- {typesState?.types.map((item: any) => (
123
- <TouchableOpacity
113
+ <OText
114
+ size={20}
115
+ mBottom={30}
116
+ color={theme.colors.textSecondary}
117
+ style={{ paddingHorizontal: 10 }}
118
+ >
119
+ {t('ALL_CATEGORIES', 'All categories')}
120
+ </OText>
121
+ <View style={styles.allCategoriesWrapper}>
122
+ {typesState?.types.map((item: any) => (
123
+ <TouchableOpacity
124
124
  key={item.id}
125
125
  style={styles.categoryStyle}
126
126
  onPress={() => {
@@ -149,9 +149,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
149
149
  {t(`BUSINESS_TYPE_${item.name.replace(/\s/g, '_').toUpperCase()}`, item.name)}
150
150
  </OText>
151
151
  </TouchableOpacity>
152
- ))}
153
- </View>
154
- </ScrollView>
152
+ ))}
153
+ </View>
154
+ </ScrollView>
155
155
  </OModal>
156
156
  </>
157
157
  );
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
178
178
  marginHorizontal: 10,
179
179
  marginBottom: 40
180
180
  },
181
- allCategoriesContainer : {
181
+ allCategoriesContainer: {
182
182
  paddingHorizontal: 30,
183
183
  paddingVertical: 30
184
184
  },
package/themes/original/src/components/BusinessTypeFilter/styles.tsx CHANGED
@@ -5,6 +5,7 @@ export const BCContainer = styled.View`
5
5
  width: 100%;
6
6
  justify-content: flex-start;
7
7
  text-align: center;
8
+ min-height: 45px;
8
9
  `
9
10
 
10
11
  export const BusinessCategories = styled.View`
package/themes/original/src/components/BusinessesListing/index.tsx CHANGED
@@ -281,15 +281,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
281
281
  />
282
282
  )}
283
283
  {businessesList.businesses?.map(
284
- (business: any) =>
285
- !business.featured && (
286
- <BusinessController
287
- key={business.id}
288
- business={business}
289
- handleCustomClick={handleBusinessClick}
290
- orderType={orderState?.options?.type}
291
- />
292
- ),
284
+ (business: any) => (
285
+ <BusinessController
286
+ key={business.id}
287
+ business={business}
288
+ handleCustomClick={handleBusinessClick}
289
+ orderType={orderState?.options?.type}
290
+ />
291
+ )
293
292
  )}
294
293
  {businessesList.loading && (
295
294
  <>
package/themes/original/src/components/BusinessesListing/styles.tsx CHANGED
@@ -71,5 +71,6 @@ export const FeaturedWrapper = styled.View`
71
71
 
72
72
  export const OrderProgressWrapper = styled.View`
73
73
  margin-top: 37px;
74
+ margin-bottom: 20px;
74
75
  padding-horizontal: 40px;
75
76
  `
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -13,7 +13,7 @@ import Swiper from 'react-native-swiper'
13
13
  import FastImage from 'react-native-fast-image';
14
14
  import IconAntDesign from 'react-native-vector-icons/AntDesign';
15
15
 
16
- import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry } from 'react-native';
16
+ import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry, I18nManager } from 'react-native';
17
17
 
18
18
  import {
19
19
  ProductHeader,
@@ -116,7 +116,7 @@ export const ProductOptionsUI = (props: any) => {
116
116
  slide1: {
117
117
  flex: 1,
118
118
  },
119
- mainSwiper : {
119
+ mainSwiper: {
120
120
  height: 258,
121
121
  },
122
122
  swiperButton: {
@@ -196,7 +196,7 @@ export const ProductOptionsUI = (props: any) => {
196
196
  useEffect(() => {
197
197
  const productImgList: any = []
198
198
  product?.images && productImgList.push(product.images)
199
- if(product?.gallery && product?.gallery.length > 0) {
199
+ if (product?.gallery && product?.gallery.length > 0) {
200
200
  for (const img of product?.gallery) {
201
201
  productImgList.push(img.file)
202
202
  }
@@ -296,7 +296,7 @@ export const ProductOptionsUI = (props: any) => {
296
296
  name="caretleft"
297
297
  color={theme.colors.white}
298
298
  size={13}
299
- // style={styles.starIcon}
299
+ // style={styles.starIcon}
300
300
  />
301
301
  </View>
302
302
  }
@@ -306,7 +306,7 @@ export const ProductOptionsUI = (props: any) => {
306
306
  name="caretright"
307
307
  color={theme.colors.white}
308
308
  size={13}
309
- // style={styles.starIcon}
309
+ // style={styles.starIcon}
310
310
  />
311
311
  </View>
312
312
  }
@@ -387,6 +387,20 @@ export const ProductOptionsUI = (props: any) => {
387
387
  style={{ flex: 1, marginBottom: 5 }}>
388
388
  {product?.name || productCart.name}
389
389
  </OText>
390
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
391
+ <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
392
+ {
393
+ ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
394
+ && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
395
+ }
396
+ {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
397
+ <>&nbsp;&#183;&nbsp;</>
398
+ )}
399
+ {product?.estimated_person
400
+ && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
401
+ }
402
+ </OText>
403
+ )}
390
404
  <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
391
405
  {productCart.price ? parsePrice(productCart.price) : ''}
392
406
  </OText>
@@ -397,17 +411,6 @@ export const ProductOptionsUI = (props: any) => {
397
411
  <OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
398
412
  {product?.description || productCart?.description}
399
413
  </OText>
400
- {((product?.sku &&
401
- product?.sku !== '-1' &&
402
- product?.sku !== '1') ||
403
- (productCart?.sku &&
404
- productCart?.sku !== '-1' &&
405
- productCart?.sku !== '1')) && (
406
- <>
407
- <OText size={16}>{t('SKU', 'Sku')}</OText>
408
- <OText>{product?.sku || productCart?.sku}</OText>
409
- </>
410
- )}
411
414
  </ProductDescription>
412
415
  {loading && !product ? (
413
416
  <>
@@ -455,25 +458,25 @@ export const ProductOptionsUI = (props: any) => {
455
458
  style={{ marginBottom: 20 }}
456
459
  contentContainerStyle={{ paddingHorizontal: 33 }}
457
460
  >
458
- <TouchableOpacity
459
- key={`eopt_all_0`}
460
- onPress={() => setSelectedOpt(0)}
461
- style={[
462
- styles.extraItem,
463
- {
464
- borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
465
- },
466
- ]}>
467
- <OText
468
- color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
469
- size={selOpt == 0 ? 14 : 12}
470
- weight={selOpt == 0 ? '600' : 'normal'}>
471
- {t('ALL', 'All')}
472
- </OText>
473
- </TouchableOpacity>
474
- {product?.extras.map((extra: any) =>
475
- <ExtraOptions key={extra.id} options={extra.options} />
476
- )}
461
+ <TouchableOpacity
462
+ key={`eopt_all_0`}
463
+ onPress={() => setSelectedOpt(0)}
464
+ style={[
465
+ styles.extraItem,
466
+ {
467
+ borderBottomColor: selOpt == 0 ? theme.colors.textNormal : theme.colors.border,
468
+ },
469
+ ]}>
470
+ <OText
471
+ color={selOpt == 0 ? theme.colors.textNormal : theme.colors.textSecondary}
472
+ size={selOpt == 0 ? 14 : 12}
473
+ weight={selOpt == 0 ? '600' : 'normal'}>
474
+ {t('ALL', 'All')}
475
+ </OText>
476
+ </TouchableOpacity>
477
+ {product?.extras.map((extra: any) =>
478
+ <ExtraOptions key={extra.id} options={extra.options} />
479
+ )}
477
480
  </ExtraOptionWrap>
478
481
 
479
482
  {selOpt == 0 ? (
@@ -778,7 +781,7 @@ export const ProductOptionsUI = (props: any) => {
778
781
  isDisabled
779
782
  text={t('LOADING', 'Loading')}
780
783
  imgRightSrc=""
781
- textStyle={{fontSize: 10}}
784
+ textStyle={{ fontSize: 10 }}
782
785
  />
783
786
  ) : (
784
787
  <OButton onClick={navigation.navigate('AddressList')} />
package/themes/single-business/src/components/ProductForm/index.tsx CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  import { useTheme } from 'styled-components/native';
10
10
  import { ProductIngredient } from '../ProductIngredient';
11
11
  import { ProductOption } from '../ProductOption';
12
- import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView } from 'react-native';
12
+ import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, useWindowDimensions, Keyboard, KeyboardAvoidingView, I18nManager } from 'react-native';
13
13
 
14
14
  import {
15
15
  ProductHeader,
@@ -312,6 +312,20 @@ export const ProductOptionsUI = (props: any) => {
312
312
  style={{ flex: 1, marginBottom: 5 }}>
313
313
  {product?.name || productCart.name}
314
314
  </OText>
315
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
316
+ <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
317
+ {
318
+ ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
319
+ && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
320
+ }
321
+ {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
322
+ <>&nbsp;&#183;&nbsp;</>
323
+ )}
324
+ {product?.estimated_person
325
+ && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
326
+ }
327
+ </OText>
328
+ )}
315
329
  <OText size={16} lineHeight={24} color={theme.colors.textNormal}>
316
330
  {productCart.price ? parsePrice(productCart.price) : ''}
317
331
  </OText>
@@ -322,17 +336,6 @@ export const ProductOptionsUI = (props: any) => {
322
336
  <OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
323
337
  {product?.description || productCart?.description}
324
338
  </OText>
325
- {((product?.sku &&
326
- product?.sku !== '-1' &&
327
- product?.sku !== '1') ||
328
- (productCart?.sku &&
329
- productCart?.sku !== '-1' &&
330
- productCart?.sku !== '1')) && (
331
- <>
332
- <OText size={16}>{t('SKU', 'Sku')}</OText>
333
- <OText>{product?.sku || productCart?.sku}</OText>
334
- </>
335
- )}
336
339
  </ProductDescription>
337
340
  {loading && !product ? (
338
341
  <>
package/themes/uber-eats/src/components/ProductForm/index.tsx CHANGED
@@ -32,7 +32,7 @@ import {
32
32
  import { OButton, OInput, OText } from '../shared'
33
33
  import { ProductOptionSubOption } from '../ProductOptionSubOption'
34
34
  import { NotFoundSource } from '../NotFoundSource'
35
- import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
35
+ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
36
36
  import { useTheme } from 'styled-components/native'
37
37
  import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
38
38
 
@@ -149,9 +149,9 @@ export const ProductOptionsUI = (props: any) => {
149
149
  }
150
150
  }
151
151
 
152
- const handleRedirectLogin = (product : any) => {
152
+ const handleRedirectLogin = (product: any) => {
153
153
  onClose()
154
- navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
154
+ navigation.navigate('Login', { product: { businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug } })
155
155
  }
156
156
 
157
157
  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
@@ -215,49 +215,46 @@ export const ProductOptionsUI = (props: any) => {
215
215
  </View>
216
216
  </Placeholder>
217
217
  ) : (
218
- <>
219
- <OText
220
- weight={600}
221
- size={20}
222
- numberOfLines={1}
223
- ellipsizeMode='tail'
224
- style={{
225
- flex: 1,
226
- marginRight: 30,
227
- textAlign: 'left'
228
- }}
229
- >
230
- {product?.name || productCart.name}
231
- </OText>
232
- <OText weight={600} size={20} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
233
- </>
218
+ <View style={{ flexDirection: 'column', width: '100%' }}>
219
+ <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}</OText>
220
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
221
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
222
+ <OText size={14} style={{ marginBottom: 10, flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'}>
223
+ {
224
+ ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
225
+ && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
226
+ }
227
+ {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
228
+ <>&nbsp;&#183;&nbsp;</>
229
+ )}
230
+ {product?.estimated_person
231
+ && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
232
+ }
233
+ </OText>
234
+ )}
235
+ </View>
236
+ <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
237
+ </View>
234
238
  )}
235
239
  </ProductTitle>
236
- <ProductDescription>
237
- <OText color={theme.colors.gray} style={{ textAlign: 'left' }}>{product?.description || productCart?.description}</OText>
238
- {(
239
- (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
240
- (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
241
- ) && (
242
- <>
243
- <OText size={20}>{t('SKU', 'Sku')}</OText>
244
- <OText>{product?.sku || productCart?.sku}</OText>
245
- </>
246
- )}
247
- </ProductDescription>
240
+ {(product?.description || productCart?.description) && (
241
+ <ProductDescription>
242
+ <OText color={theme.colors.gray} style={{ textAlign: 'left', marginBottom: 10 }}>{product?.description || productCart?.description}</OText>
243
+ </ProductDescription>
244
+ )}
248
245
  {loading && !product ? (
249
246
  <>
250
- {[...Array(2)].map((item,i) => (
251
- <Placeholder key={i} style={{marginBottom: 20}} Animation={Fade}>
252
- <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
253
- {[...Array(3)].map((item,i) => (
254
- <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
255
- <PlaceholderLine height={30} width={10} style={{marginBottom: 20}} />
256
- <PlaceholderLine height={30} width={50} style={{marginBottom: 20}} />
257
- <PlaceholderLine height={30} width={30} style={{marginBottom: 20}} />
258
- </View>
259
- ))}
260
- </Placeholder>
247
+ {[...Array(2)].map((item, i) => (
248
+ <Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
249
+ <PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
250
+ {[...Array(3)].map((item, i) => (
251
+ <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
252
+ <PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
253
+ <PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
254
+ <PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
255
+ </View>
256
+ ))}
257
+ </Placeholder>
261
258
  ))}
262
259
  </>
263
260
  ) : (
@@ -279,7 +276,7 @@ export const ProductOptionsUI = (props: any) => {
279
276
  </SectionTitle>
280
277
  <WrapperIngredients
281
278
  style={{ backgroundColor: isSoldOut || maxProductQuantity <= 0 ? 'hsl(0, 0%, 72%)' : theme.colors.white }}
282
- hidden={!openIngredient}
279
+ hidden={!openIngredient}
283
280
  >
284
281
  {product?.ingredients.map((ingredient: any) => (
285
282
  <ProductIngredient
@@ -319,7 +316,7 @@ export const ProductOptionsUI = (props: any) => {
319
316
  state={currentState}
320
317
  disabled={isSoldOut || maxProductQuantity <= 0}
321
318
  />
322
- ): null
319
+ ) : null
323
320
  })
324
321
  }
325
322
  </WrapperSubOption>