ordering-ui-react-native 0.17.72 → 0.17.74

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 (22) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/AcceptOrRejectOrder/index.tsx +1 -0
  3. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +2 -0
  4. package/themes/business/src/components/PreviousOrders/index.tsx +115 -8
  5. package/themes/business/src/components/PreviousOrders/styles.tsx +1 -1
  6. package/themes/business/src/components/shared/OLink.tsx +3 -2
  7. package/themes/original/src/components/Cart/index.tsx +1 -0
  8. package/themes/original/src/components/Checkout/index.tsx +95 -83
  9. package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx +96 -0
  10. package/themes/original/src/components/GiftCard/GiftCardUI/styles.tsx +5 -0
  11. package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx +96 -0
  12. package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx +6 -0
  13. package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx +178 -0
  14. package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx +8 -0
  15. package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx +165 -0
  16. package/themes/original/src/components/GiftCard/SendGiftCard/styles.tsx +9 -0
  17. package/themes/original/src/components/OrderDetails/index.tsx +175 -149
  18. package/themes/original/src/components/OrderSummary/index.tsx +6 -3
  19. package/themes/original/src/components/PaymentOptions/index.tsx +1 -1
  20. package/themes/original/src/components/ProductItemAccordion/index.tsx +4 -3
  21. package/themes/original/src/components/Wallets/index.tsx +13 -0
  22. package/themes/original/src/types/index.tsx +2 -1
package/themes/original/src/components/OrderDetails/index.tsx CHANGED
@@ -48,6 +48,7 @@ import { Placeholder, PlaceholderLine } from 'rn-placeholder';
48
48
  import NavBar from '../NavBar'
49
49
  import { OrderHistory } from './OrderHistory';
50
50
  import { PlaceSpot } from '../PlaceSpot'
