ordering-ui-react-native 0.15.11 → 0.15.13-release

package/src/components/StripeElementsForm/index.tsx

@@ -7,11 +7,10 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-import configs from '../../config.json'
+
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
-import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -23,10 +22,6 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
-    methodsPay,
-    paymethod,
-    onCancel,
-    cart
   } = props;
 
   const theme = useTheme();
@@ -126,49 +121,33 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider 
-            publishableKey={publicKey}
-            merchantIdentifier={`merchant.${configs.apple_app_id}`}
-          >
-            {methodsPay?.includes(paymethod) ? (
-              <StripeMethodForm 
-                handleSource={handleSource}
-                onCancel={onCancel}
-                cart={cart}
-                setErrors={setErrors}
-                paymethod={paymethod}
-                devMode={publicKey?.includes('test')}
-              />
-            ) : (
-              <CardField
-                postalCodeEnabled={true}
-                cardStyle={{
-                  backgroundColor: '#FFFFFF',
-                  textColor: '#000000',
-                }}
-                style={{
-                  width: '100%',
-                  height: 50,
-                  marginVertical: 30,
-                  zIndex: 9999,
-                }}
-                onCardChange={(cardDetails: any) => setCard(cardDetails)}
-              />
-            )}
-          </StripeProvider>
-          {!methodsPay?.includes(paymethod) && (
-            <OButton
-              text={t('SAVE_CARD', 'Save card')}
-              bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-              borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
-              style={styles.btnAddStyle}
-              textStyle={{color: 'white'}}
-              imgRightSrc={null}
-              onClick={() => handleSaveCard()}
-              isDisabled={!isCompleted}
-              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+          <StripeProvider publishableKey={publicKey}>
+            <CardField
+              postalCodeEnabled={true}
+              cardStyle={{
+                backgroundColor: '#FFFFFF',
+                textColor: '#000000',
+              }}
+              style={{
+                width: '100%',
+                height: 50,
+                marginVertical: 30,
+                zIndex: 9999,
+              }}
+              onCardChange={(cardDetails: any) => setCard(cardDetails)}
             />
-          )}
+          </StripeProvider>
+          <OButton
+            text={t('SAVE_CARD', 'Save card')}
+            bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+            borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
+            style={styles.btnAddStyle}
+            textStyle={{color: 'white'}}
+            imgRightSrc={null}
+            onClick={() => handleSaveCard()}
+            isDisabled={!isCompleted}
+            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+          />
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/config.json

@@ -3,8 +3,6 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
-  "apple_app_id": "com.delivery",
-  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/navigators/HomeNavigator.tsx

@@ -20,6 +20,7 @@ import Help from '../pages/Help'
 import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
+import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
 const Stack = createStackNavigator();
@@ -164,6 +165,11 @@ const HomeNavigator = (e : any) => {
                     component={HelpAccountAndPayment}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="Sessions"
+                    component={Sessions}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/BusinessProductsList.tsx

@@ -31,6 +31,7 @@ const BusinessProductsList = (props: any) => {
       'open',
       'about',
       'description',
+      'ribbon',
       'address',
       'location',
       'schedule',

package/src/pages/BusinessesListing.tsx

@@ -21,7 +21,7 @@ const BusinessesListing = (props: any) => {
     ...props,
     isSearchByName: true,
     isSearchByDescription: true,
-    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
+    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 })
     }

package/src/pages/Checkout.tsx

