ordering-ui-react-native 0.14.21 → 0.14.24

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.21",
3
+ "version": "0.14.24",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -232,19 +232,21 @@ export const ProductOptionsUI = (props: any) => {
232
232
  </React.Fragment>
233
233
  )
234
234
  }))}
235
- <ProductComment>
236
- <SectionTitle>
237
- <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
238
- </SectionTitle>
239
- <OInput
240
- multiline
241
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
242
- value={productCart.comment}
243
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
244
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
245
- style={styles.comment}
246
- />
247
- </ProductComment>
235
+ {!product?.hide_special_instructions && (
236
+ <ProductComment>
237
+ <SectionTitle>
238
+ <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
239
+ </SectionTitle>
240
+ <OInput
241
+ multiline
242
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
243
+ value={productCart.comment}
244
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
245
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
246
+ style={styles.comment}
247
+ />
248
+ </ProductComment>
249
+ )}
248
250
  </ProductEditions>
249
251
  )}
250
252
  </WrapContent>
@@ -287,20 +287,22 @@ export const ProductOptionsUI = (props: any) => {
287
287
  </React.Fragment>
288
288
  )
289
289
  }))}
290
- <ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
291
- <SectionTitle>
292
- <OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
293
- </SectionTitle>
294
- <OInput
295
- multiline
296
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
297
- value={productCart.comment}
298
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
299
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
300
- style={styles.comment}
301
- inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
302
- />
303
- </ProductComment>
290
+ {!product?.hide_special_instructions && (
291
+ <ProductComment onLayout={(e: any) => setCommentY(e.nativeEvent.layout.y + e.nativeEvent.layout.height)}>
292
+ <SectionTitle>
293
+ <OText style={theme.labels.middle as TextStyle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
294
+ </SectionTitle>
295
+ <OInput
296
+ multiline
297
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
298
+ value={productCart.comment}
299
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
300
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
301
+ style={styles.comment}
302
+ inputStyle={{ fontSize: 12, paddingBottom: 7, paddingTop: 17 }}
303
+ />
304
+ </ProductComment>
305
+ )}
304
306
  {productCart && !isSoldOut && maxProductQuantity > 0 && (
305
307
  <View style={{ paddingVertical: 4, marginBottom: 10 }}>
306
308
  <SectionTitle>
@@ -235,19 +235,21 @@ export const ProductOptionsUI = (props: any) => {
235
235
  </React.Fragment>
236
236
  )
237
237
  }))}
238
- <ProductComment>
239
- <SectionTitle>
240
- <OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
241
- </SectionTitle>
242
- <OInput
243
- multiline
244
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
245
- value={productCart.comment}
246
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
247
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
248
- style={{ ...styles.comment, borderColor: theme.colors.border }}
249
- />
250
- </ProductComment>
238
+ {!product?.hide_special_instructions && (
239
+ <ProductComment>
240
+ <SectionTitle>
241
+ <OText style={theme.labels.middle}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
242
+ </SectionTitle>
243
+ <OInput
244
+ multiline
245
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
246
+ value={productCart.comment}
247
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
248
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
249
+ style={{ ...styles.comment, borderColor: theme.colors.border }}
250
+ />
251
+ </ProductComment>
252
+ )}
251
253
  </ProductEditions>
252
254
  )}
253
255
  </WrapContent>
@@ -438,19 +438,21 @@ export const ProductOptionsUI = (props: any) => {
438
438
  </React.Fragment>
439
439
  )
440
440
  }))}
441
- <ProductComment>
442
- <SectionTitle>
443
- <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
444
- </SectionTitle>
445
- <OInput
446
- multiline
447
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
448
- value={productCart.comment}
449
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
450
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
451
- style={styles.comment}
452
- />
453
- </ProductComment>
441
+ {!product?.hide_special_instructions && (
442
+ <ProductComment>
443
+ <SectionTitle>
444
+ <OText size={28} weight="bold">{t('SPECIAL_COMMENT', 'Special comment')}</OText>
445
+ </SectionTitle>
446
+ <OInput
447
+ multiline
448
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
449
+ value={productCart.comment}
450
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
451
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
452
+ style={styles.comment}
453
+ />
454
+ </ProductComment>
455
+ )}
454
456
  </ProductEditions>
