ordering-ui-react-native 0.17.90 → 0.17.91-release

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

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react'
-import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
+import React, { useEffect, useState, useRef } from 'react'
+import { useUtils, useEvent, PageBanner as PageBannerController } from 'ordering-components/native'
 import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Carousel from 'react-native-snap-carousel'
@@ -16,7 +16,10 @@ const PageBannerUI = (props: any) => {
 
 	const theme = useTheme();
 	const [{ optimizeImage }] = useUtils();
-  const carouselRef = useRef(null)
+  const [events] = useEvent()
+  const carouselRef = useRef<any>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [viewedBanner, setViewedBanner] = useState<any>(null)
 
   const windowWidth = Dimensions.get('window').width;
 
@@ -41,10 +44,11 @@ const PageBannerUI = (props: any) => {
   })
 
   const onRedirect = (route: string, params?: any) => {
-		navigation.navigate(route, params)
+		navigation.push(route, params)
 	}
 
-  const handleGoToPage = (action: any) => {
+  const handleGoToPage = (item: any) => {
+    const action = item.action
     if (!action?.url) return
     let slug
     if (action.type === 'business') {
@@ -59,15 +63,22 @@ const PageBannerUI = (props: any) => {
 				businessSlug: slug,
 				businessId: action.business_id,
         categoryId: action.category_id,
-        productId: action.product_id
+        productId: action.product_id,
+        isRedirect: 'business',
+        business: {
+          store: slug
+        }
 			})
     }
+    const clickedBanner = pageBannerState.result.find(banner => banner.id === item?.banner_id)
+    events.emit('promotion_clicked', clickedBanner)
   }
 
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
-        onPress={() => handleGoToPage(item.action)}
+        activeOpacity={1}
+        onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
           <FastImage
@@ -80,6 +91,24 @@ const PageBannerUI = (props: any) => {
     )
   }
 
