ordering-ui-react-native 0.12.55 → 0.12.56

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 (29) hide show
  1. package/package.json +1 -1
  2. package/src/components/Cart/index.tsx +50 -16
  3. package/src/components/OrderDetails/index.tsx +8 -0
  4. package/src/components/OrderSummary/index.tsx +38 -3
  5. package/src/layouts/Container.tsx +1 -1
  6. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +8 -0
  7. package/themes/business/src/layouts/Container.tsx +3 -1
  8. package/themes/doordash/src/components/Cart/index.tsx +36 -2
  9. package/themes/doordash/src/components/OrderDetails/index.tsx +8 -0
  10. package/themes/doordash/src/components/OrderSummary/index.tsx +36 -3
  11. package/themes/doordash/src/layouts/Container.tsx +1 -1
  12. package/themes/franchises/src/components/Cart/index.tsx +257 -223
  13. package/themes/franchises/src/components/OrderDetails/index.tsx +723 -715
  14. package/themes/franchises/src/components/OrderSummary/index.tsx +188 -154
  15. package/themes/franchises/src/layouts/Container.tsx +1 -1
  16. package/themes/instacart/src/components/Cart/index.tsx +37 -3
  17. package/themes/instacart/src/components/OrderDetails/index.tsx +8 -0
  18. package/themes/instacart/src/components/OrderSummary/index.tsx +37 -4
  19. package/themes/instacart/src/layouts/Container.tsx +1 -1
  20. package/themes/kiosk/src/layouts/Container.tsx +2 -1
  21. package/themes/original/src/components/Cart/index.tsx +268 -234
  22. package/themes/original/src/components/OrderDetails/index.tsx +723 -715
  23. package/themes/original/src/components/OrderSummary/index.tsx +37 -3
  24. package/themes/original/src/layouts/Container.tsx +1 -1
  25. package/themes/single-business/src/layouts/Container.tsx +1 -1
  26. package/themes/uber-eats/src/components/Cart/index.tsx +37 -3
  27. package/themes/uber-eats/src/components/OrderDetails/index.tsx +8 -0
  28. package/themes/uber-eats/src/components/OrderSummary/index.tsx +40 -6
  29. package/themes/uber-eats/src/layouts/Container.tsx +1 -1
package/themes/franchises/src/components/OrderSummary/index.tsx CHANGED
@@ -1,25 +1,25 @@
1
1
  import React, { useState } from 'react';
2
- import { TouchableOpacity, View } from 'react-native'
2
+ import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
3
3
  import {
4
- Cart,
5
- useOrder,
6
- useLanguage,
7
- useUtils,
8
- useConfig,
9
- useValidationFields,
4
+ Cart,
5
+ useOrder,
6
+ useLanguage,
7
+ useUtils,
8
+ useConfig,
9
+ useValidationFields,
10
10
  } from 'ordering-components/native';
11
11
 
12
12
  import {
13
- OSContainer,
14
- OSProductList,
15
- OSBill,
16
- OSTable,
13
+ OSContainer,
14
+ OSProductList,
15
+ OSBill,
16
+ OSTable,
17
17
  OSRow
18
18
  } from './styles';
19
19
 
20
20
  import { ProductItemAccordion } from '../ProductItemAccordion';
21
21
  import { CouponControl } from '../CouponControl';
22
- import { OModal, OText } from '../shared';
22
+ import { OInput, OModal, OText } from '../shared';
23
23
  import { ProductForm } from '../ProductForm';
24
24
  import { verifyDecimals } from '../../utils';
25
25
  import { TaxInformation } from '../TaxInformation';
@@ -27,42 +27,44 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
27
27
  import { useTheme } from 'styled-components/native';
28
28
 