455
457
  </WrapContent>
456
458
  </View>
@@ -17,6 +17,7 @@ export const BusinessItemAccordion = (props: any) => {
17
17
  const {
18
18
  cart,
19
19
  moment,
20
+ singleBusiness,
20
21
  handleClearProducts
21
22
  } = props
22
23
 
@@ -29,7 +30,7 @@ export const BusinessItemAccordion = (props: any) => {
29
30
  const isClosed = !cart?.valid_schedule
30
31
  const isProducts = cart?.products?.length
31
32
 
32
- const [isActive, setActiveState] = useState(false)
33
+ const [isActive, setActiveState] = useState(!!singleBusiness)
33
34
 
34
35
  useEffect(() => {
35
36
  const cartsArray = Object.values(orderState?.carts)
@@ -57,6 +57,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
57
57
  handleBusinessClick,
58
58
  paginationProps,
59
59
  handleChangeSearch,
60
+ businessId
60
61
  } = props;
61
62
 
62
63
  const theme = useTheme();
@@ -256,17 +257,20 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
256
257
  />
257
258
  </WrapMomentOption>
258
259
 
259
- <SearchBar
260
- onSearch={handleChangeSearch}
261
- searchValue={searchValue}
262
- lazyLoad
263
- isCancelXButtonShow={!!searchValue}
264
- borderStyle={styles.borderStyle}
265
- onCancel={() => handleChangeSearch('')}
266
- placeholder={t('SEARCH', 'Search')}
267
- height={26}
268
- inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
269
- />
260
+ {!businessId && (
261
+ <SearchBar
262
+ onSearch={handleChangeSearch}
263
+ searchValue={searchValue}
264
+ lazyLoad
265
+ isCancelXButtonShow={!!searchValue}
266
+ borderStyle={styles.borderStyle}
267
+ onCancel={() => handleChangeSearch('')}
268
+ placeholder={t('SEARCH', 'Search')}
269
+ height={26}
270
+ inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
271
+ />
272
+ )}
273
+
270
274
  </View>
271
275
  </OrderControlContainer>
272
276
  </HeaderWrapper>
@@ -277,7 +281,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
277
281
  />
278
282
  </OrderProgressWrapper>
279
283
  )}
280
- {!props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
284
+ {!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
281
285
  <FeaturedWrapper>
282
286
  <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
283
287
  <ScrollView
@@ -306,17 +310,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
306
310
  </FeaturedWrapper>
307
311
  )}
308
312
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
309
- {!props.franchiseId && (
313
+ {!businessId && !props.franchiseId && (
310
314
  <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
311
315
  )}
312
316
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
313
317
  <ListWrapper>
314
- <BusinessTypeFilter
315
- images={props.images}
316
- businessTypes={props.businessTypes}
317
- defaultBusinessType={props.defaultBusinessType}
318
- handleChangeBusinessType={handleChangeBusinessType}
319
- />
318
+ {!businessId && (
319
+ <BusinessTypeFilter
320
+ images={props.images}
321
+ businessTypes={props.businessTypes}
322
+ defaultBusinessType={props.defaultBusinessType}
323
+ handleChangeBusinessType={handleChangeBusinessType}
324
+ />
325
+ )}
320
326
  {!businessesList.loading && businessesList.businesses.length === 0 && (
321
327
  <NotFoundSource
322
328
  content={t(
@@ -113,6 +113,15 @@ const CartUI = (props: any) => {
113
113
  }
114
114
  }
115
115
 
116
+ const walletName: any = {
117
+ cash: {
118
+ name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
119
+ },
120
+ credit_point: {
121
+ name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
122
+ }
123
+ }
124
+
116
125
  return (
117
126
  <CContainer>
118
127
  {openUpselling && (
@@ -130,6 +139,7 @@ const CartUI = (props: any) => {
130
139
  )}
131
140
  <BusinessItemAccordion
132
141
  cart={cart}
142
+ singleBusiness={props.singleBusiness}
133
143
  moment={momentFormatted}
134
144
  handleClearProducts={handleClearProducts}
135
145
  handleCartOpen={handleCartOpen}
@@ -191,7 +201,7 @@ const CartUI = (props: any) => {
191
201
  cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
192
202
  <OSTable key={fee?.id}>
193
203
  <OSRow>
194
- <OText numberOfLines={1}>
204
+ <OText numberOfLines={1} size={12} lineHeight={18}>
195
205
  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
196
206
  ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
197
207
  </OText>
@@ -203,6 +213,15 @@ const CartUI = (props: any) => {
203
213
  </OSTable>
204
214
  ))
205
215
  }
216
+ {cart?.service_fee > 0 && !cart?.fees?.length && (
217
+ <OSTable>
218
+ <OText size={12} lineHeight={18}>
219
+ {t('SERVICE_FEE', 'Service Fee')}
220
+ {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
221
+ </OText>
222
+ <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
223
+ </OSTable>
224
+ )}
206
225
  {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
207
226
  <OSTable>
208
227
  <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
@@ -223,15 +242,14 @@ const CartUI = (props: any) => {
223
242
  <OText size={12} lineHeight={18}>{parsePrice(cart?.driver_tip)}</OText>
224
243
  </OSTable>
225
244
  )}
226
- {cart?.service_fee > 0 && (
227
- <OSTable>
228
- <OText size={12} lineHeight={18}>
229
- {t('SERVICE_FEE', 'Service Fee')}
230
- {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
245
+ {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
246
+ <OSTable key={event.id}>
247
+ <OText size={12} numberOfLines={1}>
248
+ {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
231
249
  </OText>
232
- <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
250
+ <OText size={12}>-{parsePrice(event.amount)}</OText>
233
251
  </OSTable>
234
- )}
252
+ ))}
235
253
  {isCouponEnabled && !isCartPending && (
236
254
  <OSTable>
237
255
  <OSCoupon>
@@ -249,7 +267,7 @@ const CartUI = (props: any) => {
249
267
  {t('TOTAL', 'Total')}
250
268
  </OText>
251
269
  <OText size={14} lineHeight={21} weight={'600'}>
252
- {cart?.total >= 1 && parsePrice(cart?.total)}
270
+ {parsePrice(cart?.balance ?? cart?.total)}
253
271
  </OText>
254
272
  </OSTable>
255
273
  </OSTotal>
@@ -30,6 +30,7 @@ export const CartContent = (props: any) => {
30
30
  {cart.products.length > 0 && (
31
31
  <>
32
32
  <Cart
33
+ singleBusiness={props.singleBusiness}
33
34
  isFranchiseApp={props.isFranchiseApp}
34
35
  cart={cart}
35
36
  cartuuid={cart.uuid}
@@ -48,8 +48,8 @@ export const Help = (props: HelpParams) => {
48
48
 
49
49
  <LastOrdersContainer>
50
50
  <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
51
- <LastOrders onRedirect={onRedirect} />
51
+ <LastOrders businessId={props.businessId} onRedirect={onRedirect} />
52
52
  </LastOrdersContainer>
53
53
  </>
54
54
  )
55
- }
55
+ }
@@ -193,13 +193,13 @@ const OrderProgressUI = (props: any) => {
193
193
  </View>
194
194
  </View>
195
195
  )}
196
- {!orderList?.loading && orderList?.orders?.length === 0 && (
196
+ {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
197
197
  <NotFoundSource
198
198
  image={imageFails}
199
199
  content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
200
200
  conditioned
201
201
  />
202
- )}
202
+ )} */}
203
203
  </>
204
204
  )
205
205
  }
@@ -177,6 +177,14 @@ const OrderSummaryUI = (props: any) => {
177
177
  <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
178
178
  </OSTable>
179
179
  )}
180
+ {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
181
+ <OSTable key={event.id}>
182
+ <OText size={12} numberOfLines={1}>
183
+ {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
184
+ </OText>
185
+ <OText size={12}>-{parsePrice(event.amount)}</OText>
186
+ </OSTable>
187
+ ))}
180
188
  {isCouponEnabled && !isCartPending && (
181
189
  <View>
182
190
  <View style={{ paddingVertical: 5 }}>
@@ -194,7 +202,7 @@ const OrderSummaryUI = (props: any) => {
194
202
  {t('TOTAL', 'Total')}
195
203
  </OText>
196
204
  <OText size={14} style={{ fontWeight: 'bold' }} >
197
- {parsePrice(cart?.total)}
205
+ {parsePrice(cart?.balance ?? cart?.total)}
198
206
  </OText>
199
207
  </OSTable>
200
208
  </View>
@@ -232,52 +240,6 @@ const OrderSummaryUI = (props: any) => {
232
240
  </View>
233
241
  </OSTable>
234
242
  )}
235
- {cart?.payment_events?.length > 0 && (
236
- <View
237
- style={{
238
- width: '100%',
239
- marginTop: 20
240
- }}
241
- >
242
- {cart?.payment_events?.map((event: any) => (
243
- <View
244
- key={event.id}
245
- style={{
246
- display: 'flex',
247
- flexDirection: 'row',
248
- justifyContent: 'space-between',
249
- marginBottom: 10
250
- }}
251
- >
252
- <OText>
253
- {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
254
- </OText>
255
- <OText>
256
- -{parsePrice(event.amount)}
257
- </OText>
258
- </View>
259
- ))}
260
- <View
261
- style={{
262
- display: 'flex',
263
- flexDirection: 'row',
264
- justifyContent: 'space-between',
265
- marginBottom: 10
266
- }}
267
- >
268
- <OText
269
- weight={'bold'}
270
- >
271
- {t('TOTAL_TO_PAY', 'Total to pay')}
272
- </OText>
273
- <OText
274
- weight={'bold'}
275
- >
276
- {parsePrice(cart?.balance)}
277
- </OText>
278
- </View>
279
- </View>
280
- )}
281
243
  </OSBill>
282
244
  )}
283
245
  <OModal
@@ -663,25 +663,27 @@ export const ProductOptionsUI = (props: any) => {
663
663
  )}
664
664
  </>
665
665
  )}
666
- <ProductComment>
667
- <SectionTitle>
668
- <OText size={16} weight={'600'} lineHeight={24}>
669
- {t('SPECIAL_COMMENT', 'Special comment')}
670
- </OText>
671
- </SectionTitle>
672
- <OInput
673
- multiline
674
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
675
- value={productCart.comment}
676
- onChange={(val: string) =>
677
- handleChangeCommentState({ target: { value: val } })
678
- }
679
- isDisabled={
680
- !(productCart && !isSoldOut && maxProductQuantity)
681
- }
682
- style={styles.comment}
683
- />
684
- </ProductComment>
666
+ {!product?.hide_special_instructions && (
667
+ <ProductComment>
668
+ <SectionTitle>
669
+ <OText size={16} weight={'600'} lineHeight={24}>
670
+ {t('SPECIAL_COMMENT', 'Special comment')}
671
+ </OText>
672
+ </SectionTitle>
673
+ <OInput
674
+ multiline
675
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
676
+ value={productCart.comment}
677
+ onChange={(val: string) =>
678
+ handleChangeCommentState({ target: { value: val } })
679
+ }
680
+ isDisabled={
681
+ !(productCart && !isSoldOut && maxProductQuantity)
682
+ }
683
+ style={styles.comment}
684
+ />
685
+ </ProductComment>
686
+ )}
685
687
  </ProductEditions>
686
688
  )}
687
689
  </WrapContent>
@@ -129,6 +129,7 @@ export interface BusinessesListingParams {
129
129
  businessTypes?: any;
130
130
  defaultBusinessType?: any;
131
131
  franchiseId?: any;
132
+ businessId?: any;
132
133
  }
133
134
  export interface HighestRatedBusinessesParams {
134
135
  businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -455,6 +456,7 @@ export interface GoogleMapsParams {
455
456
 
456
457
  export interface HelpParams {
457
458
  navigation: any;
459
+ businessId?: any;
458
460
  }
459
461
 
460
462
  export interface LastOrdersParams {
@@ -527,34 +527,35 @@ export const ProductOptionsUI = (props: any) => {
527
527
  );
528
528
  }))}