51
+ import { SendGiftCard } from '../GiftCard/SendGiftCard'
51
52
  export const OrderDetailsUI = (props: OrderDetailsParams) => {
52
53
  const {
53
54
  navigation,
@@ -111,6 +112,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
111
112
  const [{ carts }] = useOrder()
112
113
 
113
114
  const [isReviewed, setIsReviewed] = useState(false)
115
+ const [isGiftCardSent, setIsGiftCardSent] = useState(false)
114
116
  const [isOrderHistory, setIsOrderHistory] = useState(false)
115
117
  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
116
118
  const [refreshing] = useState(false);
@@ -120,6 +122,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
120
122
  const directionTypes = [2, 3, 4, 5]
121
123
  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
122
124
  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
125
+ const isGiftCardOrder = !order?.business_id
123
126
 
124
127
  const walletName: any = {
125
128
  cash: {
@@ -612,175 +615,179 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
612
615
  </OText>
613
616
  </View>
614
617
  )}
615
- <OrderInfo>
616
- <OrderData>
617
- <View style={styles.linkWrapper}>
618
- {
619
- (
620
- parseInt(order?.status) === 1 ||
621
- parseInt(order?.status) === 11 ||
622
- parseInt(order?.status) === 15
623
- ) && !order.review && !isReviewed && (
624
- <TouchableOpacity
625
- activeOpacity={0.7}
626
- style={{ marginTop: 6, marginRight: 10 }}
627
- onPress={() => handleClickOrderReview(order)}
628
- >
629
- <OText
630
- size={12}
631
- lineHeight={15}
632
- color={theme.colors.primary}
633
- style={{ textDecorationLine: 'underline' }}
618
+ {!isGiftCardOrder && (
619
+ <OrderInfo>
620
+ <OrderData>
621
+ <View style={styles.linkWrapper}>
622
+ {
623
+ (
624
+ parseInt(order?.status) === 1 ||
625
+ parseInt(order?.status) === 11 ||
626
+ parseInt(order?.status) === 15
627
+ ) && !order.review && !isReviewed && (
628
+ <TouchableOpacity
629
+ activeOpacity={0.7}
630
+ style={{ marginTop: 6, marginRight: 10 }}
631
+ onPress={() => handleClickOrderReview(order)}
634
632
  >
635
- {t('REVIEW_YOUR_ORDER', 'Review your order')}
636
- </OText>
637
- </TouchableOpacity>
638
- )}
639
- <TouchableOpacity
640
- activeOpacity={0.7}
641
- style={{ marginTop: 6 }}
642
- onPress={() => setIsOrderHistory(true)}
643
-
644
- >
645
- <OText
646
- size={12}
647
- lineHeight={15}
648
- color={theme.colors.primary}
649
- style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
633
+ <OText
634
+ size={12}
635
+ lineHeight={15}
636
+ color={theme.colors.primary}
637
+ style={{ textDecorationLine: 'underline' }}
638
+ >
639
+ {t('REVIEW_YOUR_ORDER', 'Review your order')}
640
+ </OText>
641
+ </TouchableOpacity>
642
+ )}
643
+ <TouchableOpacity
644
+ activeOpacity={0.7}
645
+ style={{ marginTop: 6 }}
646
+ onPress={() => setIsOrderHistory(true)}
647
+
650
648
  >
651
- {t('VIEW_DETAILS', 'View Details')}
652
- </OText>
653
- </TouchableOpacity>
654
- </View>
655
-
656
- <StaturBar>
657
- <LinearGradient
658
- start={{ x: 0.0, y: 0.0 }}
659
- end={{
660
- x: getOrderStatus(order?.status)?.percentage || 0,
661
- y: 0,
662
- }}
663
- locations={[0.9999, 0.9999]}
664
- colors={[theme.colors.primary, theme.colors.backgroundGray100]}
665
- style={styles.statusBar}
666
- />
667
- </StaturBar>
649
+ <OText
650
+ size={12}
651
+ lineHeight={15}
652
+ color={theme.colors.primary}
653
+ style={{ textDecorationLine: 'underline', textTransform: 'capitalize' }}
654
+ >
655
+ {t('VIEW_DETAILS', 'View Details')}
656
+ </OText>
657
+ </TouchableOpacity>
658
+ </View>
659
+
660
+ <StaturBar>
661
+ <LinearGradient
662
+ start={{ x: 0.0, y: 0.0 }}
663
+ end={{
664
+ x: getOrderStatus(order?.status)?.percentage || 0,
665
+ y: 0,
666
+ }}
667
+ locations={[0.9999, 0.9999]}
668
+ colors={[theme.colors.primary, theme.colors.backgroundGray100]}
669
+ style={styles.statusBar}
670
+ />
671
+ </StaturBar>
672
+ <OText
673
+ size={16}
674
+ lineHeight={24}
675
+ weight={'600'}
676
+ color={theme.colors.textNormal}>
677
+ {getOrderStatus(order?.status)?.value}
678
+ </OText>
679
+ </OrderData>
680
+ <View
681
+ style={{
682
+ height: 8,
683
+ backgroundColor: theme.colors.backgroundGray100,
684
+ marginTop: 18,
685
+ marginHorizontal: -40,
686
+ }}
687
+ />
688
+ </OrderInfo>
689
+ )}
690
+ </Header>
691
+ <OrderContent>
692
+ {!isGiftCardOrder && (
693
+ <OrderBusiness>
668
694
  <OText
669
695
  size={16}
670
696
  lineHeight={24}
671
- weight={'600'}
672
- color={theme.colors.textNormal}>
673
- {getOrderStatus(order?.status)?.value}
697
+ weight={'500'}
698
+ color={theme.colors.textNormal}
699
+ mBottom={12}>
700
+ {t('FROM', 'From')}
674
701
  </OText>
675
- </OrderData>
676
- <View
677
- style={{
678
- height: 8,
679
- backgroundColor: theme.colors.backgroundGray100,
680
- marginTop: 18,
681
- marginHorizontal: -40,
682
- }}
683
- />
684
- </OrderInfo>
685
- </Header>
686
- <OrderContent>
687
- <OrderBusiness>
688
- <OText
689
- size={16}
690
- lineHeight={24}
691
- weight={'500'}
692
- color={theme.colors.textNormal}
693
- mBottom={12}>
694
- {t('FROM', 'From')}
695
- </OText>
696
- <View
697
- style={{
698
- display: 'flex',
699
- flexDirection: 'column',
700
- alignItems: 'flex-start',
701
- }}>
702
702
  <View
703
703
  style={{
704
- flexDirection: 'row',
705
- alignItems: 'center',
706
- justifyContent: 'space-between',
704
+ display: 'flex',
705
+ flexDirection: 'column',
706
+ alignItems: 'flex-start',
707
707
  }}>
708
- <OText
709
- size={13}
710
- lineHeight={20}
711
- color={theme.colors.textNormal}
712
- style={{ flexGrow: 1, flexBasis: '80%' }}>
713
- {order?.business?.name}
714
- </OText>
715
- <Icons>
716
- {!!order?.business?.cellphone && (
708
+ <View
709
+ style={{
710
+ flexDirection: 'row',
711
+ alignItems: 'center',
712
+ justifyContent: 'space-between',
713
+ }}>
714
+ <OText
715
+ size={13}
716
+ lineHeight={20}
717
+ color={theme.colors.textNormal}
718
+ style={{ flexGrow: 1, flexBasis: '80%' }}>
719
+ {order?.business?.name}
720
+ </OText>
721
+ <Icons>
722
+ {!!order?.business?.cellphone && (
723
+ <TouchableOpacity
724
+ onPress={() => order?.business?.cellphone &&
725
+ Linking.openURL(`tel:${order?.business?.cellphone}`)
726
+ }
727
+ style={{ paddingEnd: 5 }}
728
+ >
729
+ <OIcon
730
+ src={theme.images.general.phone}
731
+ width={16}
732
+ color={theme.colors.disabled}
733
+ />
734
+ </TouchableOpacity>
735
+ )}
717
736
  <TouchableOpacity
718
- onPress={() => order?.business?.cellphone &&
719
- Linking.openURL(`tel:${order?.business?.cellphone}`)
720
- }
721
- style={{ paddingEnd: 5 }}
722
- >
737
+ style={{ paddingStart: 5 }}
738
+ onPress={() => handleGoToMessages('business')}>
723
739
  <OIcon
724
- src={theme.images.general.phone}
740
+ src={theme.images.general.chat}
725
741
  width={16}
726
742
  color={theme.colors.disabled}
727
743
  />
728
744
  </TouchableOpacity>
729
- )}
730
- <TouchableOpacity
731
- style={{ paddingStart: 5 }}
732
- onPress={() => handleGoToMessages('business')}>
733
- <OIcon
734
- src={theme.images.general.chat}
735
- width={16}
736
- color={theme.colors.disabled}
737
- />
738
- </TouchableOpacity>
739
- </Icons>
740
- </View>
741
- <OText
742
- size={12}
743
- lineHeight={18}
744
- color={theme.colors.textNormal}
745
- mBottom={2}>
746
- {order?.business?.email}
747
- </OText>
748
- {!!order?.business?.cellphone && (
745
+ </Icons>
746
+ </View>
749
747
  <OText
750
748
  size={12}
751
749
  lineHeight={18}
752
750
  color={theme.colors.textNormal}
753
751
  mBottom={2}>
754
- {order?.business?.cellphone}
752
+ {order?.business?.email}
753
+ </OText>
754
+ {!!order?.business?.cellphone && (
755
+ <OText
756
+ size={12}
757
+ lineHeight={18}
758
+ color={theme.colors.textNormal}
759
+ mBottom={2}>
760
+ {order?.business?.cellphone}
761
+ </OText>
762
+ )}
763
+ <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
764
+ {order?.business?.address}
755
765
  </OText>
766
+ </View>
767
+ {directionTypes.includes(order?.delivery_type) && (
768
+ <OButton
769
+ text={t('GET_DIRECTIONS', 'Get Directions')}
770
+ imgRightSrc=''
771
+ textStyle={{ color: theme.colors.white }}
772
+ style={{
773
+ alignSelf: 'center',
774
+ borderRadius: 10,
775
+ marginTop: 30
776
+ }}
777
+ onClick={() => showLocation({
778
+ latitude: order?.business?.location?.lat,
779
+ longitude: order?.business?.location?.lng,
780
+ naverCallerName: 'com.reactnativeappstemplate5',
781
+ dialogTitle: t('GET_DIRECTIONS', 'Get Directions'),
782
+ dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
783
+ cancelText: t('CANCEL', 'Cancel'),
784
+ })}
785
+ />
756
786
  )}
757
- <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
758
- {order?.business?.address}
759
- </OText>
760
- </View>
761
- {directionTypes.includes(order?.delivery_type) && (
762
- <OButton
763
- text={t('GET_DIRECTIONS', 'Get Directions')}
764
- imgRightSrc=''
765
- textStyle={{ color: theme.colors.white }}
766
- style={{
767
- alignSelf: 'center',
768
- borderRadius: 10,
769
- marginTop: 30
770
- }}
771
- onClick={() => showLocation({
772
- latitude: order?.business?.location?.lat,
773
- longitude: order?.business?.location?.lng,
774
- naverCallerName: 'com.reactnativeappstemplate5',
775
- dialogTitle: t('GET_DIRECTIONS', 'Get Directions'),
776
- dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
777
- cancelText: t('CANCEL', 'Cancel'),
778
- })}
779
- />
780
- )}
781
- </OrderBusiness>
787
+ </OrderBusiness>
788
+ )}
782
789
 
783
- {placeSpotTypes.includes(order?.delivery_type) && (
790
+ {!isGiftCardOrder && placeSpotTypes.includes(order?.delivery_type) && (
784
791
  <PlaceSpotWrapper>
785
792
  <PlaceSpot
786
793
  isInputMode
@@ -806,7 +813,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
806
813
  weight={'500'}
807
814
  color={theme.colors.textNormal}
808
815
  mBottom={12}>
809
- {t('TO', 'To')}
816
+ {isGiftCardOrder ? t('CUSTOMER', 'Customer') : t('TO', 'To')}
810
817
  </OText>
811
818
  <Customer>
812
819
  <InfoBlock>
@@ -835,7 +842,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
835
842
  )}
836
843
  </InfoBlock>
837
844
  </Customer>
838
- {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
845
+ {!isGiftCardOrder && order?.delivery_option !== undefined && order?.delivery_type === 1 && (
839
846
  <View style={{ marginTop: 15 }}>
840
847
  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
841
848
  {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
@@ -1017,7 +1024,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
1017
1024
  </Table>
1018
1025
  ))
1019
1026
  }
1020
- <Divider />
1027
+ {!isGiftCardOrder && (
1028
+ <Divider />
1029
+ )}
1021
1030
  {order?.summary?.subtotal_with_discount > 0 && order?.summary?.discount > 0 && order?.summary?.total >= 0 && (
1022
1031
  <Table>
1023
1032
  <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
@@ -1191,6 +1200,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
1191
1200
  </View>
1192
1201
  )}
1193
1202
  </OrderBill>
1203
+ {isGiftCardOrder && order?.products[0]?.gift_card?.status === 'pending' && !isGiftCardSent && (
1204
+ <>
1205
+ <View
1206
+ style={{
1207
+ height: 8,
1208
+ backgroundColor: theme.colors.backgroundGray100,
1209
+ marginTop: 10,
1210
+ marginHorizontal: -40,
1211
+ marginBottom: 20
1212
+ }}
1213
+ />
1214
+ <SendGiftCard
1215
+ giftCardId={order?.products[0]?.gift_card?.id}
1216
+ setIsGiftCardSent={setIsGiftCardSent}
1217
+ />
1218
+ </>
1219
+ )}
1194
1220
  </OrderContent>
1195
1221
  </>
1196
1222
  )}
package/themes/original/src/components/OrderSummary/index.tsx CHANGED
@@ -121,6 +121,7 @@ const OrderSummaryUI = (props: any) => {
121
121
  onDeleteProduct={handleDeleteClick}
122
122
  onEditProduct={handleEditProduct}
123
123
  isFromCheckout={isFromCheckout}
124
+ isDisabledEdit={!cart?.business_id}
124
125
  />
125
126
  ))}
126
127
  </OSProductList>
@@ -166,7 +167,9 @@ const OrderSummaryUI = (props: any) => {
166
167
  </OSTable>
167
168
  ))
168
169
  }
169
- <Divider />
170
+ {cart?.business_id && (
171
+ <Divider />
172
+ )}
170
173
  {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
171
174
  <OSTable>
172
175
  <OText size={12} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
@@ -279,7 +282,7 @@ const OrderSummaryUI = (props: any) => {
279
282
  <OText size={12}>-{parsePrice(event.amount, { isTruncable: true })}</OText>
280
283
  </OSTable>
281
284
  ))}
