ordering-ui-react-native 0.21.78 → 0.21.79-release

package/themes/original/src/components/ForgotPasswordForm/index.tsx

@@ -64,7 +64,7 @@ const ForgotPasswordUI = (props: any) => {
 		handleReCaptcha(null)
 		if (reCaptchaValue) return
 
-	  if (!recaptchaConfig?.siteKey) {
+		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -73,7 +73,7 @@ const ForgotPasswordUI = (props: any) => {
 			return
 		}
 		recaptchaRef.current.open()
-  	}
+	}
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
@@ -92,8 +92,8 @@ const ForgotPasswordUI = (props: any) => {
 				formState.result?.result && showToast(
 					ToastType.Error,
 					typeof formState.result?.result === 'string'
-          ? formState.result?.result
-          : formState.result?.result[0]
+						? formState.result?.result
+						: formState.result?.result[0]
 				)
 				return
 			}
@@ -208,9 +208,7 @@ const ForgotPasswordUI = (props: any) => {
 
 					<OButton
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
-						textStyle={{ color: 'white' }}
-						bgColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
-						borderColor={emailSent && !formState.result?.error ? theme.colors.disabled : theme.colors.primary}
+						isDisabled={formState.loading || emailSent && !formState.result?.error}
 						isLoading={formState.loading}
 						imgRightSrc={null}
 						onClick={emailSent && !formState.result?.error ? () => { } : handleSubmit(onSubmit)}

package/themes/original/src/components/GiftCard/GiftCardOrdersList/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View } from 'react-native';
+import { OText } from '../../shared'
+import { VerticalGiftCardOrdersLayout } from '../VerticalGiftCardOrdersLayout'
+
+import {
+  Container,
+  NoOrdersWrapper
+} from './styles'
+
+export const GiftCardOrdersList = (props: any) => {
+  const {
+    onNavigationRedirect
+  } = props;
+
+	const theme = useTheme();
+  const [, t] = useLanguage();
+  const [isEmptyPending, setIsEmptyPending] = useState(false);
+  const [isEmptySent, setIsEmptySent] = useState(false);
+  const [isEmptyRedeemed, setIsEmptyRedeemed] = useState(false);
+
+  return (
+    <Container>
+      <VerticalGiftCardOrdersLayout
+        title={t('PENDING', 'Pending')}
+        defaultStatus='pending'
+        setIsEmpty={setIsEmptyPending}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {!isEmptyPending && (
+        <View
+          style={{
+            height: 8,
+            backgroundColor: theme.colors.backgroundGray100,
+            marginHorizontal: -40,
+          }}
+        />
+      )}
+
+      <VerticalGiftCardOrdersLayout
+        title={t('SENT', 'Sent')}
+        defaultStatus='sent'
+        setIsEmpty={setIsEmptySent}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      <VerticalGiftCardOrdersLayout
+        title={t('REDEEMED', 'Redeemed')}
+        defaultStatus='activated'
+        setIsEmpty={setIsEmptyRedeemed}
+        onNavigationRedirect={onNavigationRedirect}
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <NoOrdersWrapper>
+          <OText size={16} color={theme.colors.textNormal}>{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}</OText>
+        </NoOrdersWrapper>
+      )}
+    </Container>
+  )
+}

