ordering-ui-react-native 0.12.18 → 0.12.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.18",
+  "version": "0.12.19",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/config.json

@@ -2,9 +2,9 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "jorgev4",
+  "project": "reactdemo",
   "api": {
-    "url": "https://apiv4-staging.ordering.co",
+    "url": "https://apiv4.ordering.co",
     "language": "en",
     "version": "v400"
   },

package/themes/business/src/components 2/AcceptOrRejectOrder/index.tsx

@@ -1,389 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-  Linking,
-  Keyboard,
-  Platform,
-  View,
-  KeyboardAvoidingView,
-  TextInput
-} 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 { FloatingButton } from '../FloatingButton';
-import { OText, OButton, OTextarea, OIconButton } from '../shared';
-import { AcceptOrRejectOrderParams } from '../../types';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
-  const {
-    customerCellphone,
-    loading,
-    action,
-    handleUpdateOrder,
-    actions,
-    closeModal,
-    orderId,
-    notShowCustomerPhone,
-    titleAccept,
-    titleReject,
-    appTitle,
-  } = props;
-
-  const [, t] = useLanguage();
-  const theme = useTheme();
-  const scrollViewRef = useRef<any>(null);
-  const viewRef = useRef<any>(null);
-  const timerRef = useRef() as React.MutableRefObject<TextInput>;
-  const textTareaRef = useRef<any>();
-  const [hour, setHour] = useState('00');
-  const [min, setMin] = useState('00');
-  const [time, setTime] = useState('');
-  const [comments, setComments] = useState('');
-  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
-  const phoneNumber = customerCellphone;
-  let codeNumberPhone, numberPhone, numberToShow;
-  const { top, bottom} = useSafeAreaInsets()
-
-  const handleFocus = () => {
-    viewRef?.current?.measure((x: any, y: any) => {
-      scrollViewRef?.current?.scrollTo({ x: 0, y });
-    });
-  };
-
-  const handleFocusTimer = () => {
-    timerRef?.current?.measure((x: any, y: any) => {
-      scrollViewRef?.current?.scrollTo({ x: 0, y });
-    });
-  };
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => {
-        setIsKeyboardShow(true);
-      },
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
-        setIsKeyboardShow(false);
-      },
-    );
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-    };
-  }, []);
-
-  if (!notShowCustomerPhone) {
-    if (phoneNumber) {
-      codeNumberPhone = phoneNumber.slice(0, 3);
-      numberPhone = phoneNumber.slice(3, phoneNumber?.length);
-      numberToShow = `(${codeNumberPhone}) ${numberPhone}`;
-    }
-  }
-
-  const handleArrowBack: any = () => {
-    closeModal(false);
-  };
-
-  const handleTime = (e: any) => {
-    if (
-      e.includes(',') ||
-      e.includes('.') ||
-      e.includes('-') ||
-      e.includes(' ')
-    )
-      return;
-
-    setTime(e.slice(-4));
-    const mins = e.slice(-2);
-    const hours = e.slice(-4, -2);
-
-    setMin(mins);
-    setHour(hours);
-    setTime(`${hours}${mins}`);
-  };
-
-  useEffect(() => {
-    if (actions && action === 'accept') {
-      openTimerIOnput();
-    }
-
-    if (actions && (action === 'reject' || action === 'failed')) {
-      openTextTareaOInput();
-    }
-  }, []);
-
-  const handleFixTime = () => {
-    if (min >= '60') {
-      setMin('59');
-    }
-
-    if (min.length < 2) setMin(`0${min}`);
-    if (hour.length < 2) setHour(`0${hour}`);
-
-    if (!hour) setHour('00');
-  };
-
-  const openTimerIOnput = () => {
-    const isFocus = timerRef.current.isFocused();
-    if (isFocus) {
-      timerRef.current.blur();
-    }
-
-    if (!isFocus) {
-      if (time.length > 1) timerRef.current.clear();
-      timerRef.current.focus();
-      handleFocusTimer();
-    }
-  };
-
-  const openTextTareaOInput = () => {
-    const isFocus = textTareaRef.current.isFocused();
-    if (isFocus && textTareaRef?.current) {
-      textTareaRef.current.blur();
-    }
-
-    if (!isFocus && textTareaRef?.current) {
-      textTareaRef.current.focus();
-    }
-  };
-
-  const handleAcceptOrReject = () => {
-    handleFixTime();
-
-    let minsToSend = min;
-
-    if (min > '60') minsToSend = '59';
-
-    const time = parseInt(hour || '0') * 60 + (parseInt(minsToSend) || 0);
-
-    let bodyToSend;
-    const orderStatus: any = {
-      acceptByBusiness: {
-        prepared_in: time,
-        status: 7,
-      },
-      rejectByBusiness: {
-        comment: comments,
-        status: 5,
-      },
-      acceptByDriver: {
-        delivered_in: time,
-        status: 8,
-      },
-      rejectByDriver: {
-        comment: comments,
-        status: 6,
-      },
-      failedByDriver: {
-        comment: comments,
-        status: 12
-      }
-    };
-
-    if (actions && action === 'accept') {
-      bodyToSend = orderStatus[actions.accept];
-    }
-    if (actions && action === 'reject') {
-      bodyToSend = orderStatus[actions.reject];
-    }
-    if(actions && action === 'failed'){
-      bodyToSend = orderStatus[actions.failed]
-    }
-
-    bodyToSend.id = orderId;
-
-    handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
-  };
-
-  return (
-      <KeyboardAvoidingView
-      enabled
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={{ flex: 1, paddingHorizontal: 30, paddingTop: 30, marginTop: top, marginBottom: bottom,justifyContent: 'space-between' }}>
-          <View>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 20 }}
-          style={{
-            maxWidth: 40,
-            height: 35,
-            justifyContent: 'flex-end',
-            marginBottom: 30,
-          }}
-          onClick={() => handleArrowBack()}
-        />
-        <OText
-          size={20}
-          color={theme.colors.textGray}
-          style={{
-            fontFamily: 'Poppins',
-            fontStyle: 'normal',
-          }}
-          weight="600">
-          {action === 'accept'
-            ? `${t(titleAccept?.key, titleAccept?.text)}:`
-            : t(titleReject?.key, titleReject?.text)}
-        </OText>
-        </View>
-        <Content showsVerticalScrollIndicator={false} ref={scrollViewRef}>
-          <Header>
-            {action === 'reject' && (
-              <>
-                {!notShowCustomerPhone && (
-                  <>
-                    <OText
-                      size={15}
-                      color={theme.colors.textGray}
-                      style={{ marginTop: 10 }}>
-                      {t(
-                        'CALL_YOUR_CUSTOMER_TO_RESOLVE_THE_ISSUE_AS_POLITELY_AS_POSSIBLE',
-                        'Call your customer to resolve the issue as politely as possible',
-                      )}
-                    </OText>
-
-                    {numberToShow ? (
-                      <OButton
-                        bgColor="transparent"
-                        borderColor={theme.colors.primary}
-                        textStyle={{
-                          color: theme.colors.primary,
-                          fontSize: 20,
-                        }}
-                        style={{
-                          borderRadius: 10,
-                          marginVertical: 20,
-                        }}
-                        imgLeftStyle={{
-                          resizeMode: 'contain',
-                          left: 20,
-                          position: 'absolute',
-                        }}
-                        imgLeftSrc={theme.images.general.cellphone}
-                        text={numberToShow}
-                        onClick={() =>
-                          Linking.openURL(`tel:${customerCellphone}`)
-                        }
-                      />
-                    ) : (
-                      <OButton
-                        bgColor="transparent"
-                        borderColor={theme.colors.primary}
-                        textStyle={{
-                          color: theme.colors.primary,
-                          fontSize: 15,
-                        }}
-                        style={{
-                          borderRadius: 10,
-                          marginVertical: 20,
-                        }}
-                        imgLeftStyle={{
-                          resizeMode: 'contain',
-                          left: 20,
-                          position: 'absolute',
-                        }}
-                        isDisabled={true}
-                        imgLeftSrc={theme.images.general.cellphone}
-                        text={t('NOT_NUMBER', "There's not phonenumber.")}
-                        onClick={() =>
-                          Linking.openURL(`tel:${customerCellphone}`)
-                        }
-                      />
-                    )}
-                  </>
-                )}
-
-                <OText
-                  size={15}
-                  color={theme.colors.textGray}
-                  style={{ marginBottom: 10 }}>
-                  {t(
-                    'MARK_THE_ORDER_AS_REJECTED',
-                    'Mark the order as rejected',
-                  )}
-                </OText>
-
-                <OText>
-                  <OText style={{ fontWeight: '600' }}>
-                    {t('NOTE', 'Note')}
-                    {': '}
-                  </OText>
-
-                  <OText size={15} color={theme.colors.textGray}>
-                    {t(
-                      'YOUR_CUSTOMER_WILL_RECEIVE_A_NOTIFICATION_ABOUT_THIS_ACTIONS',
-                      'Your customer will receive a notification about this actions',
-                    )}
-                  </OText>
-                </OText>
-              </>
-            )}
-          </Header>
-
-          {action === 'accept' && (
-            <View style={{ height: 400, justifyContent: 'center' }}>
-              <Timer onPress={() => openTimerIOnput()}>
-                <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                  {hour}
-                </OText>
-                {hour.length > 0 && <OText size={55}>:</OText>}
-                <OText weight="600" style={{ textAlign: 'center' }} size={55}>
-                  {min}
-                </OText>
-              </Timer>
-            </View>
-          )}
-          <TimeField
-            ref={timerRef}
-            keyboardType="numeric"
-            value={time}
-            placeholder={'00:00'}
-            onChangeText={handleTime}
-            onPressOut={() => handleFixTime()}
-            editable={true}
-            autoFocus={actions && action === 'accept'}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={theme.colors.textGray}
-            color={theme.colors.textGray}
-            onEndEditing={handleFixTime}
-          />
-
-          {(action === 'reject' || action === 'failed') && (
-            <Comments ref={viewRef}>
-              <OTextarea
-                textTareaRef={textTareaRef}
-                autoFocus={actions && (action === 'reject' || action === 'failed')}
-                onFocus={handleFocus}
-                placeholder={t(
-                  'PLEASE_TYPE_YOUR_COMMENTS_IN_HERE',
-                  'Please type your comments in here',
-                )}
-                value={comments}
-                onChange={setComments}
-              />
-              <View style={{ height: 20 }} />
-            </Comments>
-          )}
-        </Content>
-
-        <Action>
-          <FloatingButton
-            firstButtonClick={() => {
-              handleAcceptOrReject();
-            }}
-            btnText={
-              action === 'accept'
-                ? t('ACCEPT', 'Accept')
-                : t('REJECT', 'Reject')
-            }
-            color={action === 'accept' ? theme.colors.green : theme.colors.red}
-            widthButton={'100%'}
-          />
-        </Action>
-      </KeyboardAvoidingView>
-  );
-};

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