+  const updateIndex = () => {
+    setCurrentIndex(carouselRef?.current?.currentIndex)
+  }
+
+  useEffect(() => {
+    if (pageBannerState.loading) return
+    if (pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0) {
+      const bannerId = pageBannerState.banner.items[currentIndex]?.banner_id
+      if (pageBannerState.result && bannerId) {
+        const _viewedBanner = pageBannerState.result.find(banner => banner.id === bannerId)
+        if (_viewedBanner?.id !== viewedBanner?.id) {
+          setViewedBanner(_viewedBanner)
+          events.emit('promotion_viewed', _viewedBanner)
+        }
+      }
+    }
+  }, [pageBannerState.loading, currentIndex, viewedBanner])
+
   return (
     <>
       {pageBannerState.loading ? (
@@ -97,37 +126,44 @@ const PageBannerUI = (props: any) => {
         <>
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
-              <TouchableOpacity
-                style={[styles.swiperButton, { left: 25 }]}
-                onPress={() => carouselRef.current.snapToPrev()}
-              >
-                <IconAntDesign
-                  name="caretleft"
-                  color={theme.colors.white}
-                  size={13}
-                />
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={[styles.swiperButton, { right: 25 }]}
-                onPress={() => carouselRef.current.snapToNext()}
-              >
-                <IconAntDesign
-                  name="caretright"
-                  color={theme.colors.white}
-                  size={13}
-                />
-              </TouchableOpacity>
+              {pageBannerState.banner?.items.length > 1 && (
+                <>
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    style={[styles.swiperButton, { left: 25 }]}
+                    onPress={() => carouselRef.current.snapToPrev()}
+                  >
+                    <IconAntDesign
+                      name="caretleft"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    style={[styles.swiperButton, { right: 25 }]}
+                    onPress={() => carouselRef.current.snapToNext()}
+                  >
+                    <IconAntDesign
+                      name="caretright"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                </>
+              )}
               <Carousel
                 ref={carouselRef}
                 loop={pageBannerState.banner?.items.length > 1}
                 data={pageBannerState.banner?.items}
                 renderItem={renderItem}
-                sliderWidth={windowWidth - 80}
-                itemWidth={windowWidth - 80}
+                sliderWidth={windowWidth}
+                itemWidth={windowWidth}
                 inactiveSlideScale={1}
                 pagingEnabled
                 removeClippedSubviews={false}
                 inactiveSlideOpacity={1}
+                onSnapToItem={updateIndex}
               />
             </PageBannerWrapper>
           )}

package/themes/original/src/components/PageBanner/styles.tsx

@@ -1,10 +1,7 @@
 import styled from 'styled-components/native'
 
 export const PageBannerWrapper = styled.View`
-  margin-horizontal: 40px;
-  border-radius: 8px;
   overflow: hidden;
-  margin-vertical: 30px;
   position: relative;
   flex-direction: row;
   align-items: center;

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

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { View, Modal, TouchableOpacity, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
+import { OButton, OIcon, OInput, OModal, OText } from '../shared'
+import { PaymentOptionStripe, useLanguage, useSession } from 'ordering-components/native'
+import { StripeCardsListUI } from '../StripeCardsList'
+import { useTheme } from 'styled-components/native';
+import { CreditCardInput } from "react-native-credit-card-input-plus";
+import Alert from '../../providers/AlertProvider'
+
+const PaymentOptionCardUI = (props: any) => {
+    const {
+        cardSelected,
+        deleteCard,
+        onSelectCard,
+        handleCardClick,
+        cardsList,
+        addCardOpen,
+        setAddCardOpen,
+        gateway,
+        handleNewCard,
+        paymethodsWithoutSaveCards
+    } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+    const [{ token }] = useSession()
+    const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string> }>({ open: false, content: [] })
+    const [newCard, setNewCard] = useState<any>(null)
+
+    const onChangeCardForm = (values : any) => {
+        if (values?.valid) {
+            const expiry = values?.values?.expiry?.split('/')
+            const expiryMonth = expiry[0]
+            const expiryYear = expiry[1]
+            const expiryString = expiryMonth + expiryYear
+            let lastFourDigits = values?.values?.number?.substr(-4);
+            setNewCard({
+                name: values?.values.name,
+                number: values?.values.number.replace(/\s/g, ''),
+                cvc: values?.values.cvc,
+                expiryMonth: expiryMonth,
+                expiryYear: expiryYear,
+                expiry: expiry,
+                brand: values?.values?.type,
+                last4: lastFourDigits,
+                expiryString: expiryString
+            })
+        }
+    }
+
+    const handleAddNewCard = () => {
+        handleNewCard(newCard)
+        setAddCardOpen({ ...addCardOpen, card: false })
+        setNewCard(null)
+    }
+
+    useEffect(() => {
+        if (cardsList.error && !cardsList.loading) {
+            setAlertState({
+                open: true,
+                content: cardsList.error
+            })
+        }
+    }, [JSON.stringify(cardsList)])
+
+    const style = StyleSheet.create({
+        wrapperIcon: {
+            marginLeft: 25,
+            marginTop: Platform.OS === 'ios' ? 40 : 12,
+            marginBottom: 20,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        buttonStyle: {
+            marginVertical: 20,
+            borderRadius: 7.6,
+            shadowOpacity: 0,
+            height: 44,
+            borderWidth: 1
+        }
+    })
+
+    return (
+        <View>
+            <>
+                {token && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && (
+                    <OButton
+                        text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+                        bgColor={theme.colors.white}
+                        borderColor={theme.colors.primary}
+                        style={{
+                            marginVertical: 20,
+                            borderRadius: 7.6,
+                            shadowOpacity: 0,
+                            height: 44,
+                            borderWidth: 1
+                        }}
+                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                        imgRightSrc={null}
+                        onClick={() => setAddCardOpen({ ...addCardOpen, card: true })}
+                    />
+                )}
+                <StripeCardsListUI
+                    cardSelected={cardSelected}
+                    deleteCard={deleteCard}
+                    onSelectCard={onSelectCard}
+                    handleCardClick={handleCardClick}
+                    cardsList={cardsList}
+                    noShowErrors
+                    gateway={gateway}
+                />
+            </>
+            <Modal
+                animationType="slide"
+                visible={addCardOpen?.card}
+                onDismiss={() => setAddCardOpen({ ...addCardOpen, card: false })}
+            >
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={{
+                        flex: 1,
+                    }}
+                >
+                    <ScrollView>
+                        <TouchableOpacity onPress={() => setAddCardOpen({ ...addCardOpen, card: false })}>
+                            <OIcon
+                                src={theme.images.general.close}
+                                width={16}
+                                style={style.wrapperIcon}
+                            />
+                        </TouchableOpacity>
+                        <>
+                            <CreditCardInput
+                                onChange={onChangeCardForm}
+                                requiresName
+                            />
+                            {alertState?.content?.[0] && !cardsList?.loading && (
+                                <OText
+                                    color={theme?.colors?.error}
+                                    style={{
+                                        alignSelf: 'center'
+                                    }}
+                                    size={20}
+                                >
+                                    {alertState.content[0]}
+                                </OText>
+                            )}
+                            <OButton
+                                text={t('ADD_CARD', 'Add card')}
+                                isDisabled={!newCard || cardsList?.loading}
+                                isLoading={cardsList?.loading}
+                                onClick={() => handleAddNewCard()}
+                                style={{
+                                    margin: 20,
+                                    ...style.buttonStyle
+                                }}
+                            />
+                        </>
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            </Modal>
+            <Alert
+                open={alertState?.open || false}
+                title=''
+                content={alertState.content}
+                onClose={() => setAlertState({ open: false, content: [] })}
+                onAccept={() => setAlertState({ open: false, content: [] })}
+            />
+        </View>
+    )
+}
+
+export const PaymentOptionCard = (props : any) => {
+    const paymentOptions = {
+        ...props,
+        UIComponent: PaymentOptionCardUI
+    }
+    return (
+        <PaymentOptionStripe {...paymentOptions} />
+    )
+}

package/themes/original/src/components/PaymentOptionStripe/styles.tsx

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-        (
-          <>
-            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-              <Container
-                key={wallet.id}
-                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-                onPress={() => handleOnChange(idx, wallet)}
-                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-              >
-                <SectionLeft>
-                  {checkedState[idx] ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={25}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={25}
-                      color={theme.colors.disabled}
-                    />
-                  )}
-                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                    <View>
-                      <OText
-                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
-                          color: theme.colors.disabled
-                        } : {}}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </OText>
-                    </View>
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+            >
+              <SectionLeft>
+                {checkedState[idx] ? (
+                  <MaterialCommunityIcons
+                    name="checkbox-marked"
+                    size={25}
+                    color={theme.colors.primary}
+                  />
+                ) : (
+                  <MaterialCommunityIcons
+                    name="checkbox-blank-outline"
+                    size={25}
+                    color={theme.colors.disabled}
+                  />
+                )}
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
                   </View>
-                </SectionLeft>
-
-                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
-                  {wallet.type === 'cash' && (
-                    <OText>
-                      {parsePrice(wallet?.balance, { isTruncable: true })}
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
                     </OText>
-                  )}
-                  {wallet.type === 'credit_point' && (
                     <OText>
-                      <OText color={theme.colors.primary} weight='bold'>
-                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                      </OText>
-                      <OText>
-                        {wallet?.balance > 0
-                          ? creditBalance(wallet)
-                          : null}
-                      </OText>
+                      {wallet?.balance > 0
+                        ? creditBalance(wallet)
+                        : null}
                     </OText>
-                  )}
-                </View>
-              </Container>
-            ))}
-          </>
-        )}
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
 
       {walletsState?.loading && (
         <View>