ordering-ui-react-native 0.17.3 → 0.17.5

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/ActiveOrders/styles.tsx +8 -14
  3. package/src/components/OrdersOption/index.tsx +54 -56
  4. package/themes/original/src/components/ProductItemAccordion/index.tsx +37 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.17.3",
3
+ "version": "0.17.5",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/ActiveOrders/styles.tsx CHANGED
@@ -1,10 +1,6 @@
1
- import styled from 'styled-components/native'
1
+ import styled, { css } from 'styled-components/native'
2
2
 
3
- export const ActiveOrdersContainer = styled.ScrollView`
4
- margin-bottom: 20px;
5
- height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
6
- max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
7
- `
3
+ export const ActiveOrdersContainer = styled.ScrollView``
8
4
 
9
5
  export const Card = styled.TouchableOpacity`
10
6
  flex: 1;
@@ -13,25 +9,24 @@ export const Card = styled.TouchableOpacity`
13
9
  margin-right: 10px;
14
10
  min-width: 320px;
15
11
  width: 320px;
16
- height: ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard ? '100px' : '200px'};
12
+ margin-bottom: 10px;
13
+ ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard && css`
14
+ padding: 10px 0;
15
+ `};
17
16
  `
18
17
 
19
18
  export const Map = styled.View`
20
19
  flex: 1;
21
- height: 125px;
22
- margin-bottom: 10px;
23
20
  `
24
21
 
25
22
  export const Information = styled.View`
26
23
  flex-direction: row;
27
24
  flex: 1;
28
- height: 100px;
29
25
  align-items: center;
30
26
  padding: 10px;
31
27
  `
32
28
 
33
- export const Logo = styled.View`
34
- `
29
+ export const Logo = styled.View``
35
30
 
36
31
  export const OrderInformation = styled.View`
37
32
  flex-direction: row;
@@ -40,8 +35,7 @@ export const OrderInformation = styled.View`
40
35
  padding-left: 10px;
41
36
  `
42
37
 
43
- export const BusinessInformation = styled.View`
44
- `
38
+ export const BusinessInformation = styled.View``
45
39
 
