ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,389 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,19 @@
+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;
+`;