29
29
  const OrderSummaryUI = (props: any) => {
30
- const {
31
- cart,
32
- changeQuantity,
33
- getProductMax,
34
- offsetDisabled,
35
- removeProduct,
36
- isCartPending,
37
- isFromCheckout
38
- } = props;
30
+ const {
31
+ cart,
32
+ changeQuantity,
33
+ getProductMax,
34
+ offsetDisabled,
35
+ removeProduct,
36
+ isCartPending,
37
+ isFromCheckout,
38
+ commentState,
39
+ handleChangeComment
40
+ } = props;
39
41
 
40
42
  const theme = useTheme()
41
- const [, t] = useLanguage();
42
- const [{ configs }] = useConfig();
43
- const [orderState] = useOrder();
44
- const [{ parsePrice, parseNumber }] = useUtils();
45
- const [validationFields] = useValidationFields();
46
- const [openProduct, setModalIsOpen] = useState(false)
47
- const [curProduct, setCurProduct] = useState<any>(null)
43
+ const [, t] = useLanguage();
44
+ const [{ configs }] = useConfig();
45
+ const [orderState] = useOrder();
46
+ const [{ parsePrice, parseNumber }] = useUtils();
47
+ const [validationFields] = useValidationFields();
48
+ const [openProduct, setModalIsOpen] = useState(false)
49
+ const [curProduct, setCurProduct] = useState<any>(null)
48
50
  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
49
51
 
50
- const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
52
+ const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
51
53
 
52
- const handleDeleteClick = (product: any) => {
53
- removeProduct(product, cart)
54
- }
54
+ const handleDeleteClick = (product: any) => {
55
+ removeProduct(product, cart)
56
+ }
55
57
 
56
- const handleEditProduct = (product: any) => {
57
- setCurProduct(product)
58
- setModalIsOpen(true)
59
- }
58
+ const handleEditProduct = (product: any) => {
59
+ setCurProduct(product)
60
+ setModalIsOpen(true)
61
+ }
60
62
 
61
- const handlerProductAction = (product: any) => {
62
- if (Object.keys(product).length) {
63
- setModalIsOpen(false)
64
- }
65
- }
63
+ const handlerProductAction = (product: any) => {
64
+ if (Object.keys(product).length) {
65
+ setModalIsOpen(false)
66
+ }
67
+ }
66
68
 
67
69
  const getIncludedTaxes = () => {
68
70
  if (cart?.taxes === null) {
@@ -74,46 +76,46 @@ const OrderSummaryUI = (props: any) => {
74
76
  }
75
77
  }
76
78
 
77
- return (
78
- <OSContainer>
79
- {cart?.products?.length > 0 && (
80
- <>
81
- <OSProductList>
82
- {cart?.products.map((product: any) => (
83
- <ProductItemAccordion
84
- key={product.code}
85
- product={product}
86
- isCartPending={isCartPending}
87
- isCartProduct
88
- changeQuantity={changeQuantity}
89
- getProductMax={getProductMax}
90
- offsetDisabled={offsetDisabled}
91
- onDeleteProduct={handleDeleteClick}
92
- onEditProduct={handleEditProduct}
93
- isFromCheckout={isFromCheckout}
94
- />
95
- ))}
96
- </OSProductList>
97
- {cart?.valid && (
98
- <OSBill>
99
- <OSTable>
100
- <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
101
- <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
102
- </OSTable>
103
- {cart?.discount > 0 && cart?.total >= 0 && (
104
- <OSTable>
105
- {cart?.discount_type === 1 ? (
106
- <OText size={12}>
107
- {t('DISCOUNT', 'Discount')}
108
- <OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
109
- </OText>
110
- ) : (
111
- <OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
112
- )}
113
- <OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
114
- </OSTable>
115
- )}
116
- {
79
+ return (
80
+ <OSContainer>
81
+ {cart?.products?.length > 0 && (
82
+ <>
83
+ <OSProductList>
84
+ {cart?.products.map((product: any) => (
85
+ <ProductItemAccordion
86
+ key={product.code}
87
+ product={product}
88
+ isCartPending={isCartPending}
89
+ isCartProduct
90
+ changeQuantity={changeQuantity}
91
+ getProductMax={getProductMax}
92
+ offsetDisabled={offsetDisabled}
93
+ onDeleteProduct={handleDeleteClick}
94
+ onEditProduct={handleEditProduct}
95
+ isFromCheckout={isFromCheckout}
96
+ />
97
+ ))}
98
+ </OSProductList>
99
+ {cart?.valid && (
100
+ <OSBill>
101
+ <OSTable>
102
+ <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
103
+ <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
104
+ </OSTable>
105
+ {cart?.discount > 0 && cart?.total >= 0 && (
106
+ <OSTable>
107
+ {cart?.discount_type === 1 ? (
108
+ <OText size={12}>
109
+ {t('DISCOUNT', 'Discount')}
110
+ <OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
111
+ </OText>
112
+ ) : (
113
+ <OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
114
+ )}
115
+ <OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
116
+ </OSTable>
117
+ )}
118
+ {
117
119
  cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
118
120
  <OSTable key={tax?.id}>
119
121
  <OSRow>
@@ -145,68 +147,100 @@ const OrderSummaryUI = (props: any) => {
145
147
  </OSTable>
146
148
  ))
147
149
  }
148
- {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
149
- <OSTable>
150
- <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
151
- <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
152
- </OSTable>
153
- )}
154
- {cart?.driver_tip > 0 && (
155
- <OSTable>
156
- <OText size={12}>
157
- {t('DRIVER_TIP', 'Driver tip')}
158
- {cart?.driver_tip_rate > 0 &&
159
- parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
160
- !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
161
- (
162
- `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
163
- )}
164
- </OText>
165
- <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
166
- </OSTable>
167
- )}
168
- {isCouponEnabled && !isCartPending && (
169
- <View>
170
- <View style={{ paddingVertical: 5 }}>
171
- <CouponControl
172
- businessId={cart.business_id}
173
- price={cart.total}
174
- />
175
- </View>
176
- </View>
177
- )}
178
- {cart?.total >= 1 && (
179
- <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
180
- <OSTable style={{ marginTop: 15 }}>
181
- <OText size={14} style={{ fontWeight: 'bold' }}>
182
- {t('TOTAL', 'Total')}
183
- </OText>
184
- <OText size={14} style={{ fontWeight: 'bold' }} >
185
- {parsePrice(cart?.total)}
186
- </OText>
187
- </OSTable>
188
- </View>
189
- )}
190
- </OSBill>
191
- )}
192
- <OModal
193
- open={openProduct}
194
- entireModal
195
- customClose
196
- onClose={() => setModalIsOpen(false)}
197
- >
198
- <ProductForm
199
- isCartProduct
200
- productCart={curProduct}
201
- businessSlug={cart?.business?.slug}
202
- businessId={cart?.business_id}
203
- categoryId={curProduct?.category_id}
204
- productId={curProduct?.id}
205
- onSave={handlerProductAction}
206
- onClose={() => setModalIsOpen(false)}
207
- isFromCheckout={isFromCheckout}
208
- />
209
- </OModal>
150
+ {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
151
+ <OSTable>
152
+ <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
153
+ <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
154
+ </OSTable>
155
+ )}
156
+ {cart?.driver_tip > 0 && (
157
+ <OSTable>
158
+ <OText size={12}>
159
+ {t('DRIVER_TIP', 'Driver tip')}
160
+ {cart?.driver_tip_rate > 0 &&
161
+ parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
162
+ !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
163
+ (
164
+ `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
165
+ )}
166
+ </OText>
167
+ <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
168
+ </OSTable>
169
+ )}
170
+ {isCouponEnabled && !isCartPending && (
171
+ <View>
172
+ <View style={{ paddingVertical: 5 }}>
173
+ <CouponControl
174
+ businessId={cart.business_id}
175
+ price={cart.total}
176
+ />
177
+ </View>
178
+ </View>
179
+ )}
180
+ {cart?.total >= 1 && (
181
+ <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
182
+ <OSTable style={{ marginTop: 15 }}>
183
+ <OText size={14} style={{ fontWeight: 'bold' }}>
184
+ {t('TOTAL', 'Total')}
185
+ </OText>
186
+ <OText size={14} style={{ fontWeight: 'bold' }} >
187
+ {parsePrice(cart?.total)}
188
+ </OText>
189
+ </OSTable>
190
+ </View>
191
+ )}
192
+ {cart?.status !== 2 && (
193
+ <OSTable>
194
+ <View style={{ width: '100%', marginTop: 20 }}>
195
+ <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
196
+ <View style={{ flex: 1, width: '100%' }}>
197
+ <OInput
198
+ value={cart?.comment}
199
+ placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
200
+ onChange={(value: string) => handleChangeComment(value)}
201
+ style={{
202
+ alignItems: 'flex-start',
203
+ width: '100%',
204
+ height: 100,
205
+ borderColor: theme.colors.textSecondary,
206
+ paddingRight: 50,
207
+ marginTop: 10
208
+ }}
209
+ multiline
210
+ />
211
+ {commentState?.loading && (
212
+ <View style={{ position: 'absolute', right: 20 }}>
213
+ <ActivityIndicator
214
+ size='large'
215
+ style={{ height: 100 }}
216
+ color={theme.colors.primary}
217
+ />
218
+ </View>
219
+ )}
220
+ </View>
221
+ </View>
222
+ </OSTable>
223
+ )}
224
+ </OSBill>
225
+ )}
226
+ <OModal
227
+ open={openProduct}
228
+ entireModal
229
+ customClose
230
+ onClose={() => setModalIsOpen(false)}
231
+ >
232
+ <ProductForm
233
+ isCartProduct
234
+ productCart={curProduct}
235
+ businessSlug={cart?.business?.slug}
236
+ businessId={cart?.business_id}
237
+ categoryId={curProduct?.category_id}
238
+ productId={curProduct?.id}
239
+ onSave={handlerProductAction}
240
+ onClose={() => setModalIsOpen(false)}
241
+ isFromCheckout={isFromCheckout}
242
+ />
243
+ </OModal>
210
244
  <OModal
211
245
  open={openTaxModal.open}
212
246
  onClose={() => setOpenTaxModal({ open: false, data: null })}
@@ -214,19 +248,19 @@ const OrderSummaryUI = (props: any) => {
214
248
  >
215
249
  <TaxInformation data={openTaxModal.data} products={cart.products} />
216
250
  </OModal>
217
- </>
218
- )}
219
- </OSContainer>
220
- )
251
+ </>
252
+ )}
253
+ </OSContainer>
254
+ )
221
255
  }
222
256
 
223
257
  export const OrderSummary = (props: any) => {
224
- const orderSummaryProps = {
225
- ...props,
226
- UIComponent: OrderSummaryUI
227
- }
258
+ const orderSummaryProps = {
259
+ ...props,
260
+ UIComponent: OrderSummaryUI
261
+ }
228
262
 
229
- return (
230
- <Cart {...orderSummaryProps} />
231
- )
263
+ return (
264
+ <Cart {...orderSummaryProps} />
265
+ )
232
266
  }
package/themes/franchises/src/layouts/Container.tsx CHANGED
@@ -15,7 +15,7 @@ const SafeAreaStyled = styled.SafeAreaView`
15
15
  export const Container = (props: any) => {
16
16
  return (
17
17
  <SafeAreaStyled>
18
- <ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{...props.style}}>
18
+ <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
19
19
  {props.children}
20
20
  </ContainerStyled>
21
21
  </SafeAreaStyled>
package/themes/instacart/src/components/Cart/index.tsx CHANGED
@@ -16,12 +16,12 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
16
16
  import { BusinessItemAccordion } from '../BusinessItemAccordion';
17
17
  import { CouponControl } from '../CouponControl';
18
18
 
19
- import { OButton, OModal, OText } from '../shared';
19
+ import { OButton, OInput, OModal, OText } from '../shared';
20
20
  import { ProductForm } from '../ProductForm';
21
21
  import { UpsellingProducts } from '../UpsellingProducts';
22
22
  import { verifyDecimals } from '../../utils';
23
23
  import { useTheme } from 'styled-components/native';
24
- import { TouchableOpacity } from 'react-native';
24
+ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
25
25
  import AntIcon from 'react-native-vector-icons/AntDesign'
26
26
  import { TaxInformation } from '../TaxInformation';
27
27
  const CartUI = (props: any) => {
@@ -34,7 +34,9 @@ const CartUI = (props: any) => {
34
34
  removeProduct,
35
35
  handleCartOpen,
36
36
  setIsCartsLoading,
37
- isExpanded
37
+ isExpanded,
38
+ handleChangeComment,
39
+ commentState
38
40
  } = props
39
41
 
40
42
  const theme = useTheme()
@@ -245,6 +247,38 @@ const CartUI = (props: any) => {
245
247
  </OText>
246
248
  </OSTable>
247
249
  </OSTotal>
250
+ {cart?.status !== 2 && (
251
+ <OSTable>
252
+ <View style={{ width: '100%', marginTop: 20 }}>
253
+ <OText>{t('COMMENTS', 'Comments')}</OText>
254
+ <View style={{ flex: 1, width: '100%' }}>
255
+ <OInput
256
+ value={cart?.comment}
257
+ placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
258
+ onChange={(value: string) => handleChangeComment(value)}
259
+ style={{
260
+ alignItems: 'flex-start',
261
+ width: '100%',
262
+ height: 100,
263
+ borderColor: theme.colors.textSecondary,
264
+ paddingRight: 50,
265
+ marginTop: 10
266
+ }}
267
+ multiline
268
+ />
269
+ {commentState?.loading && (
270
+ <View style={{ position: 'absolute', right: 20 }}>
271
+ <ActivityIndicator
272
+ size='large'
273
+ style={{ height: 100 }}
274
+ color={theme.colors.primary}
275
+ />
276
+ </View>
277
+ )}
278
+ </View>
279
+ </View>
280
+ </OSTable>
281
+ )}
248
282
  </OSBill>
249
283
  )}
250
284
  {cart?.valid_products && (
package/themes/instacart/src/components/OrderDetails/index.tsx CHANGED
@@ -478,6 +478,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
478
478
  <OText style={{ ...theme.labels.normal, fontWeight: '600', color: theme.colors.textPrimary }}>{t('TOTAL', 'Total')}</OText>
479
479
  <OText style={{ ...theme.labels.normal, fontWeight: '600', color: theme.colors.textPrimary }}>{parsePrice(order?.summary?.total || order?.total)}</OText>
480
480
  </Table>
481
+ {order?.comment && (
482
+ <Table>
483
+ <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
484
+ <OText style={{ maxWidth: '70%' }}>
485
+ {order?.comment}
486
+ </OText>
487
+ </Table>
488
+ )}
481
489
  </OrderBill>
482
490
  </OrderContent>
483
491
  </>
package/themes/instacart/src/components/OrderSummary/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState } from 'react';
2
- import { TouchableOpacity, View } from 'react-native'
2
+ import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
3
3
  import {
4
4
  Cart,
5
5
  useOrder,
@@ -19,7 +19,7 @@ import {
19
19
 
20
20
  import { ProductItemAccordion } from '../ProductItemAccordion';
21
21
  import { CouponControl } from '../CouponControl';
22
- import { OIcon, OModal, OText } from '../shared';
22
+ import { OIcon, OInput, OModal, OText } from '../shared';
23
23
  import { ProductForm } from '../ProductForm';
24
24
  import { verifyDecimals } from '../../utils';
25
25
  import { useTheme } from 'styled-components/native';
@@ -38,7 +38,9 @@ const OrderSummaryUI = (props: any) => {
38
38
  isFromCheckout,
39
39
  isDriverTips,
40
40
  handleProductDelete,
41
- handleProductEdit
41
+ handleProductEdit,
42
+ handleChangeComment,
43
+ commentState
42
44
  } = props;
43
45
 
44
46
  const theme = useTheme();
@@ -218,7 +220,38 @@ const OrderSummaryUI = (props: any) => {
218
220
  </View>
219
221
  </View>
220
222
  )}
221
-
223
+ {cart?.status !== 2 && (
224
+ <OSTable>
225
+ <View style={{ width: '100%', marginTop: 20 }}>
226
+ <OText>{t('COMMENTS', 'Comments')}</OText>
227
+ <View style={{ flex: 1, width: '100%' }}>
228
+ <OInput
229
+ value={cart?.comment}
230
+ placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
231
+ onChange={(value: string) => handleChangeComment(value)}
232
+ style={{
233
+ alignItems: 'flex-start',
234
+ width: '100%',
235
+ height: 100,
236
+ borderColor: theme.colors.textSecondary,
237
+ paddingRight: 50,
238
+ marginTop: 10
239
+ }}
240
+ multiline
241
+ />
242
+ {commentState?.loading && (
243
+ <View style={{ position: 'absolute', right: 20 }}>
244
+ <ActivityIndicator
245
+ size='large'
246
+ style={{ height: 100 }}
247
+ color={theme.colors.primary}
248
+ />
249
+ </View>
250
+ )}
251
+ </View>
252
+ </View>
253
+ </OSTable>
254
+ )}
222
255
  </OSBill>
223
256
  )}
224
257
  <OModal
package/themes/instacart/src/layouts/Container.tsx CHANGED
@@ -20,7 +20,7 @@ export const Container = (props: any) => {
20
20
  {props.children}
21
21
  </View>
22
22
  ) : (
23
- <ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{ padding: props.nopadding ? 0 : 40, paddingTop: 0 }}>
23
+ <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' {...props} style={{ padding: props.nopadding ? 0 : 40, paddingTop: 0 }}>
24
24
  {props.children}
25
25
  </ContainerStyled>
26
26
  )}
package/themes/kiosk/src/layouts/Container.tsx CHANGED
@@ -22,7 +22,7 @@ export const Container = (props: Props) => {
22
22
  <SafeAreStyled
23
23
  nestedScrollEnabled={props.nestedScrollEnabled}
24
24
  >
25
- <ContainerStyled {...props}>{props.children}</ContainerStyled>
25
+ <ContainerStyled {...props} ref={props?.forwardRef}>{props.children}</ContainerStyled>
26
26
  </SafeAreStyled>
27
27
  );
28
28
  };
@@ -35,4 +35,5 @@ interface Props {
35
35
  nestedScrollEnabled: boolean,
36
36
  nopadding?: boolean;
37
37
  children?: any;
38
+ forwardRef?: any
38
39
  }