529
529
  </View>
530
-
531
- <ProductComment>
532
- <SectionTitle>
533
- <OText size={16} weight={'600'} lineHeight={24}>
534
- {t('SPECIAL_COMMENT', 'Special comment')}
535
- </OText>
536
- </SectionTitle>
537
- <OInput
538
- multiline={true}
539
- numberOfLines={10}
540
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
541
- value={productCart.comment}
542
- onChange={(val: string) =>
543
- handleChangeCommentState({ target: { value: val } })
544
- }
545
- isDisabled={
546
- !(productCart && !isSoldOut && maxProductQuantity)
547
- }
548
- style={{
549
- height: 100,
550
- justifyContent: "flex-end",
551
- alignItems: 'flex-start',
552
- borderWidth: 1,
553
- borderRadius: 8,
554
- borderColor: theme.colors.border,
555
- }}
556
- />
557
- </ProductComment>
530
+ {!product?.hide_special_instructions && (
531
+ <ProductComment>
532
+ <SectionTitle>
533
+ <OText size={16} weight={'600'} lineHeight={24}>
534
+ {t('SPECIAL_COMMENT', 'Special comment')}
535
+ </OText>
536
+ </SectionTitle>
537
+ <OInput
538
+ multiline={true}
539
+ numberOfLines={10}
540
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
541
+ value={productCart.comment}
542
+ onChange={(val: string) =>
543
+ handleChangeCommentState({ target: { value: val } })
544
+ }
545
+ isDisabled={
546
+ !(productCart && !isSoldOut && maxProductQuantity)
547
+ }
548
+ style={{
549
+ height: 100,
550
+ justifyContent: "flex-end",
551
+ alignItems: 'flex-start',
552
+ borderWidth: 1,
553
+ borderRadius: 8,
554
+ borderColor: theme.colors.border,
555
+ }}
556
+ />
557
+ </ProductComment>
558
+ )}
558
559
  </ProductEditions>
559
560
  )}
560
561
  </WrapContent>
@@ -327,19 +327,21 @@ export const ProductOptionsUI = (props: any) => {
327
327
  </React.Fragment>
328
328
  )
329
329
  }))}
330
- <ProductComment>
331
- <SectionTitle>
332
- <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
333
- </SectionTitle>
334
- <OInput
335
- multiline
336
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
337
- value={productCart.comment}
338
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
339
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
340
- style={styles.comment}
341
- />
342
- </ProductComment>
330
+ {!product?.hide_special_instructions && (
331
+ <ProductComment>
332
+ <SectionTitle>
333
+ <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
334
+ </SectionTitle>
335
+ <OInput
336
+ multiline
337
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
338
+ value={productCart.comment}
339
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
340
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
341
+ style={styles.comment}
342
+ />
343
+ </ProductComment>
344
+ )}
343
345
  </ProductEditions>
344
346
  )}
345
347
  </WrapContent>