@@ -7,7 +7,7 @@ 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 stripePaymentOptions = ['stripe', 'stripe_direct', 'stripe_connect'];
 
 const KeyboardView = styled.KeyboardAvoidingView`
   flex: 1;

package/src/pages/Sessions.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Container } from '../../themes/original/src/layouts/Container'
+import { Sessions as SessionsController } from '../../themes/original/src/components/Sessions'
+
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const Sessions = (props: Props) => {
+  const sessionsProps = {
+    ...props
+  }
+
+  return (
+    <Container>
+      <SessionsController {...sessionsProps} />
+    </Container>
+  )
+}
+
+export default Sessions

package/src/types/index.tsx

@@ -287,6 +287,7 @@ export interface OrderDetailsParams {
   isFromRoot?: any;
   goToBusinessList?: any;
   onNavigationRedirect?: any;
+  getOrder?: () => {}
 }
 export interface ProductItemAccordionParams {
   key?: any;
@@ -474,12 +475,3 @@ export interface HelpGuideParams {
 export interface HelpAccountAndPaymentParams {
   navigation: any;
 }
-
-export interface StripeMethodFormParams {
-  cart: any;
-  handleSource: ({id, card} : {id : string, card : any}) => void;
-  onCancel: () => void;
-  setErrors: (error: string) => void;
-  paymethod: string;
-  devMode?: boolean;
-}

package/themes/business/index.tsx

@@ -16,6 +16,7 @@ import { OrderMessage } from './src/components/OrderMessage';
 import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
 import { OrderDetailsDelivery } from './src/components/OrderDetails/Delivery';
 import { OrdersOption } from './src/components/OrdersOption';
+import { OrdersListManager } from './src/components/OrdersListManager';
 import { OrdersOptionStatus } from './src/components/OrdersOptionStatus';
 import { OrdersOptionBusiness } from './src/components/OrdersOptionBusiness';
 import { OrdersOptionCity } from './src/components/OrdersOptionCity';
@@ -84,6 +85,7 @@ export {
   OrderDetailsDelivery,
   OrderMessage,
   OrdersOption,
+  OrdersListManager,
   OrdersOptionStatus,
   OrdersOptionBusiness,
   OrdersOptionCity,

package/themes/business/src/components/Chat/index.tsx

@@ -272,9 +272,10 @@ const ChatUI = (props: MessagesParams) => {
     launchImageLibrary(
       {
         mediaType: 'photo',
-        maxHeight: 300,
-        maxWidth: 300,
+        maxHeight: 2048,
+        maxWidth: 2048,
         includeBase64: true,
+        quality: 1
       },
       (response: any) => {
         if (response.didCancel) {

package/themes/business/src/components/Home/index.tsx

@@ -1,18 +1,66 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, Dimensions, Platform } from 'react-native';
-import { useLanguage } from 'ordering-components/native';
+import { useForm, Controller } from 'react-hook-form';
+import { useLanguage, useApi } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { LogoWrapper, Container, BackgroundImage } from './styles';
-import { OButton, OIcon, OText } from '../shared';
+import { LogoWrapper, Container, BackgroundImage, FormInput } from './styles';
+import { OButton, OIcon, OText, OInput } from '../shared';
 import { _setStoreData } from '../../providers/StoreUtil';
 
 export const Home = (props: any) => {
-  const { onNavigationRedirect } = props;
+  const { onNavigationRedirect, useRootPoint } = props;
   const safeHeight = Platform.OS === 'ios' ? 80 : 40;
 
   const theme = useTheme();
+  const [ordering, { setOrdering }] = useApi();
   const [, t] = useLanguage();
+  const { control, handleSubmit, errors } = useForm();
 
+
+  const styles = StyleSheet.create({
+    logo: {
+      height: 65,
+      width: 300,
+    },
+    wrapperContent: {
+      width: '100%',
+    },
+    wrapperText: {
+      marginBottom: 20,
+    },
+    textTitle: {
+      fontWeight: '600',
+      fontStyle: 'normal',
+      fontSize: 50,
+    },
+    textSubtitle: {
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontSize: 14,
+    },
+    wrapperBtn: {
+      marginBottom: 20
+    },
+    btn: {
+      borderRadius: 7.6,
+      marginTop: 20,
+    },
+    btnText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    input: {
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: Object.keys(errors).length > 0 ? theme.colors.error : theme.colors.inputSignup,
+      backgroundColor: theme.colors.transparent,
+    },
+  });
+
+  const [projectName, setProjectName] = useState<any>(null)
+  const [isLoadingProject, setLoadingProject] = useState(false)
   const [orientation, setOrientation] = useState(
     Dimensions.get('window').width < Dimensions.get('window').height
       ? 'Portrait'
@@ -34,6 +82,27 @@ export const Home = (props: any) => {
     }
   });
 
+  const onSubmit = (values: any) => {
+    setLoadingProject(true)
+    setProjectName(values)
+    setOrdering({ ...ordering, project: values?.project_name })
+    _setStoreData('project_name', values?.project_name)
+  };
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setProjectName(null)
+      setLoadingProject(false)
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (ordering?.project === projectName?.project_name) {
+      setLoadingProject(false)
+      onNavigationRedirect('Login')
+    }
+  }, [ordering])
+
   return (
     <Container height={windowHeight - safeHeight} orientation={orientation}>
       <BackgroundImage
@@ -54,58 +123,62 @@ export const Home = (props: any) => {
             </OText>
           </View>
 
-          <View style={styles.wrapperBtn}>
-            <OButton
-              text={t('LOGIN', 'Login')}
-              textStyle={{
-                ...styles.btnText,
-                color: theme.colors.inputTextColor,
-              }}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-              style={styles.btn}
-              imgRightSrc={false}
-              onClick={() => onNavigationRedirect('Login')}
-            />
-          </View>
+          <>
+            {useRootPoint && (
+              <FormInput>
+                <Controller
+                  control={control}
+                  name='project_name'
+                  rules={{ required: t(`VALIDATION_ERROR_PROJECT_NAME_REQUIRED`, 'The field project name is required') }}
+                  defaultValue=""
+                  render={({ onChange, value }: any) => (
+                    <OInput
+                      name='project_name'
+                      placeholderTextColor={theme.colors.arrowColor}
+                      placeholder={t('PROJECT_NAME', 'Project Name')}
+                      icon={theme.images.general.project}
+                      iconColor={theme.colors.arrowColor}
+                      onChange={(e: any) => onChange(e?.target?.value)}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.white}
+                      value={value}
+                      style={styles.input}
+                      returnKeyType='done'
+                      autoCorrect={false}
+                      autoCapitalize='none'
+                      blurOnSubmit={false}
+                      onSubmitEditing={() => handleSubmit(onSubmit)()}
+                    />
+                  )}
+                />
+              </FormInput>
+            )}
+            {Object.keys(errors).length > 0 && (
+              <OText
+                color={theme.colors.white}
+                style={{ alignSelf: 'center', marginTop: 5 }}
+              >
+                {errors['project_name'].message}
+              </OText>
+            )}
+            <View style={styles.wrapperBtn}>
+              <OButton
+                text={useRootPoint ? t('SET_PROJECT', 'Set project') : t('LOGIN', 'Login')}
+                textStyle={{
+                  ...styles.btnText,
+                  color: theme.colors.inputTextColor,
+                }}
+                bgColor={theme.colors.primary}
+                borderColor={theme.colors.primary}
+                isLoading={isLoadingProject}
+                style={styles.btn}
+                imgRightSrc={false}
+                onClick={() => useRootPoint ? handleSubmit(onSubmit)() : onNavigationRedirect('Login')}
+              />
+            </View>
+          </>
         </View>
       </BackgroundImage>
     </Container>
   );
 };
-
-const styles = StyleSheet.create({
-  logo: {
-    height: 65,
-    width: 300,
-  },
-  wrapperContent: {
-    width: '100%',
-  },
-  wrapperText: {
-    marginBottom: 20,
-  },
-  textTitle: {
-    fontWeight: '600',
-    fontStyle: 'normal',
-    fontSize: 50,
-  },
-  textSubtitle: {
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontSize: 14,
-  },
-  wrapperBtn: {
-    marginBottom: 20,
-  },
-  btn: {
-    borderRadius: 7.6,
-    marginTop: 20,
-  },
-  btnText: {
-    fontFamily: 'Poppins',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 18,
-  },
-});

package/themes/business/src/components/Home/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
@@ -25,3 +25,10 @@ export const BackgroundImage = styled.ImageBackground`
   align-items: center;
   padding: 20px 40px;
 `;
+
+export const FormInput = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 50px;
+`;