282
- {isCouponEnabled && !isCartPending && (
285
+ {isCouponEnabled && !isCartPending && cart?.business_id && (
283
286
  <View>
284
287
  <View style={{ paddingVertical: 5 }}>
285
288
  <CouponControl
@@ -301,7 +304,7 @@ const OrderSummaryUI = (props: any) => {
301
304
  </OSTable>
302
305
  </View>
303
306
  )}
304
- {cart?.status !== 2 && (
307
+ {cart?.business_id && cart?.status !== 2 && (
305
308
  <OSTable>
306
309
  <View style={{ width: '100%', marginTop: 20 }}>
307
310
  <OText size={12}>{t('COMMENTS', 'Comments')}</OText>
package/themes/original/src/components/PaymentOptions/index.tsx CHANGED
@@ -287,7 +287,7 @@ const PaymentOptionsUI = (props: any) => {
287
287
  <StripeCardsList
288
288
  paymethod={isOpenMethod?.paymethod}
289
289
  businessId={props.businessId}
290
- publicKey={isOpenMethod?.paymethod?.credentials.publishable}
290
+ publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
291
291
  payType={paymethodsList?.name}
292
292
  onSelectCard={handlePaymethodDataChange}
293
293
  onNavigationRedirect={onNavigationRedirect}
package/themes/original/src/components/ProductItemAccordion/index.tsx CHANGED
@@ -27,6 +27,7 @@ import { ProductItemAccordionParams } from '../../types'
27
27
  export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
28
28
 
29
29
  const {
30
+ isDisabledEdit,
30
31
  isCartPending,
31
32
  isCartProduct,
32
33
  product,
@@ -203,7 +204,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
203
204
  </View>
204
205
  ) : (
205
206
  <>
206
- {isCartProduct && !isCartPending && getProductMax && (
207
+ {!isDisabledEdit && isCartProduct && !isCartPending && getProductMax && (
207
208
  <ProductInfo>
208
209
  <RNPickerSelect
209
210
  items={productOptions}
@@ -225,7 +226,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
225
226
  </ProductQuantity>
226
227
  )}
227
228
  <View style={{ flex: 1 }}>
228
- <OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
229
+ <OText size={12} lineHeight={18} weight={'400'} mLeft={8}>{product.name}</OText>
229
230
  </View>
230
231
  </>
231
232
  )}
@@ -237,7 +238,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
237
238
  )}
238
239
  </View>
239
240
  <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
240
- {onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
241
+ {!isDisabledEdit && onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
241
242
  <TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
242
243
  <MaterialCommunityIcon
243
244
  name='pencil-outline'
package/themes/original/src/components/Wallets/index.tsx CHANGED
@@ -27,6 +27,7 @@ import {
27
27
  import { OButton, OIcon, OText, OModal } from '../shared';
28
28
  import { NotFoundSource } from '../NotFoundSource';
29
29
  import { WalletTransactions } from '../WalletTransactions'
30
+ import { GiftCardUI } from '../GiftCard/GiftCardUI'
30
31
 
31
32
  const WalletsUI = (props: any) => {
32
33
  const {
@@ -47,6 +48,7 @@ const WalletsUI = (props: any) => {
47
48
  const [{ parsePrice }] = useUtils()
48
49
  const [{ configs }] = useConfig()
49
50
 
51
+
50
52
  const styles = StyleSheet.create({
51
53
  logoStyle: {
52
54
  width: 120,
@@ -57,6 +59,13 @@ const WalletsUI = (props: any) => {
57
59
  flexDirection: 'column',
58
60
  justifyContent: 'center',
59
61
  alignItems: 'center',
62
+ },
63
+ dividerStyle: {
64
+ height: 8,
65
+ backgroundColor: theme.colors.backgroundGray100,
66
+ marginVertical: 25,
67
+ marginHorizontal: -40,
68
+ width: '100%'
60
69
  }
61
70
  });
62
71
 
@@ -213,6 +222,10 @@ const WalletsUI = (props: any) => {
213
222
  </OText>
214
223
  </BalanceElement>
215
224
 
225
+ <View style={styles.dividerStyle} />
226
+ <GiftCardUI navigation={navigation} />
227
+ <View style={styles.dividerStyle} />
228
+
216
229
  {!isChewLayout && (
217
230
  <WalletTransactions
218
231
  transactionsList={transactionsList}
package/themes/original/src/types/index.tsx CHANGED
@@ -436,7 +436,8 @@ export interface ProductItemAccordionParams {
436
436
  onDeleteProduct?: (product: any) => void,
437
437
  onEditProduct?: (product: any) => void,
438
438
  offsetDisabled?: any,
439
- isFromCheckout?: any
439
+ isFromCheckout?: any,
440
+ isDisabledEdit?: any
440
441
  }
441
442
  export interface ReviewOrderParams {
442
443
  order?: { id: number, business_id: number, logo: string, driver: any, products: Array<any>, review: any, user_review: any };