ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,496 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import {
+  UserFormDetails as UserProfileController,
+  useSession,
+  ToastType,
+  useToast,
+  useLanguage,
+  useUtils,
+} from 'ordering-components/native';
+import {
+  CenterView,
+  Actions,
+  UserData,
+  EditButton,
+  EnabledStatusDriver,
+} from './styles';
+import { LogoutButton } from '../LogoutButton';
+import { LanguageSelector } from '../LanguageSelector';
+import { UserFormDetailsUI } from '../UserFormDetails';
+import ToggleSwitch from 'toggle-switch-react-native';
+import { UDWrapper } from '../UserFormDetails/styles';
+import {
+  OIcon,
+  OIconButton,
+  OText,
+  OButton,
+  OInput,
+} from '../../components/shared';
+import { sortInputFields, getTraduction } from '../../utils';
+import { ProfileParams } from '../../types';
+import { NotFoundSource } from '../NotFoundSource';
+
+const ProfileUI = (props: ProfileParams) => {
+  const {
+    navigation,
+    formState,
+    isEdit,
+    validationFields,
+    handleButtonUpdateClick,
+    toggleIsEdit,
+    cleanFormState,
+    handleToggleAvalaibleStatusDriver,
+    userState,
+    isAvailableLoading,
+  } = props;
+
+  const [{ user }] = useSession();
+  const [state, t] = useLanguage();
+  const [, { showToast }] = useToast();
+  const [{ optimizeImage }] = useUtils();
+  const { errors } = useForm();
+  const theme = useTheme();
+
+  const [phoneInputData, setPhoneInputData] = useState({
+    error: '',
+    phone: {
+      country_phone_code: null,
+      cellphone: null,
+    },
+  });
+  const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
+  const [phoneToShow, setPhoneToShow] = useState('');
+
+  useEffect(() => {
+    if (phoneInputData.phone.cellphone) {
+      const codeNumberPhone = phoneInputData.phone.cellphone.slice(0, 3);
+      const numberPhone = phoneInputData.phone.cellphone.slice(
+        3,
+        phoneInputData.phone.cellphone?.length,
+      );
+      setPhoneToShow(`(${codeNumberPhone}) ${numberPhone}`);
+    }
+  }, [phoneInputData.phone.cellphone]);
+
+  const setUserCellPhone = (isEdit = false) => {
+    if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
+      setUserPhoneNumber(userPhoneNumber);
+      return;
+    }
+    if (user?.cellphone) {
+      let phone = null;
+      if (user?.country_phone_code) {
+        phone = `+${user?.country_phone_code} ${user?.cellphone}`;
+      } else {
+        phone = user?.cellphone;
+      }
+      setUserPhoneNumber(phone);
+      setPhoneInputData({
+        ...phoneInputData,
+        phone: {
+          country_phone_code: user?.country_phone_code || null,
+          cellphone: user?.cellphone || null,
+        },
+      });
+      return;
+    }
+    setUserPhoneNumber(user?.cellphone || '');
+  };
+
+  const handleImagePicker = () => {
+    launchImageLibrary(
+      {
+        mediaType: 'photo',
+        maxHeight: 200,
+        maxWidth: 200,
+        includeBase64: true,
+      },
+      (response: any) => {
+        if (response.didCancel) {
+          console.log('User cancelled image picker');
+        } else if (response.errorMessage) {
+          console.log('ImagePicker Error: ', response.errorMessage);
+          showToast(ToastType.Error, response.errorMessage);
+        } else {
+          if (response.uri) {
+            const url = `data:${response.type};base64,${response.base64}`;
+            handleButtonUpdateClick(null, true, url);
+          } else {
+            showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
+          }
+        }
+      },
+    );
+  };
+
+  const handleCancelEdit = () => {
+    cleanFormState({ changes: {} });
+    toggleIsEdit();
+    setPhoneInputData({
+      error: '',
+      phone: {
+        country_phone_code: null,
+        cellphone: null,
+      },
+    });
+  };
+
+  useEffect(() => {
+    const isLoadingDriver = userState?.loadingDriver ?? true;
+
+    if (userState?.result?.result && !isLoadingDriver) {
+      if (userState?.result?.error) {
+        const messageError =
+          userState.result.error || userState.result.error[0];
+        showToast(ToastType.Error, getTraduction(messageError, t));
+      } else {
+        showToast(
+          ToastType.Success,
+          t('AVAILABLE_STATE_IS_UPDATED', 'Available state is updated'),
+        );
+      }
+    }
+  }, [userState?.loadingDriver]);
+
+  useEffect(() => {
+    if ((user || !isEdit) && !formState?.loading) {
+      setUserCellPhone();
+      if (!isEdit && !formState?.loading) {
+        cleanFormState && cleanFormState({ changes: {} });
+        setUserCellPhone(true);
+      }
+    }
+  }, [user, isEdit]);
+
+  useEffect(() => {
+    if (formState.result.result && !formState.loading) {
+      if (formState.result?.error) {
+        showToast(ToastType.Error, formState.result.result);
+      } else {
+        showToast(
+          ToastType.Success,
+          t('UPDATE_SUCCESSFULLY', 'Update successfully'),
+        );
+      }
+    }
+  }, [formState.result]);
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError +=
+          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+      });
+      showToast(ToastType.Error, stringError);
+    }
+  }, [errors]);
+
+  useEffect(() => {
+    if (user?.cellphone && !user?.country_phone_code) {
+      setPhoneUpdate(true);
+    } else {
+      setPhoneUpdate(false);
+    }
+  }, [user?.country_phone_code]);
+
+  const styles = StyleSheet.create({
+    label: {
+      color: theme.colors.textGray,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+    },
+    inputStyle: {
+      marginBottom: 25,
+      borderWidth: 1,
+      borderColor: theme.colors.tabBar,
+      borderTopWidth: 0,
+      borderRightWidth: 0,
+      borderLeftWidth: 0,
+      paddingHorizontal: 0,
+      borderRadius: 0,
+    },
+    editButton: {
+      height: 44,
+      borderRadius: 7.6,
+      borderWidth: 1,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.white,
+      marginBottom: 25,
+    },
+    btnText: {
+      color: theme.colors.textGray,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+  });
+
+  return (
+    <>
+      {validationFields?.error && (
+        <NotFoundSource
+          content={
+            validationFields?.error[0] ||
+            validationFields?.error[0]?.message ||
+            t('NETWORK_ERROR', 'Network Error')
+          }
+          image={theme.images.general.notFound}
+          conditioned={false}
+        />
+      )}
+
+      {(formState?.loading || state?.loading) && !validationFields.error && (
+        <View
+          style={{
+            backgroundColor: theme.colors.backgroundLight,
+          }}>
+          <Placeholder Animation={Fade}>
+            <PlaceholderLine
+              width={20}
+              style={{
+                alignSelf: 'center',
+                borderRadius: 20,
+                width: 120,
+                height: 120,
+              }}
+            />
+
+            <PlaceholderLine
+              width={20}
+              style={{
+                alignSelf: 'center',
+                borderRadius: 20,
+                width: 20,
+                height: 20,
+              }}
+            />
+          </Placeholder>
+
+          {[...Array(8)].map((item, i) => (
+            <Placeholder key={i} Animation={Fade}>
+              <View style={{ flexDirection: 'row' }}>
+                <Placeholder>
+                  <PlaceholderLine width={40} style={{ marginTop: 30 }} />
+
+                  <PlaceholderLine width={100} />
+                </Placeholder>
+              </View>
+            </Placeholder>
+          ))}
+
+          <Placeholder Animation={Fade}>
+            <PlaceholderLine
+              width={30}
+              style={{
+                marginTop: 20,
+                alignSelf: 'center',
+                height: 44,
+                borderRadius: 7.6,
+              }}
+            />
+
+            <PlaceholderLine
+              width={100}
+              style={{
+                marginTop: 20,
+                height: 33,
+                borderRadius: 7.6,
+              }}
+            />
+
+            <PlaceholderLine
+              width={40}
+              style={{
+                marginTop: 5,
+                height: 15,
+                borderRadius: 7.6,
+              }}
+            />
+          </Placeholder>
+        </View>
+      )}
+
+      {!formState?.loading && !state?.loading && !validationFields.error && (
+        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+          <CenterView>
+            <OIcon
+              url={optimizeImage(user?.photo, 'h_300,c_limit')}
+              src={!user?.photo && theme.images.general.user}
+              width={150}
+              height={150}
+              style={{ borderRadius: 7.2 }}
+            />
+
+            <OIconButton
+              icon={theme.images.general.camera}
+              borderColor={theme.colors.clear}
+              iconStyle={{ width: 21, height: 21 }}
+              style={{ maxWidth: 40 }}
+              onClick={() => handleImagePicker()}
+            />
+          </CenterView>
+
+          {user?.level === 4 && (
+            <EnabledStatusDriver>
+              <View style={{ flex: 1 }}>
+                <OText
+                  numberOfLines={2}
+                  adjustsFontSizeToFit
+                  style={{ ...styles.label, paddingHorizontal: 0 }}>
+                  {t(
+                    'AVAILABLE_TO_RECEIVE_ORDERS',
+                    'Available to receive orders',
+                  )}
+                </OText>
+              </View>
+
+              {userState.loadingDriver ? (
+                <ActivityIndicator size="small" color={theme.colors.primary} />
+              ) : (
+                <ToggleSwitch
+                  isOn={userState?.result?.result?.available}
+                  onColor={theme.colors.primary}
+                  offColor={theme.colors.offColor}
+                  size="small"
+                  onToggle={() =>
+                    handleToggleAvalaibleStatusDriver &&
+                    handleToggleAvalaibleStatusDriver(
+                      !userState?.result?.result?.available,
+                    )
+                  }
+                  disabled={userState?.loading}
+                  animationSpeed={200}
+                />
+              )}
+            </EnabledStatusDriver>
+          )}
+
+          {!isEdit && !validationFields.error ? (
+            <UserData>
+              {!validationFields?.loading &&
+                sortInputFields({ values: validationFields?.fields?.checkout })
+                  .length > 0 && (
+                  <UDWrapper>
+                    {sortInputFields({
+                      values: validationFields.fields?.checkout,
+                    }).map((field: any) => (
+                      <React.Fragment key={field.id}>
+                        <OText style={styles.label}>
+                          {t(field?.code.toUpperCase(), field?.name)}
+                        </OText>
+
+                        <OInput
+                          name={field.code}
+                          placeholder={t(field.code.toUpperCase(), field?.name)}
+                          placeholderTextColor={theme.colors.arrowColor}
+                          style={styles.inputStyle}
+                          icon={
+                            field.code === 'email'
+                              ? theme.images.general.email
+                              : theme.images.general.user
+                          }
+                          autoCapitalize={
+                            field.code === 'email' ? 'none' : 'sentences'
+                          }
+                          isDisabled={!isEdit}
+                          value={
+                            formState?.changes[field.code] ??
+                            (user && user[field.code]) ??
+                            ''
+                          }
+                          type={
+                            field.code === 'email' ? 'email-address' : 'default'
+                          }
+                          returnKeyType="done"
+                          selectionColor={theme.colors.primary}
+                          color={theme.colors.textGray}
+                        />
+                      </React.Fragment>
+                    ))}
+
+                    <OText style={styles.label}>
+                      {t('PASSWORD', 'Password')}
+                    </OText>
+
+                    <OInput
+                      isSecured={true}
+                      placeholder={'·············'}
+                      placeholderTextColor={theme.colors.textGray}
+                      style={styles.inputStyle}
+                      isDisabled={true}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.textGray}
+                    />
+
+                    <OText style={styles.label}>{t('PHONE', 'Phone')}</OText>
+
+                    <OInput
+                      isSecured={true}
+                      placeholder={
+                        phoneToShow || `${t('NOT_PHONE', 'Not Phone')}`
+                      }
+                      placeholderTextColor={theme.colors.textGray}
+                      style={styles.inputStyle}
+                      isDisabled={true}
+                      selectionColor={theme.colors.primary}
+                      color={theme.colors.textGray}
+                    />
+                  </UDWrapper>
+                )}
+            </UserData>
+          ) : (
+            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+              <UserFormDetailsUI
+                {...props}
+                hideUpdateButton
+                handleCancelEdit={handleCancelEdit}
+                toggleIsEdit={toggleIsEdit}
+              />
+            </View>
+          )}
+
+          {!validationFields.loading && !isEdit && (
+            <EditButton>
+              <OButton
+                text={t('EDIT', 'Edit')}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                isDisabled={formState.loading}
+                imgRightSrc={null}
+                textStyle={styles.btnText}
+                style={styles.editButton}
+                onClick={toggleIsEdit}
+              />
+            </EditButton>
+          )}
+
+          <Actions>
+            <LanguageSelector />
+
+            <LogoutButton />
+          </Actions>
+        </ScrollView>
+      )}
+    </>
+  );
+};
+
+export const UserProfileForm = (props: any) => {
+  const profileProps = {
+    ...props,
+    UIComponent: ProfileUI,
+  };
+
+  return <UserProfileController {...profileProps} />;
+};

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components/native';
+
+export const CenterView = styled.View`
+  align-items: center;
+`;
+
+export const UserData = styled.View`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const EditButton = styled.View`
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  flex: 1;
+`;
+
+export const EnabledStatusDriver = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Actions = styled.View`
+  flex: 1;
+  border-top-width: 5px;
+  border-top-color: ${(props: any) => props.theme.colors.inputChat};
+  padding-vertical: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+`;