ordering-ui-react-native 0.15.21 → 0.15.23-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/UserProfileForm/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
+  UserFormDetails as UserProfileController,
   useSession,
   useLanguage,
 } from 'ordering-components/native';
@@ -13,6 +14,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
+  OAlert,
   OIcon,
   OText
 } from '../shared';
@@ -20,18 +22,24 @@ import {
   Container,
   Names,
   UserInfoContainer,
-  LanguageContainer
+  LanguageContainer,
+  RemoveAccountContainer
 } from './styles';
 
-export const UserProfileForm = (props: ProfileParams) => {
+export const UserProfileFormUI = (props: ProfileParams) => {
   const {
-    navigation
+    navigation,
+    handleRemoveAccount,
+    removeAccountState
   } = props;
 
   const theme = useTheme();
-  const [{ user }] = useSession();
+  const [{ user }, { logout }] = useSession();
   const [, t] = useLanguage();
 
+  const isAdmin = user?.level === 0
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
+
   const styles = StyleSheet.create({
     linkStyle: {
       color: theme.colors.primary,
@@ -44,6 +52,9 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     iconStyle: {
       fontSize: 24
+    },
+    removeAccount: {
+      flexDirection: 'row'
     }
   });
 
@@ -78,13 +89,31 @@ export const UserProfileForm = (props: ProfileParams) => {
     },
     chevronUp: {
       display: 'none'
-    }
+    },
   })
 
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
 
+  const onRemoveAccount = () => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_REMOVE_ACCOUNT', 'Are you sure that you want to remove your account?')],
+      title: t('ACCOUNT_ALERT', 'Account alert'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveAccount && handleRemoveAccount(user?.id)
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (removeAccountState?.result === 'OK') {
+      logout()
+    }
+  }, [removeAccountState])
+
   return (
     <Container>
       <View>
@@ -134,7 +163,35 @@ export const UserProfileForm = (props: ProfileParams) => {
           <LanguageSelector pickerStyle={_pickerStyle} />
         </LanguageContainer>
         <LogoutButton />
+        <RemoveAccountContainer>
+          <TouchableOpacity
+            disabled={isAdmin}
+            style={styles.removeAccount}
+            onPress={() => onRemoveAccount()}
+            activeOpacity={0.7}
+          >
+            <OIcon src={theme.images.general.user} width={20} color={theme.colors.black} style={{ marginEnd: 14 }} />
+            <OText size={14} weight={'400'} style={{ opacity: isAdmin ? 0.5 : 1, top: 1 }} color={theme.colors.red}>{t('REMOVE_ACCOUNT', 'Remove account')}</OText>
+          </TouchableOpacity>
+        </RemoveAccountContainer>
       </View>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
     </Container>
   );
 };
+
+export const UserProfileForm = (props: any) => {
+  const profileProps = {
+    ...props,
+    UIComponent: UserProfileFormUI,
+    useSessionUser: true
+  };
+  return <UserProfileController {...profileProps} />;
+};

package/src/components/UserProfileForm/styles.tsx

@@ -35,3 +35,11 @@ export const LanguageContainer = styled.View`
   align-items: center;
   margin-bottom: 10px;
 `
+
+export const RemoveAccountContainer = styled.View`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 15px;
+`

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

