ordering-ui-react-native 0.12.50 → 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 (6) hide show
  1. package/package.json +1 -1
  2. package/themes/doordash/src/components/ProductForm/index.tsx +37 -28
  3. package/themes/instacart/src/components/ProductForm/index.tsx +26 -15
  4. package/themes/original/src/components/ProductForm/index.tsx +39 -36
  5. package/themes/single-business/src/components/ProductForm/index.tsx +15 -12
  6. 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.50",
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/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/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>