ordering-ui-react-native 0.14.85 → 0.14.86

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/original/src/components/Checkout/index.tsx +13 -0
  3. package/themes/original/src/components/OrderProgress/index.tsx +1 -1
  4. package/themes/original/src/components/PaymentOptions/index.tsx +1 -1
  5. package/themes/original/src/components/ProductForm/index.tsx +13 -12
  6. package/themes/original/src/components/ProductOptionSubOption/index.tsx +75 -73
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.14.85",
3
+ "version": "0.14.86",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -667,6 +667,19 @@ const CheckoutUI = (props: any) => {
667
667
  setShowGateway={setShowGateway}
668
668
  />
669
669
  )}
670
+ {webviewPaymethod?.gateway === 'square' && showGateway.open && (
671
+ <PaymentOptionsWebView
672
+ onNavigationRedirect={onNavigationRedirect}
673
+ uri={`https://test-square-f50f7.web.app`}
674
+ user={user}
675
+ token={token}
676
+ cart={cart}
677
+ currency={currency}
678
+ webviewPaymethod={webviewPaymethod}
679
+ setShowGateway={setShowGateway}
680
+ locationId={'L1NGAY5M6KJRX'}
681
+ />
682
+ )}
670
683
  </>
671
684
  )
672
685
  }
package/themes/original/src/components/OrderProgress/index.tsx CHANGED
@@ -139,7 +139,7 @@ const OrderProgressUI = (props: any) => {
139
139
  return (
140
140
  <>
141
141
  {orderList?.loading && (
142
- <Placeholder Animation={Fade} height={160}>
142
+ <Placeholder Animation={Fade} height={158}>
143
143
  <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
144
144
  <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
145
145
  <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
package/themes/original/src/components/PaymentOptions/index.tsx CHANGED
@@ -154,7 +154,7 @@ const PaymentOptionsUI = (props: any) => {
154
154
  )
155
155
  }
156
156
 
157
- const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
157
+ const excludeIds: any = [32]; //exclude paypal & connect & redirect
158
158
 
159
159
  return (
160
160
  <PMContainer>
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -935,28 +935,29 @@ export const ProductOptionsUI = (props: any) => {
935
935
  style={{
936
936
  width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
937
937
  }}>
938
- {productCart &&
939
- !isSoldOut &&
940
- maxProductQuantity > 0 &&
938
+ {((productCart &&
941
939
  auth &&
942
- orderState.options?.address_id && (
940
+ orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
943
941
  <OButton
944
942
  onClick={() => handleSaveProduct()}
945
943
  imgRightSrc=""
946
944
  text={`${orderState.loading
947
945
  ? t('LOADING', 'Loading')
948
- : editMode
949
- ? t('UPDATE', 'Update')
950
- : t('ADD', 'Add')
946
+ : (isSoldOut || maxProductQuantity <= 0)
947
+ ? t('SOLD_OUT', 'Sold out')
948
+ : editMode
949
+ ? t('UPDATE', 'Update')
950
+ : t('ADD', 'Add')
951
951
  }`}
952
+ isDisabled={isSoldOut || maxProductQuantity <= 0}
952
953
  textStyle={{
953
- color: (saveErrors || !productCart.quantity) ? theme.colors.primary : theme.colors.white,
954
+ color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
954
955
  fontSize: orderState.loading || editMode ? 10 : 14
955
956
  }}
956
957
  style={{
957
- backgroundColor: (saveErrors || !productCart.quantity) ? theme.colors.lightGray : theme.colors.primary,
958
- borderColor: (saveErrors || !productCart.quantity) ? theme.colors.white : theme.colors.primary,
959
- opacity: (saveErrors || !productCart.quantity) ? 0.3 : 1,
958
+ backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
959
+ borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
960
+ opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
960
961
  borderRadius: 7.6,
961
962
  height: 44,
962
963
  shadowOpacity: 0,
@@ -976,7 +977,7 @@ export const ProductOptionsUI = (props: any) => {
976
977
  ) : (
977
978
  <OButton onClick={navigation.navigate('AddressList')} />
978
979
  ))}
979
- {(!auth || isSoldOut || maxProductQuantity <= 0) && (
980
+ {!auth && (
980
981
  <OButton
981
982
  isDisabled={isSoldOut || maxProductQuantity <= 0}
982
983
  onClick={() => handleRedirectLogin()}
package/themes/original/src/components/ProductOptionSubOption/index.tsx CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  ProductOptionSuboption as ProductSubOptionController
6
6
  } from 'ordering-components/native'
7
7
  import { useTheme } from 'styled-components/native';
8
- import { StyleSheet } from 'react-native'
8
+ import { StyleSheet, View } from 'react-native'
9
9
 
10
10
  import {
11
11
  Container,
@@ -52,81 +52,83 @@ export const ProductOptionSubOptionUI = (props: any) => {
52
52
  const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
53
53
  const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
54
54
  return (
55
- <Container onPress={() => handleSuboptionClick()}>
56
- <IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
57
- {((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
58
- state?.selected ? (
59
- <OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
55
+ <View>
56
+ <Container onPress={() => handleSuboptionClick()}>
57
+ <IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
58
+ {((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
59
+ state?.selected ? (
60
+ <OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
61
+ ) : (
62
+ <OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
63
+ )
60
64
  ) : (
61
- <OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
62
- )
63
- ) : (
64
- state?.selected ? (
65
- <OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
66
- ) : (
67
- <OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
68
- )
69
- )}
70
- <OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
71
- {suboption?.name}
65
+ state?.selected ? (
66
+ <OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
67
+ ) : (
68
+ <OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
69
+ )
70
+ )}
71
+ <OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
72
+ {suboption?.name}
73
+ </OText>
74
+ </IconControl>
75
+ <QuantityControl>
76
+ {option?.allow_suboption_quantity && state?.selected && (
77
+ <>
78
+ <Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
79
+ <OIcon
80
+ src={theme.images.general.minus}
81
+ width={16}
82
+ color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
83
+ />
84
+ </Checkbox>
85
+ <OText size={12} mLeft={5} mRight={5}>
86
+ {state.quantity}
87
+ </OText>
88
+ <Checkbox disabled={disabled || disableIncrement} onPress={increment}>
89
+ <OIcon
90
+ src={theme.images.general.plus}
91
+ width={16}
92
+ color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
93
+ />
94
+ </Checkbox>
95
+ </>
96
+ )}
97
+ </QuantityControl>
98
+ <PositionControl>
99
+ {option?.with_half_option && state?.selected && (
100
+ <>
101
+ <Circle disabled={disabled} onPress={() => changePosition('left')}>
102
+ <OIcon
103
+ src={theme.images.general.half_l}
104
+ color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
105
+ width={16}
106
+ style={styles.inverse}
107
+ />
108
+ </Circle>
109
+ <Circle disabled={disabled} onPress={() => changePosition('whole')}>
110
+ <OIcon
111
+ src={theme.images.general.half_f}
112
+ color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
113
+ width={16}
114
+ />
115
+ </Circle>
116
+ <Circle disabled={disabled} onPress={() => changePosition('right')}>
117
+ <OIcon
118
+ src={theme.images.general.half_r}
119
+ color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
120
+ width={16}
121
+ />
122
+ </Circle>
123
+ </>
124
+ )}
125
+ </PositionControl>
126
+ <OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
127
+ + {parsePrice(price)}
72
128
  </OText>
73
- </IconControl>
129
+ </Container>
74
130
  {showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
75
- <QuantityControl>
76
- {option?.allow_suboption_quantity && state?.selected && (
77
- <>
78
- <Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
79
- <OIcon
80
- src={theme.images.general.minus}
81
- width={16}
82
- color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
83
- />
84
- </Checkbox>
85
- <OText size={12} mLeft={5} mRight={5}>
86
- {state.quantity}
87
- </OText>
88
- <Checkbox disabled={disabled || disableIncrement} onPress={increment}>
89
- <OIcon
90
- src={theme.images.general.plus}
91
- width={16}
92
- color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
93
- />
94
- </Checkbox>
95
- </>
96
- )}
97
- </QuantityControl>
98
- <PositionControl>
99
- {option?.with_half_option && state?.selected && (
100
- <>
101
- <Circle disabled={disabled} onPress={() => changePosition('left')}>
102
- <OIcon
103
- src={theme.images.general.half_l}
104
- color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
105
- width={16}
106
- style={styles.inverse}
107
- />
108
- </Circle>
109
- <Circle disabled={disabled} onPress={() => changePosition('whole')}>
110
- <OIcon
111
- src={theme.images.general.half_f}
112
- color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
113
- width={16}
114
- />
115
- </Circle>
116
- <Circle disabled={disabled} onPress={() => changePosition('right')}>
117
- <OIcon
118
- src={theme.images.general.half_r}
119
- color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
120
- width={16}
121
- />
122
- </Circle>
123
- </>
124
- )}
125
- </PositionControl>
126
- <OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
127
- + {parsePrice(price)}
128
- </OText>
129
- </Container>
131
+ </View>
130
132
  )
131
133
  }
132
134