@@ -31,6 +31,8 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  handleRemoveAccount?: any,
+  removeAccountState?: any
 }
 
 export interface AddressListParams {
@@ -287,6 +289,7 @@ export interface OrderDetailsParams {
   isFromRoot?: any;
   goToBusinessList?: any;
   onNavigationRedirect?: any;
+  getOrder?: () => {}
 }
 export interface ProductItemAccordionParams {
   key?: any;
@@ -474,12 +477,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/src/utils/index.tsx

@@ -200,7 +200,7 @@ export const transformCountryCode = (countryCode : number) => {
  */
  export const reviewCommentList = (type: string) => {
   const [, t] = useLanguage()
-
+  // TODO: improve this function
   const reviews: any = {
     order: {
       1: {
@@ -386,3 +386,70 @@ export const transformCountryCode = (countryCode : number) => {
 
   return reviews[type]
 }
+
+/**
+ * function to manage order comment list
+ * @param {string} param0 type of orders to return
+ * @returns object with orders dictionary
+ */
+export const orderCommentList = (value: string) => {
+  const [, t] = useLanguage()
+  const dictionary: any = {
+    reject: 6,
+    forcePickUp: 9,
+    pickupFailed: 10,
+    forceDelivery: 11,
+    deliveryFailed: 12,
+    notReady: 14
+  }
+
+  const status = dictionary[value]
+
+  const messages: any = {
+    6: [// on reject order
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Unavailable driver',
+      'Other'
+    ],
+    9: [// on force pickup status
+      'I forgot to complete it in the location',
+      'I didn\'t have internet connection',
+      'Other'
+    ],
+    10: [// on pickup failed by driver
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Store closed',
+      'Unavailable driver',
+      'Other'
+    ],
+    11: [// on force delivery status
+      'I forgot to complete it in the location',
+      'I didn\'t have internet connection',
+      'Other'
+    ],
+    12: [// on delivery failed by driver
+      'Very far away',
+      'Driver/ vehicle incident',
+      'Destination unreachable',
+      'Recipient unavailable',
+      'Refused- incorrect/ missing items',
+      'Refused- damage',
+      'Other'
+    ],
+    14: [// on order not ready
+      'Store didn\'t receive the order on time',
+      'Store very busy',
+      'Other'
+    ]
+  }
+
+  if (!messages[status]) return null
+
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replace(/_/g, ' ')) }))
+
+  return { list }
+}

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/AcceptOrRejectOrder/index.tsx

@@ -9,12 +9,14 @@ import {
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage } from 'ordering-components/native';
-import { Content, Timer, TimeField, Header, Action, Comments } from './styles';
+import { Content, Timer, TimeField, Header, Action, Comments, CommentsButtonGroup } from './styles';
 import { FloatingButton } from '../FloatingButton';
 import { OText, OButton, OTextarea, OIconButton } from '../shared';
 import { AcceptOrRejectOrderParams } from '../../types';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { orderCommentList } from '../../../../../src/utils'
+
 export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const {
     customerCellphone,
@@ -39,15 +41,33 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [min, setMin] = useState('00');
   const [time, setTime] = useState('');
   const [comments, setComments] = useState('');
+  const [commentList, setCommentList] = useState<any>([]);
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const { top, bottom } = useSafeAreaInsets()
 
+  const orderCommentsList = orderCommentList(action)
+
   let codeNumberPhone, numberPhone, numberToShow;
   const phoneNumber = customerCellphone;
   const titleOrder = t(orderTitle[action]?.key, orderTitle[action]?.text)
   const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
   const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
 
+  const isSelectedComment = (commentKey: number) => {
+    const found = commentList.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComments = (commentItem: any) => {
+    const found = commentList.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = commentList.filter((comment: any) => comment?.key !== commentItem.key)
+      setCommentList(_comments)
+    } else {
+      setCommentList([...commentList, commentItem])
+    }
+  }
+
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
       scrollViewRef?.current?.scrollTo({ x: 0, y });
@@ -152,6 +172,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const handleAcceptOrReject = () => {
     handleFixTime();
 
+    let _comments = ''
+    if (commentList.length > 0) {
+      commentList.map((comment: any) => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + comments
+
     let minsToSend = min;
 
     if (min > '60') minsToSend = '59';
@@ -165,7 +191,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: comments,
+        comment: _comment,
         status: 5,
       },
       acceptByDriver: {
@@ -173,27 +199,27 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 6,
       },
       pickupFailedByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 10
       },
       deliveryFailedByDriver: {
-        comment: comments,
+        comment: _comment,
         status: 12
       },
       orderNotReady: {
-        comment: comments,
+        comment: _comment,
         status: 14
       },
       forcePickUp: {
-        reasons: comments,
+        reasons: _comment,
         status: 9
       },
       forceDelivery: {
-        reasons: comments,
+        reasons: _comment,
         status: 11
       }
     };
@@ -387,6 +413,28 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
+        {orderCommentsList && (
+          <CommentsButtonGroup>
+            {orderCommentsList?.list?.map((comment: any) => (
+              <OButton
+                key={comment.key}
+                text={comment.content}
+                bgColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
+                borderColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
+                textStyle={{
+                  color: isSelectedComment(comment.key) ? theme.colors.white : theme.colors.darkText,
+                  fontSize: 12,
+                  paddingRight: isSelectedComment(comment.key) ? 15 : 0
+                }}
+                style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
+                imgRightSrc={isSelectedComment(comment.key) ? theme.images.general.close : null}
+                imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+                onClick={() => handleChangeComments(comment) }
+              />
+            ))}
+          </CommentsButtonGroup>
+        )}
+
         {showTextArea && (
           <Comments ref={viewRef}>
             <OTextarea

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

@@ -35,3 +35,8 @@ export const Comments = styled.View`
   margin-top: 20px;
   padding-bottom: 40px;
 `;
+
+export const CommentsButtonGroup = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+`