46
40
  export const Price = styled.View`
47
41
  justify-content: space-between;
package/src/components/OrdersOption/index.tsx CHANGED
@@ -102,46 +102,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
102
102
  }
103
103
 
104
104
  useEffect(() => {
105
+ const length = orders.filter((order : any) => orderStatus.includes(order.status)).length
106
+
105
107
  setOrdersLength && setOrdersLength({
106
108
  ...ordersLength,
107
- [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
109
+ [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: length
108
110
  })
109
- }, [orders.length])
111
+ ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] = length
112
+ }, [orders])
110
113
 
111
114
  useEffect(() => {
112
- setOrdersFiltered(filterForOrders === 'preorders' ? orders.filter((order : any) => order.status === 13) : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13))
115
+ setOrdersFiltered(filterForOrders === 'preorders'
116
+ ? orders.filter((order : any) => order.status === 13)
117
+ : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13)
118
+ )
113
119
  }, [filterForOrders, orders])
114
120
 
115
121
  return (
116
- <>
122
+ <View style={{ marginBottom: 20 }}>
117
123
  <OptionTitle>
118
- {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
119
- <>
120
- <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
121
- <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
122
- {titleContent || (activeOrders
123
- ? t('ACTIVE_ORDERS', 'Active Orders')
124
- : t('PREVIOUS_ORDERS', 'Previous Orders'))}
125
- </OText>
126
- </TouchableOpacity>
127
- {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
128
- <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
129
- <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
130
- {t('PREORDERS', 'Preorders')}
131
- </OText>
132
- </TouchableOpacity>
133
- )}
134
- </>
124
+ <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
125
+ <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
126
+ {titleContent || (activeOrders
127
+ ? t('ACTIVE_ORDERS', 'Active Orders')
128
+ : t('PREVIOUS_ORDERS', 'Previous Orders'))}
129
+ </OText>
130
+ </TouchableOpacity>
131
+ {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
132
+ <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
133
+ <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
134
+ {t('PREORDERS', 'Preorders')}
135
+ </OText>
136
+ </TouchableOpacity>
135
137
  )}
136
138
  </OptionTitle>
137
- {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
138
- <NotFoundSource
139
- content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
140
- image={imageFails}
141
- conditioned
142
- />
139
+ {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
140
+ activeOrders ? (
141
+ <ActiveOrders
142
+ orders={ordersFiltered}
143
+ pagination={pagination}
144
+ loadMoreOrders={loadMoreOrders}
145
+ reorderLoading={reorderLoading}
146
+ customArray={customArray}
147
+ getOrderStatus={getOrderStatus}
148
+ onNavigationRedirect={onNavigationRedirect}
149
+ setScreen={setScreen}
150
+ screen={screen}
151
+ isPreorders={filterForOrders === 'preorders'}
152
+ preordersLength={orders.filter((order : any) => order.status === 13)?.length}
153
+ />
154
+ ) : (
155
+ <PreviousOrders
156
+ reorderLoading={reorderLoading}
157
+ orders={ordersFiltered}
158
+ pagination={pagination}
159
+ loadMoreOrders={loadMoreOrders}
160
+ getOrderStatus={getOrderStatus}
161
+ onNavigationRedirect={onNavigationRedirect}
162
+ handleReorder={handleReorder}
163
+ />
164
+ )
143
165
  )}
144
- {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
166
+ {!loading &&
167
+ !isLoadingFirstRender &&
168
+ ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] === 0 &&
169
+ (
145
170
  <NotFoundSource
146
171
  content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
147
172
  image={imageFails}
@@ -179,34 +204,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
179
204
  )}
180
205
  </>
181
206
  )}
182
- {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
183
- activeOrders ? (
184
- <ActiveOrders
185
- orders={ordersFiltered}
186
- pagination={pagination}
187
- loadMoreOrders={loadMoreOrders}
188
- reorderLoading={reorderLoading}
189
- customArray={customArray}
190
- getOrderStatus={getOrderStatus}
191
- onNavigationRedirect={onNavigationRedirect}
192
- setScreen={setScreen}
193
- screen={screen}
194
- isPreorders={filterForOrders === 'preorders'}
195
- preordersLength={orders.filter((order : any) => order.status === 13)?.length}
196
- />
197
- ) : (
198
- <PreviousOrders
199
- reorderLoading={reorderLoading}
200
- orders={ordersFiltered}
201
- pagination={pagination}
202
- loadMoreOrders={loadMoreOrders}
203
- getOrderStatus={getOrderStatus}
204
- onNavigationRedirect={onNavigationRedirect}
205
- handleReorder={handleReorder}
206
- />
207
- )
208
- )}
209
- </>
207
+ </View>
210
208
  )
211
209
  }
212
210
 
package/themes/original/src/components/ProductItemAccordion/index.tsx CHANGED
@@ -68,7 +68,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
68
68
 
69
69
  const [, t] = useLanguage()
70
70
  const [orderState] = useOrder()
71
- const [{ parsePrice, optimizeImage }] = useUtils()
71
+ const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
72
72
 
73
73
  const [isActive, setActiveState] = useState(false)
74
74
  // const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
@@ -152,31 +152,44 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
152
152
  )}
153
153
  </ProductImage>
154
154
  )}
155
- {isCartProduct && !isCartPending && getProductMax && (
156
- <ProductInfo>
157
- <RNPickerSelect
158
- items={productOptions}
159
- onValueChange={handleChangeQuantity}
160
- value={product.quantity.toString()}
161
- style={pickerStyle}
162
- useNativeAndroidPickerStyle={false}
163
- placeholder={{}}
164
- Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
165
- disabled={orderState.loading}
166
- />
167
- </ProductInfo>
168
- )}
169
- {isFromCheckout && (
170
- <ProductQuantity>
171
- <OText size={12} lineHeight={18}>
172
- {product?.quantity}
155
+ {!!product?.calendar_event ? (
156
+ <View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
157
+ <View>
158
+ <OText size={12} lineHeight={18} weight={'400'} numberOfLines={1}>{product?.name}</OText>
159
+ </View>
160
+ <OText size={10} color={theme.colors.textSecondary} style={{ marginTop: 3 }}>
161
+ {parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
173
162
  </OText>
174
- </ProductQuantity>
163
+ </View>
164
+ ): (
165
+ <>
166
+ {isCartProduct && !isCartPending && getProductMax && (
167
+ <ProductInfo>
168
+ <RNPickerSelect
169
+ items={productOptions}
170
+ onValueChange={handleChangeQuantity}
171
+ value={product.quantity.toString()}
172
+ style={pickerStyle}
173
+ useNativeAndroidPickerStyle={false}
174
+ placeholder={{}}
175
+ Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
176
+ disabled={orderState.loading}
177
+ />
178
+ </ProductInfo>
179
+ )}
180
+ {isFromCheckout && (
181
+ <ProductQuantity>
182
+ <OText size={12} lineHeight={18}>
183
+ {product?.quantity}
184
+ </OText>
185
+ </ProductQuantity>
186
+ )}
187
+ <View style={{ flex: 1 }}>
188
+ <OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
189
+ </View>
190
+ </>
175
191
  )}
176
- <View style={{ flex: 1 }}>
177
- <OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
178
- </View>
179
- <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end' }}>
192
+ <View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
180
193
  <View style={{ flexDirection: 'row' }}>
181
194
  <OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
182
195
  {(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (