ordering-ui-react-native 0.21.4 → 0.21.5-release

package/src/pages/BusinessesListing.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect } from 'react'
-import { BusinessesListing as BusinessListingController } from '../components/BusinessesListing'
-import styled from 'styled-components/native'
-import { useTheme } from 'styled-components/native'
-
-const BusinessesListing = (props: any) => {
-  const theme = useTheme()
-  const businessId = props.route.params?.businessId
-  const categoryId = props.route.params?.categoryId
-  const productId = props.route.params?.productId
-  const store = props.route.params?.store
-
-  useEffect(() => {
-    if (store) {
-      props.navigation.navigate('Business', { store, businessId, categoryId, productId })
-      return
-    }
-  }, [businessId, categoryId, productId, store])
-
-  const BusinessesListingProps = {
-    ...props,
-    navigation: props?.navigation,
-    isSearchByName: true,
-    isSearchByDescription: true,
-    propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
-    onBusinessClick: (business: any) => {
-      props.navigation.navigate('Business', { store: store || business.slug, header: business.header, logo: business.logo })
-    }
-  }
-
-  const BusinessListView = styled.SafeAreaView`
-    flex: 1;
-    background-color: ${theme.colors.backgroundPage};
-  `
-
-  return (
-    <BusinessListView>
-      <BusinessListingController {...BusinessesListingProps} />
-    </BusinessListView>
-  )
-}
-
-export default BusinessesListing

package/src/pages/CartList.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { useFocusEffect } from '@react-navigation/native'
-import styled from 'styled-components/native';
-import { useOrder } from 'ordering-components/native';
-import { Platform } from 'react-native';
-import { CartContent } from '../components/CartContent';
-import { Container } from '../layouts/Container'
-
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex-grow: 1;
-`;
-
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const CartList = (props: Props) => {
-  const [{ carts }, { refreshOrderOptions }] = useOrder();
-  const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || []
-
-  useFocusEffect(
-    React.useCallback(() => {
-      refreshOrderOptions()
-    }, [props.navigation])
-  )
-
-  const cartProps = {
-    ...props,
-    carts: cartsList,
-    isOrderStateCarts: !!carts,
-    onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params)
-  }
-
-  return (
-    <>
-      <KeyboardView
-        enabled
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      >
-        <Container>
-          <CartContent {...cartProps} />
-        </Container>
-      </KeyboardView>
-    </>
-  );
-};
-
-export default CartList;

package/src/pages/Checkout.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import { Checkout } from '../components/Checkout';
-
-import { initStripe, useConfirmPayment  } from '@stripe/stripe-react-native';
-import styled from 'styled-components/native';
-
-import { useOrder, useLanguage, ToastType, useToast } from 'ordering-components/native';
-
-const stripePaymentOptions = ['stripe', 'stripe_direct', 'stripe_connect', 'google_pay', 'apple_pay'];
-
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex: 1;
-`;
-
-export const CheckoutPage = (props: any) => {
-  const [, { showToast }] = useToast();
-  const [, t] = useLanguage();
-  const [orderState, { confirmCart, changeMoment }] = useOrder();
-  const { confirmPayment, loading: confirmPaymentLoading } = useConfirmPayment();
-  const checkoutProps = {
-    ...props,
-    cartUuid: props?.cartUuid || props.route?.params?.cartUuid,
-    businessLogo: props.route?.params?.businessLogo,
-    businessName: props.route?.params?.businessName,
-    cartTotal: props.route?.params?.cartTotal,
-    stripePaymentOptions,
-    onPlaceOrderClick: async (data: any, paymethod: any, cart: any) => {
-      if (cart?.order?.uuid) {
-        if (orderState?.options?.moment) {
-          changeMoment(null);
-        }
-        props.navigation.navigate('OrderDetails', { orderId: cart.order?.uuid, isFromCheckout: true });
-        return
-      }
-
-      if (cart?.status === 2 && stripePaymentOptions.includes(paymethod?.gateway)) {
-        const clientSecret = cart?.paymethod_data?.result?.client_secret;
-        const paymentMethodId = paymethod?.gateway === 'stripe_connect'
-          ? cart.paymethod_data?.result?.payment_method_id
-          : cart.paymethod_data?.data?.source_id
-        const stripeAccountId = paymethod?.paymethod?.credentials?.user;
-        const publicKey = paymethod?.paymethod?.credentials?.publishable;
-
-        try {
-          const stripeParams = stripeAccountId
-            ? { publishableKey: publicKey, stripeAccountId: stripeAccountId}
-            : { publishableKey: publicKey };
-          initStripe(stripeParams);
-        } catch (error: any) {
-          showToast(ToastType.Error, error?.toString() || error.message)
-        }
-
-        try {
-          const { paymentIntent, error } = await confirmPayment(clientSecret, {
-            type: 'Card',
-            paymentMethodId
-          });
-
-          if (error) {
-            showToast(ToastType.Error, error.message)
-          }
-
-          props.handleIsRedirect && props.handleIsRedirect(true);
-          try {
-            const confirmCartRes = await confirmCart(cart?.uuid)
-            if (confirmCartRes.error) {
-              showToast(ToastType.Error, confirmCartRes.error.message)
-            }
-            if (confirmCartRes.result.order?.uuid) {
-              props.navigation.navigate('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
-              return
-            }
-          } catch (error: any) {
-            showToast(ToastType.Error, error?.toString() || error.message)
-          }
-          return
-        } catch (error: any) {
-          const e = error?.message?.toLowerCase() === 'failed'
-            ? t('FAILED_PAYMENT', 'The payment has failed')
-            : error?.toString() || error.message
-          showToast(ToastType.Error, e)
-        }
-      }
-    },
-    onNavigationRedirect: (page: string, params: any) => {
-      if (!page) return
-      props.navigation.navigate(page, params);
-    }
-  }
-  return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <Checkout {...checkoutProps} />
-    </KeyboardView>
-  )
-}
-
-export default CheckoutPage;

package/src/pages/ForgotPassword.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import styled from 'styled-components/native';
-import { ForgotPasswordForm } from '../components/ForgotPasswordForm';
-import { Container } from '../layouts/Container';
-
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex: 1;
-`;
-
-export const ForgotPassword = (props: any) => {
-  return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <Container>
-        <ForgotPasswordForm {...props} />
-      </Container>
-    </KeyboardView>
-  )
-}
-
-export default ForgotPassword;

package/src/pages/Help.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Container } from '../layouts/Container'
-import { Help as HelpController } from '../components/Help'
-
-
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const Help = (props: Props) => {
-  const helpProps = {
-    ...props
-  }
-
-  return (
-    <Container>
-      <HelpController {...helpProps} />
-    </Container>
-  )
-}
-
-export default Help

package/src/pages/HelpAccountAndPayment.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Container } from '../layouts/Container'
-import { HelpAccountAndPayment as HelpAccountAndPaymentController } from '../components/HelpAccountAndPayment'
-
-
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const HelpAccountAndPayment = (props: Props) => {
-  const helpAccountAndPaymentProps = {
-    ...props
-  }
-
-  return (
-    <Container>
-      <HelpAccountAndPaymentController {...helpAccountAndPaymentProps} />
-    </Container>
-  )
-}
-
-export default HelpAccountAndPayment

package/src/pages/HelpGuide.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Container } from '../layouts/Container'
-import { HelpGuide as HelpGuideController } from '../components/HelpGuide'
-
-
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const HelpGuide = (props: Props) => {
-  const helpGuideProps = {
-    ...props
-  }
-
-  return (
-    <Container>
-      <HelpGuideController {...helpGuideProps} />
-    </Container>
-  )
-}
-
-export default HelpGuide

package/src/pages/HelpOrder.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Container } from '../layouts/Container'
-import { HelpOrder as HelpOrderController } from '../components/HelpOrder'
-
-
-interface Props {
-  navigation: any;
-  route: any;
-}
-
-const HelpOrder = (props: Props) => {
-  const helpOrderProps = {
-    ...props
-  }
-
-  return (
-    <Container>
-      <HelpOrderController {...helpOrderProps} />
-    </Container>
-  )
-}
-
-export default HelpOrder

package/src/pages/Home.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { StyleSheet, SafeAreaView } from 'react-native';
-import { Home as HomePage } from '../components/Home';
-import { useTheme } from 'styled-components/native';
-
-export const Home = (props: any) => {
-  const theme = useTheme();
-
-  const homeProps = {
-    ...props,
-    onNavigationRedirect: (page: string, params: any) => {
-      if (!page) return
-      props.navigation.navigate(page, params);
-    },
-  }
-
-  const styles = StyleSheet.create({
-    wrapper: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100%',
-      backgroundColor: theme.colors.backgroundPage,
-    }
-  })
-
-  return (
-    <SafeAreaView style={styles.wrapper}>
-      <HomePage {...homeProps} />
-    </SafeAreaView>
-  );
-};
-
-export default Home;

package/src/pages/IntroductoryTutorial.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import {View, Text, Image, StyleSheet, StatusBar} from 'react-native';
-import AppIntroSlider from 'react-native-app-intro-slider';
-import { _setStoreData } from '../providers/StoreUtil';
-import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
-
-
-const IntroductoryTutorial = ({ navigation, route }: any)  => {
-  const [, t] = useLanguage();
-  const theme = useTheme()
-  const setTutorial = route?.params?.setTutorial
-  const data = [
-    {
-      title: t('DELIVERY_BY_ADDRESS', 'Delivery by Address'),
-      text: t('DELIVERY_BY_ADDRESS_INST', 'DELIVERY_BY_ADDRESS_INST'),
-      image: theme.images.tutorials.slide1,
-      bg: theme.colors.primaryContrast
-    },
-    {
-      title: t('SELECT_A_BUSINESS', 'SELECT_A_BUSINESS'),
-      text: t('SELECT_A_BUSINESS_INST', 'SELECT_A_BUSINESS_INST'),
-      image: theme.images.tutorials.slide2,
-      bg: theme.colors.primaryContrast
-    },
-    {
-      title: t('BUSINESS_MENU', 'BUSINESS_MENU'),
-      text: t('BUSINESS_MENU_INST', 'BUSINESS_MENU_INST'),
-      image: theme.images.tutorials.slide3,
-      bg: theme.colors.primaryContrast
-    },
-    {
-      title: t('PRODUCT_LIST', 'PRODUCT_LIST'),
-      text: t('PRODUCT_LIST_INST', 'PRODUCT_LIST_INST'),
-      image: theme.images.tutorials.slide4,
-      bg: theme.colors.primaryContrast
-    },
-    {
-      title: t('CHECKOUT_SCREEN', 'CHECKOUT_SCREEN'),
-      text: t('CHECKOUT_SCREEN_INST', 'CHECKOUT_SCREEN_INST'),
-      image: theme.images.tutorials.slide5,
-      bg: theme.colors.primaryContrast
-    },
-    {
-      title: t('TUTORIAL_ORDER_COMPLETED', 'TUTORIAL_ORDER_COMPLETED'),
-      text: t('TUTORIAL_ORDER_COMPLETED_INST', 'TUTORIAL_ORDER_COMPLETED_INST'),
-      image: theme.images.tutorials.slide6,
-      bg: theme.colors.primaryContrast
-    },
-  ];
-  type Item = typeof data[0];
-  const styles = StyleSheet.create({
-    slide: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingBottom: 80,
-    },
-    image: {
-      flex: 0,
-      top: 30,
-      width: '100%',
-      height: '75%',
-      resizeMode: 'contain',
-    },
-    text: {
-      color: theme.colors.colorTextTutorial,
-      textAlign: 'center',
-      fontSize: 17,
-      paddingRight: '2%',
-      paddingLeft: '2%',
-      top: '4%',
-    },
-    title: {
-      top: '2%',
-      fontSize: 25,
-      color: theme.colors.colorTextTutorial,
-      textAlign: 'center',
-    },
-    buttonCircle: {
-      top: '15%',
-      width: 50,
-      height: 40,
-      justifyContent: 'center',
-      alignItems: 'center',
-      position:'relative'
-    },
-    tutorialText: {
-      fontSize: 18,
-      fontWeight: '300',
-      color: theme.colors.primary
-    }
-  });
-  
-  const _renderItem = ({item}: {item: Item}) => {
-    return (
-      <View
-        style={[
-          styles.slide,
-          { 
-            backgroundColor: item.bg,
-          },
-        ]}>
-        <Text style={styles.title}>{item.title}</Text>
-        <Text style={styles.text}>{item.text}</Text>
-        <Image source={item.image} style={styles.image} />
-      </View>
-    );
-  };
-
-  const RenderNextButton = () => {
-    return (
-      <View style={styles.buttonCircle}>
-        <Text style={styles.tutorialText}>{t('TUTORIAL_NEXT', 'Next')}</Text>
-      </View>
-    );
-  };
-
-  const RenderSkipButton = () => {
-    return (
-      <View style={styles.buttonCircle}>
-        <Text style={styles.tutorialText}>{t('TUTORIAL_SKIP', 'Skip')}</Text>
-      </View>
-    );
-  };
-
-  const RenderPrevButton = () => {
-    return (
-      <View style={styles.buttonCircle}>
-        <Text style={styles.tutorialText}>{t('TUTORIAL_BACK', 'Back')}</Text>
-      </View>
-    );
-  };
-
-  const RenderDoneButton = () => {
-    return (
-      <View style={styles.buttonCircle}>
-        <Text style={styles.tutorialText}>{t('TUTORIAL_DONE', 'Done')}</Text>
-      </View>
-    );
-  }
-
-  const _onDone = () => {
-    setTutorial(false)
-    _setStoreData('isTutorial', false)
-  }
-
-  const _keyExtractor = (item: Item) => item.title;
-
-    return (
-      <View style={{flex: 1}}>
-        <StatusBar translucent backgroundColor="transparent" />
-        <AppIntroSlider
-          keyExtractor={_keyExtractor}
-          renderItem={_renderItem}
-          data={data}
-          onDone={_onDone}
-          activeDotStyle= {{backgroundColor: theme.colors.primary}}
-          renderDoneButton={RenderDoneButton}
-          renderNextButton={RenderNextButton}
-          renderSkipButton={RenderSkipButton}
-          renderPrevButton={RenderPrevButton}
-          showSkipButton
-          showPrevButton
-        />
-      </View>
-    );
-  
-}
-export default IntroductoryTutorial;

package/src/pages/Login.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import styled from 'styled-components/native';
-import { LoginForm } from '../components/LoginForm';
-import { Container } from '../layouts/Container';
-
-import { useLanguage } from 'ordering-components/native';
-import { _setStoreData } from '../providers/StoreUtil';
-import { useTheme } from 'styled-components/native';
-
-const KeyboardView = styled.KeyboardAvoidingView`
-  flex: 1;
-`;
-
-export const Login = ({ navigation, route }: any) => {
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const loginProps = {
-    navigation,
-    useLoginByCellphone: true,
-    loginButtonText: t('LOGIN', 'Login'),
-    loginButtonBackground: theme.colors.primary,
-    forgotButtonText: t('FORGOT_YOUR_PASSWORD', 'Forgot your password?'),
-    registerButtonText: t('SIGNUP', 'Signup'),
-    onNavigationRedirect: (page: string) => {
-      if (!page) return
-      navigation.navigate(page);
-    },
-    notificationState: route?.params?.notification_state
-  }
-
-  _setStoreData('notification_state', route?.params?.notification_state);
-
-  return (
-    <KeyboardView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <Container>
-        <LoginForm {...loginProps} />
-      </Container>
-    </KeyboardView>
-  );
-};
-
-export default Login;

package/src/pages/MomentOption.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { useConfig } from 'ordering-components/native'
-import { MomentOption as MomentOptionController } from '../components/MomentOption'
-
-const MomentOption = ({ navigation, props }: any) => {
-  const [{ configs }] = useConfig()
-  const limitDays = configs?.max_days_preorder?.value
-  const currentDate = new Date()
-  const time = limitDays > 1
-  ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
-  : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
-
-  currentDate.setTime(time)
-  currentDate.setHours(23)
-  currentDate.setMinutes(59)
-  const momentOptionProps = {
-    ...props,
-    navigation: navigation,
-    maxDate: currentDate
-  }
-  return (
-    <>
-      {currentDate && (
-        <MomentOptionController {...momentOptionProps} />
-      )}
-    </>
-  )
-}
-
-export default MomentOption

package/src/pages/MultiCheckout.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import { Platform, KeyboardAvoidingView, StyleSheet } from 'react-native'
-import { MultiCheckout as MultiCheckoutController } from '../../themes/original/src/components/MultiCheckout'
-
-const MultiCheckout = (props: any) => {
-  const multiCheckoutProps = {
-    ...props,
-    onPlaceOrderClick: (orderUuids: any) => {
-      props.navigation.navigate('MultiOrdersDetails', { orderUuids: orderUuids, isFromMultiCheckout: true })
-    }
-  }
-
-  return (
-    <KeyboardAvoidingView
-      enabled
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.container}
-    >
-      <MultiCheckoutController {...multiCheckoutProps} />
-    </KeyboardAvoidingView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    paddingBottom: 70,
-  },
-});
-
-export default MultiCheckout

package/src/pages/MultiOrdersDetails.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../themes/original/src/components/MultiOrdersDetails'
-import styled from 'styled-components/native';
-
-const SafeAreaContainer = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-  padding-top: ${Platform.OS === 'ios' ? '0px' : '24px'};
-`;
-
-const MultiOrdersDetails = ({ navigation, route }: any) => {
-  const multiOrdersDetailsProps = {
-    navigation,
-    orderUuids: route.params?.orderUuids || [],
-    isFromMultiCheckout: route.params?.isFromMultiCheckout,
-    onRedirectPage: () => navigation.navigate('BusinessList')
-  }
-
-  return (
-    <SafeAreaContainer>
-      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
-    </SafeAreaContainer>
-  )
-}
-
-export default MultiOrdersDetails