package/themes/original/src/components/GiftCard/GiftCardOrdersList/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+`
+
+export const NoOrdersWrapper = styled.View`
+  margin-vertical: 20px;
+`

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -12,7 +12,7 @@ import {
   Container
 } from './styles'
 
-export const GiftCardUI =  React.memo((props: any) => {
+export const GiftCardUI = React.memo((props: any) => {
   const {
     navigation
   } = props
@@ -57,9 +57,7 @@ export const GiftCardUI =  React.memo((props: any) => {
         <OButton
           onClick={() => setOpenModal('purchase')}
           text={t('PURCHASE', 'Purchase')}
-          bgColor={theme.colors.primary}
-          borderColor={theme.colors.primary}
-          textStyle={{ color: 'white', fontSize: 13 }}
+          textStyle={{ fontSize: 13 }}
           imgRightSrc={null}
           style={{ ...style.btnStyle, marginRight: 14 }}
         />
@@ -76,26 +74,26 @@ export const GiftCardUI =  React.memo((props: any) => {
       </View>
 
       <OModal
-				open={openModal === 'purchase'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'purchase'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<PurchaseGiftCard
+      >
+        <PurchaseGiftCard
           handleCustomGoToCheckout={handleCustomGoToCheckout}
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
       <OModal
-				open={openModal === 'redeem'}
-				onClose={() => setOpenModal(null)}
-				entireModal
+        open={openModal === 'redeem'}
+        onClose={() => setOpenModal(null)}
+        entireModal
         customClose
-			>
-				<RedeemGiftCard
+      >
+        <RedeemGiftCard
           onClose={() => setOpenModal(null)}
         />
-			</OModal>
+      </OModal>
     </Container>
   )
-})
+})

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -58,12 +58,10 @@ const PurchaseGiftCardUI = (props: any) => {
             borderWidth: 0,
             width: 26,
             height: 26,
-            backgroundColor: '#FFF',
-            borderColor: '#FFF',
-            shadowColor: '#FFF',
             paddingLeft: 0,
             paddingRight: 0,
           }}
+          useArrow
           onClick={onClose}
           icon={AntDesignIcon}
           iconProps={{
@@ -113,9 +111,7 @@ const PurchaseGiftCardUI = (props: any) => {
       <OButton
         onClick={() => handleAccept()}
         text={t('ACCEPT', 'Accept')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={!selectedProduct}
@@ -130,4 +126,4 @@ export const PurchaseGiftCard = (props: any) => {
     UIComponent: PurchaseGiftCardUI
   }
   return <PurchaseGiftCardController {...purchaseGiftCardProps} />
-}
+}

package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx

@@ -36,10 +36,10 @@ const RedeemGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -65,7 +65,7 @@ const RedeemGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -85,7 +85,7 @@ const RedeemGiftCardUI = (props: any) => {
       t('ERROR', 'Error'),
       stringError,
       [
-        { text: t('OK', 'oK'), onPress: () => {} }
+        { text: t('OK', 'oK'), onPress: () => { } }
       ]
     )
   }, [actionState.error])
@@ -108,12 +108,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -124,25 +122,25 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('REDEEM_GIFT_CARD', 'Redeem a gift card')}</OText>
           </View>
           <FormController>
             <OText color={theme.colors.textNormal} size={14} mBottom={10}>{t('GIFT_CARD_CODE', 'Gift card code')}</OText>
             <Controller
               control={control}
               render={({ onChange, value }: any) => (
-              <OInput
-                placeholder='XXXX-XXXX-XXXX-XXXX'
-                value={codeValue}
-                onChange={(val: any) => {
-                  onChange(val)
-                  handleChangeCode(val)
-                }}
-                autoCapitalize='characters'
-                autoCorrect={false}
-                blurOnSubmit={false}
-                style={style.inputStyle}
-              />
+                <OInput
+                  placeholder='XXXX-XXXX-XXXX-XXXX'
+                  value={codeValue}
+                  onChange={(val: any) => {
+                    onChange(val)
+                    handleChangeCode(val)
+                  }}
+                  autoCapitalize='characters'
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  style={style.inputStyle}
+                />
               )}
               name='code'
               rules={{
@@ -178,9 +176,7 @@ const RedeemGiftCardUI = (props: any) => {
           <OButton
             onClick={handleSubmit(onSubmit)}
             text={actionState?.loading ? t('LOADING', 'Loading') : t('APPLY_TO_YOUR_BALANCE', 'Apply to your balance')}
-            bgColor={theme.colors.primary}
-            borderColor={theme.colors.primary}
-            textStyle={{ color: 'white', fontSize: 13 }}
+            textStyle={{ fontSize: 13 }}
             imgRightSrc={null}
             style={style.btnStyle}
             isDisabled={actionState.loading}
@@ -202,12 +198,10 @@ const RedeemGiftCardUI = (props: any) => {
                 borderWidth: 0,
                 width: 26,
                 height: 26,
-                backgroundColor: '#FFF',
-                borderColor: '#FFF',
-                shadowColor: '#FFF',
                 paddingLeft: 0,
                 paddingRight: 0,
               }}
+              useArrow
               onClick={onClose}
               icon={AntDesignIcon}
               iconProps={{
@@ -218,7 +212,7 @@ const RedeemGiftCardUI = (props: any) => {
                 }
               }}
             />
-              <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
+            <OText color={theme.colors.textNormal} weight='bold' size={20} mLeft={10}>{t('GIFT_CARD', 'Gift card')}</OText>
           </View>
           <View>
             <OText color={theme.colors.textNormal} size={14} mBottom={6}>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</OText>
@@ -232,9 +226,7 @@ const RedeemGiftCardUI = (props: any) => {
                 onClose()
               }}
               text={t('OK', 'Ok')}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              textStyle={{ color: 'white', fontSize: 13 }}
+              textStyle={{ fontSize: 13 }}
               imgRightSrc={null}
               style={style.btnStyle}
             />

package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { StyleSheet, Platform, Alert } from 'react-native';
-import { useLanguage, SendGiftCard as SendGiftCardController  } from 'ordering-components/native';
+import { useLanguage, SendGiftCard as SendGiftCardController } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OText, OButton, OInput } from '../../shared';
 import { useForm, Controller } from 'react-hook-form'
@@ -29,10 +29,10 @@ const SendGiftCardUI = (props: any) => {
       marginTop: 20
     },
     inputStyle: {
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-		},
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: 7.6,
+    },
   })
 
   const onSubmit = (values) => {
@@ -50,7 +50,7 @@ const SendGiftCardUI = (props: any) => {
         t('ERROR', 'Error'),
         stringError,
         [
-          { text: t('OK', 'oK'), onPress: () => {} }
+          { text: t('OK', 'oK'), onPress: () => { } }
         ]
       )
     }
@@ -144,9 +144,7 @@ const SendGiftCardUI = (props: any) => {
       <OButton
         onClick={handleSubmit(onSubmit)}
         text={actionState?.loading ? t('LOADING', 'Loading') : t('SEND_GIFT_CARD', 'Send gift card')}
-        bgColor={theme.colors.primary}
-        borderColor={theme.colors.primary}
-        textStyle={{ color: 'white', fontSize: 13 }}
+        textStyle={{ fontSize: 13 }}
         imgRightSrc={null}
         style={style.btnStyle}
         isDisabled={actionState.loading}

package/themes/original/src/components/GiftCard/SingleGiftCard/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useLanguage, useUtils, useEvent } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { View, StyleSheet } from 'react-native';
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from 'rn-placeholder';
+import FastImage from 'react-native-fast-image';
+import { OText } from '../../shared'
+
+import {
+  CardContainer
+} from './styles'
+
+export const SingleGiftCard = (props: any) => {
+  const {
+    card,
+    isSkeleton,
+    onNavigationRedirect
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+
+  const styles = StyleSheet.create({
+    logo: {
+      borderRadius: 8,
+      width: 64,
+      height: 64
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      marginBottom: 24
+    }
+  });
+
+  const getGiftCardStatus = (status: string) => {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending')
+      case 'activated':
+        return t('REDEEMED', 'Redeemed')
+      default:
+        return status
+    }
+  }
+
+  const handleClickGiftCardOrder = (card: any) => {
+    onNavigationRedirect?.('OrderDetails', { orderId: card.order_product?.order_id });
+  }
+
+  return (
+    <CardContainer
+      activeOpacity={0.8}
+      onPress={() => handleClickGiftCardOrder(card)}
+    >
+      {isSkeleton ? (
+        <Placeholder style={{ marginBottom: 10 }} Animation={Fade}>
+          <View style={{ flexDirection: 'row' }}>
+            <View style={{ width: 64, marginRight: 14 }}>
+              <PlaceholderLine
+                width={100}
+                height={64}
+                style={{ marginRight: 10, marginBottom: 10 }}
+              />
+            </View>
+            <Placeholder style={{ paddingTop: 5 }}>
+              <PlaceholderLine width={60} style={{ marginBottom: 6}} />
+              <PlaceholderLine width={40} style={{ marginBottom: 6 }} />
+              <PlaceholderLine width={20} style={{ marginBottom: 0 }} />
+            </Placeholder>
+          </View>
+        </Placeholder>
+      ) : (
+        <View style={styles.innerContainer}>
+          <View>
+            <FastImage
+              style={styles.logo}
+              source={card?.order_product?.images ? {
+                uri: optimizeImage(card?.order_product?.images, 'h_86,c_limit')
+              } : theme?.images?.dummies?.businessLogo}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          </View>
+        <View style={{ flex: 1, marginLeft: 14 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between'  }}>
+            <OText size={12} lineHeight={18}>{card?.order_product?.name}</OText>
+            <OText size={12} lineHeight={18}>{parsePrice(card?.order_product?.price)}</OText>
+          </View>
+          <OText size={10} color={theme.colors.textSecondary} lineHeight={15}>{parseDate(card?.created_at)}</OText>
+          <OText size={10} color={theme.colors.primary}>{getGiftCardStatus(card?.status)}</OText>
+        </View>
+        </View>
+      )}
+    </CardContainer>
+  )
+}

package/themes/original/src/components/GiftCard/SingleGiftCard/styles.tsx

@@ -0,0 +1,4 @@
+import styled from 'styled-components/native';
+
+export const CardContainer = styled.TouchableOpacity`  
+`

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react';
+import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import {
+  Placeholder,
+  PlaceholderLine,
+  Fade
+} from 'rn-placeholder';
+import { SingleGiftCard } from '../SingleGiftCard';
+import { OButton, OText } from '../../shared';
+import {
+  ProductsListContainer,
+  SingleGiftCardWrapper,
+  WrappButton
+} from './styles'
+
+const VerticalGiftCardOrdersLayoutUI = (props: any) => {
+  const {
+    giftCards,
+    paginationProps,
+    loadMoreOrders,
+    title,
+    setIsEmpty,
+    onNavigationRedirect
+  } = props
+
+  const theme = useTheme();
+  const [, t] = useLanguage()
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <ProductsListContainer>
+      {
+        giftCards.loading ? (
+          <Placeholder Animation={Fade} style={{ marginVertical: 16 }}>
+            <PlaceholderLine width={30} height={16} />
+          </Placeholder>
+        ) : giftCards.list?.length > 0 && (
+          <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={24} style={{ marginTop: 24 }}>{title}</OText>
+        )}
+      {giftCards.list.map(card => (
+        <SingleGiftCardWrapper key={card.id}>
+          <SingleGiftCard
+            card={card}
+            onNavigationRedirect={onNavigationRedirect}
+          />
+        </SingleGiftCardWrapper>
+      ))}
+      {giftCards.loading && (
+        [...Array(10).keys()].map(i => (
+          <SingleGiftCardWrapper key={i}>
+            <SingleGiftCard
+              isSkeleton
+            />
+          </SingleGiftCardWrapper>
+        ))
+      )}
+      {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
+        <WrappButton>
+          <OButton
+            onClick={loadMoreOrders}
+            text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+            imgRightSrc={null}
+            style={{ borderRadius: 7.6, shadowOpacity: 0 }}
+          />
+        </WrappButton>
+      )}
+    </ProductsListContainer>
+  )
+}
+
+export const VerticalGiftCardOrdersLayout = (props: any) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: VerticalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native';
+
+export const ProductsListContainer = styled.View`  
+`
+export const WrappButton = styled.View`
+  margin-bottom: 24px;
+`
+export const SingleGiftCardWrapper = styled.View`  
+`