@@ -1,36 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Content = styled.ScrollView`
-  background-color: ${(props: any) => props.theme.colors.white};
-  margin-bottom: 30px;
-`;
-
-export const Timer = styled.TouchableOpacity`
-  padding: 40px;
-  justify-content: center;
-  flex-direction: row;
-  align-items: center;
-  width: 245px;
-  height: 245px;
-  background-color: ${(props: any) => props.theme.colors.inputChat};
-  border-radius: 123px;
-  align-self: center;
-`;
-
-export const TimeField = styled.TextInput`
-  font-size: 55px;
-  font-family: 'Poppins-Regular';
-  font-weight: 600;
-  text-align: center;
-  width: 0;
-  height: 0;
-  opacity: 0;
-`;
-
-export const Header = styled.View``;
-
-export const Action = styled.View``;
-
-export const Comments = styled.View`
-  margin-top: 20px;
-`;

package/themes/business/src/components 2/BusinessController/index.tsx

@@ -1,155 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
-import ToggleSwitch from 'toggle-switch-react-native';
-import { useTheme } from 'styled-components/native';
-import {
-  BusinessController as BusinessSingleCard,
-  useUtils,
-  useLanguage,
-  ToastType,
-  useToast,
-} from 'ordering-components/native';
-import { Card, Information, Logo } from './styles';
-import { OIcon, OText } from '../shared';
-import { BusinessControllerParams } from '../../types';
-
-export const BusinessControllerUI = (props: BusinessControllerParams) => {
-  const { businessState, updateBusiness, isUpdateStore, setIsUpdateStore } =
-    props;
-
-  const { loading, business, error } = businessState;
-
-  const theme = useTheme();
-  const [{ optimizeImage }] = useUtils();
-  const [, t] = useLanguage();
-  const [, { showToast }] = useToast();
-
-  const [updatingBusiness, setUpdatingBusiness] = useState(false);
-
-  const handleSwitch = () => {
-    setUpdatingBusiness(true);
-    setIsUpdateStore(true);
-
-    updateBusiness &&
-      updateBusiness(business?.id, { enabled: !business?.enabled });
-  };
-
-  useEffect(() => {
-    if (updatingBusiness && !error) {
-      showToast(
-        ToastType.Info,
-        business?.enabled
-          ? t('ENABLED_BUSINESS', 'Enabled business')
-          : t('DISABLED_BUSINESS', 'Disabled business'),
-      );
-    }
-
-    if (error) {
-      showToast(
-        ToastType.Error,
-        t('ERROR_UPDATING_BUSINESS', 'Error updating business'),
-      );
-    }
-
-    setIsUpdateStore(false);
-    setUpdatingBusiness(false);
-  }, [business]);
-
-  const styles = StyleSheet.create({
-    icon: {
-      borderRadius: 7.6,
-      width: 70,
-      height: 70,
-    },
-    logo: {
-      padding: 2,
-      borderRadius: 18,
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 1.5,
-      },
-      shadowOpacity: 0.21,
-      shadowRadius: 3,
-      elevation: 7,
-    },
-    header: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      width: '100%',
-    },
-    title: {
-      fontWeight: '600',
-      fontSize: 18,
-      color: theme.colors.textGray,
-    },
-    address: {
-      fontSize: 14,
-      color: theme.colors.unselectText,
-    },
-  });
-
-  return (
-    <>
-      {business && (
-        <Card key={business?.id}>
-          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-            <Logo style={styles.logo}>
-              <OIcon
-                url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                style={styles.icon}
-              />
-            </Logo>
-
-            <View
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                alignItems: 'flex-start',
-              }}>
-              <Information>
-                <View style={styles.header}>
-                  <OText style={styles.title} numberOfLines={1}>
-                    {business?.name}
-                  </OText>
-                </View>
-
-                <OText style={styles.address} numberOfLines={1}>
-                  {business?.address}
-                </OText>
-
-                <OText style={styles.address} numberOfLines={1}>
-                  {business?.zipcode}
-                </OText>
-              </Information>
-
-              {loading && isUpdateStore ? (
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-              ) : (
-                <ToggleSwitch
-                  isOn={business?.enabled}
-                  onColor={theme.colors.primary}
-                  offColor={theme.colors.offColor}
-                  size="small"
-                  onToggle={handleSwitch}
-                  disabled={loading}
-                  animationSpeed={200}
-                />
-              )}
-            </View>
-          </View>
-        </Card>
-      )}
-    </>
-  );
-};
-
-export const BusinessController = (props: BusinessControllerParams) => {
-  const BusinessControllerProps = {
-    ...props,
-    isDisabledInterval: true,
-    UIComponent: BusinessControllerUI,
-  };
-
-  return <BusinessSingleCard {...BusinessControllerProps} />;
-};

package/themes/business/src/components 2/BusinessController/styles.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Card = styled.View`
-  flex: 1;
-  justify-content: center;
-  align-items: flex-start;
-  flex-direction: row;
-  margin-bottom: 30px;
-  min-height: 64px;
-`;
-
-export const Information = styled.View`
-  margin-horizontal: 10px;
-  flex: 1;
-`;
-
-export const Logo = styled.View`
-  min-height: 64px;
-`;