ordering-ui-react-native 0.24.43-test → 0.25.1

package/src/components/AddressList/index.tsx

@@ -1,336 +1,336 @@
-import React, { useEffect, useState } from 'react'
-import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
-import { AddressListContainer, AddressItem } from './styles'
-import { StyleSheet, View } from 'react-native'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { useTheme } from 'styled-components/native';
-
-import { OButton, OText, OAlert } from '../shared'
-import { Container } from '../../layouts/Container'
-import { AddressListParams } from '../../types'
-import { NotFoundSource } from '../NotFoundSource'
-import NavBar from '../NavBar'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-
-const addIcon = require('../../assets/icons/add-circular-outlined-button.png')
-
-const AddressListUI = (props: AddressListParams) => {
-  const {
-    navigation,
-    route,
-    addressList,
-    isFromProfile,
-    nopadding,
-    handleSetDefault,
-    handleDelete,
-    setAddressList,
-    isGoBack,
-    actionStatus,
-    isFromBusinesses,
-    isFromProductsList,
-    afterSignup,
-    isFromCheckout
-  } = props
-
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    address: {
-      flex: 1,
-      marginHorizontal: 5
-    },
-    icon: {
-      flex: 0.2
-    },
-    buttonIcon: {
-      width: 20,
-      height: 20,
-      resizeMode: 'contain',
-      left: 20,
-      position: 'absolute',
-      tintColor: theme.colors.primary
-    },
-    button: {
-      marginVertical: 30
-    }
-  })
-
-  const [orderState] = useOrder()
-  const [, t] = useLanguage()
-  const [{ auth }, { logout }] = useSession()
-  const [alert, setAlert] = useState<any>({ show: false })
-
-  const onNavigatorRedirect = () => {
-    if (route && (isFromBusinesses || isGoBack)) {
-      isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
-      return
-    }
-    if (route && route?.params?.isFromCheckout) {
-      onNavigationRedirect('CheckoutPage')
-      return
-    }
-    if (route && !route?.params?.isFromCheckout){
-      onNavigationRedirect('BottomTab')
-    }
-
-  }
-
-  const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-    (address: any, i: number, self: any) =>
-      i === self.findIndex((obj: any) => (
-        address.address === obj.address &&
-        address.address_notes === obj.address_notes &&
-        address.zipcode === obj.zipcode &&
-        address.internal_number === obj.internal_number
-      )))) || []
-
-  const checkAddress = (address: any) => {
-    if (!orderState?.options?.address) return true
-    const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
-    const values: any = []
-    props.forEach(prop => {
-      if (address[prop]) {
-        if (prop === 'location') {
-          values.push(address[prop].lat === orderState?.options?.address[prop]?.lat &&
-            address[prop].lng === orderState?.options?.address[prop]?.lng)
-        } else {
-          values.push(address[prop] === orderState?.options?.address[prop])
-        }
-      } else {
-        values.push(orderState?.options?.address[prop] === null || orderState?.options?.address[prop] === '')
-      }
-    })
-    return values.every((value: any) => value)
-  }
-
-  const addressIcon = (tag: string) => {
-    switch (tag) {
-      case 'other':
-        return 'plus'
-      case 'office':
-        return 'office-building'
-      case 'home':
-        return 'home'
-      case 'favorite':
-        return 'heart'
-      default:
-        return 'plus'
-    }
-  }
-
-  const handleSetAddress = (address: any) => {
-    if (address.id === orderState?.options?.address_id) return
-    handleSetDefault(address)
-  }
-
-  const handleSaveAddress = (address: any) => {
-    let found = false
-    const addresses = addressList.addresses.map((_address: any) => {
-      if (_address?.id === address?.id) {
-        Object.assign(_address, address)
-        found = true
-      } else if (address.default) {
-        _address.default = false
-      }
-      return _address
-    })
-    if (!found) {
-      addresses.push(address)
-    }
-    setAddressList({
-      ...addressList,
-      addresses
-    })
-  }
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-  const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
-
-  useEffect(() => {
-    if (orderState.loading && auth && orderState.options.address?.location) {
-      onNavigatorRedirect()
-    }
-  }, [orderState.options.address])
-
-  return (
-    <Container nopadding={nopadding}>
-      {(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile)) && (
-        <AddressListContainer>
-          {
-            route &&
-            (
-              route?.params?.isFromBusinesses ||
-              route?.params?.isFromCheckout ||
-              route?.params?.isFromProductsList ||
-              route?.params?.isFromProfile
-            ) &&
-            (
-              <NavBar
-                title={route?.params?.isFromProfile ? t('SAVED_PLACES', 'My saved places') : t('ADDRESS_LIST', 'Address List')}
-                titleAlign={'center'}
-                onActionLeft={() => goToBack()}
-                showCall={false}
-                btnStyle={{ paddingLeft: 0 }}
-                paddingTop={0}
-              />
-            )}
-          {addressList.loading && (
-            <>
-              {[...Array(5)].map((item, i) => (
-                <Placeholder key={i} style={{ padding: 20 }} Animation={Fade}>
-                  <View style={{ flexDirection: 'row' }}>
-                    <PlaceholderLine width={20} height={60} style={{ marginBottom: 0, marginRight: 15 }} />
-                    <Placeholder>
-                      <PlaceholderLine width={70} />
-                      <PlaceholderLine width={40} />
-                      <PlaceholderLine width={70} />
-                    </Placeholder>
-                  </View>
-                </Placeholder>
-              ))}
-            </>
-          )}
-          {
-            !addressList.error &&
-            addressList?.addresses?.length > 0 && (
-              <>
-                {uniqueAddressesList.map((address: any) => (
-                  <AddressItem
-                    key={address.id}
-                    isSelected={checkAddress(address)}
-                    onPress={() => handleSetAddress(address)}
-                  >
-                    <MaterialIcon
-                      name={addressIcon(address?.tag)}
-                      size={32}
-                      color={theme.colors.primary}
-                      style={styles.icon}
-                    />
-                    <OText style={styles.address}>{address.address}</OText>
-                    <MaterialIcon
-                      name='pencil-outline'
-                      size={28}
-                      color={theme.colors.green}
-                      onPress={() => !afterSignup ?  onNavigationRedirect(
-                        'AddressForm',
-                        {
-                          address: address,
-                          isEditing: true,
-                          addressesList: addressList,
-                          onSaveAddress: handleSaveAddress,
-                          isSelectedAfterAdd: true,
-                          isFromProductsList: isFromProductsList,
-                          hasAddressDefault: !!orderState.options?.address?.location,
-                          isFromCheckout: isFromCheckout
-                        }
-                      ) : onNavigationRedirect(
-                        'AddressFormInitial',
-                        {
-                          address: address,
-                          isEditing: true,
-                          addressesList: addressList,
-                          onSaveAddress: handleSaveAddress,
-                          isSelectedAfterAdd: true,
-                          isFromProductsList: isFromProductsList,
-                          hasAddressDefault: !!orderState.options?.address?.location
-                        })}
-                    />
-                    <MaterialIcon
-                      name='trash-can-outline'
-                      size={28}
-                      color={!checkAddress(address) ? theme.colors.primary : theme.colors.disabled}
-                      onPress={() => setAlert({
-                        show: true,
-                        title: t('DELETE_ADDRESS', 'Delete Address'),
-                        onAccept: () => {
-                          handleDelete && handleDelete(address)
-                          setAlert({ show: false })
-                        },
-                        content: [t('QUESTION_DELETE_ADDRESS', 'Are you sure to you wants delete the selected address')]
-                      })}
-                    />
-                  </AddressItem>
-                ))}
-              </>
-            )}
-          {!addressList.loading && addressList.error && (
-            addressList.error.length > 0 && (
-              <NotFoundSource
-                content={
-                  addressList.error[0]?.message ||
-                  addressList.error[0] ||
-                  t('NETWORK_ERROR', 'Network Error, please reload the app')
-                }
-                btnTitle={t('LOGIN', 'Login')}
-                onClickButton={() => logout()}
-              />
-            )
-          )}
-          {!addressList.loading && !addressList.error && (
-            <>
-              {!(
-                route && (route?.params?.isFromBusinesses || route?.params?.isFromCheckout)
-              ) && !isFromProfile && (
-                  <OText size={24}>
-                    {t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
-                  </OText>
-                )}
-              <OButton
-                text={t('ADD_NEW_ADDRESS', 'Add new Address')}
-                imgRightSrc=''
-                imgLeftSrc={addIcon}
-                bgColor={theme.colors.white}
-                imgLeftStyle={styles.buttonIcon}
-                style={styles.button}
-                borderColor={theme.colors.primary}
-                onClick={() => !afterSignup ? onNavigationRedirect(
-                  'AddressForm',
-                  {
-                    address: null,
-                    onSaveAddress: handleSaveAddress,
-                    addressesList: addressList?.addresses,
-                    nopadding: true,
-                    isSelectedAfterAdd: true,
-                    hasAddressDefault: !!orderState.options?.address?.location,
-                    isFromCheckout: isFromCheckout
-                  }) : onNavigationRedirect(
-                    'AddressFormInitial',
-                    {
-                      address: null,
-                      onSaveAddress: handleSaveAddress,
-                      addressesList: addressList?.addresses,
-                      nopadding: true,
-                      isSelectedAfterAdd: true,
-                      hasAddressDefault: !!orderState.options?.address?.location})}
-              />
-            </>
-          )}
-          {!isFromProfile && addressList?.addresses?.length > 0 && (
-            <OButton
-              text={t('CONTINUE', 'Continue')}
-              style={styles.button}
-              onClick={() => onNavigatorRedirect()}
-              textStyle={{ color: theme.colors.white }}
-            />
-          )}
-        </AddressListContainer>
-      )}
-      <OAlert
-        open={alert.show}
-        title={alert.title}
-        onAccept={alert.onAccept}
-        onClose={() => setAlert({ show: false })}
-        onCancel={() => setAlert({ show: false })}
-        content={alert.content}
-      />
-    </Container>
-  )
-}
-
-export const AddressList = (props: AddressListParams) => {
-  const addressListProps = {
-    ...props,
-    UIComponent: AddressListUI
-  }
-  return <AddressListController {...addressListProps} />
-}
+import React, { useEffect, useState } from 'react'
+import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
+import { AddressListContainer, AddressItem } from './styles'
+import { StyleSheet, View } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OText, OAlert } from '../shared'
+import { Container } from '../../layouts/Container'
+import { AddressListParams } from '../../types'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+const addIcon = require('../../assets/icons/add-circular-outlined-button.png')
+
+const AddressListUI = (props: AddressListParams) => {
+  const {
+    navigation,
+    route,
+    addressList,
+    isFromProfile,
+    nopadding,
+    handleSetDefault,
+    handleDelete,
+    setAddressList,
+    isGoBack,
+    actionStatus,
+    isFromBusinesses,
+    isFromProductsList,
+    afterSignup,
+    isFromCheckout
+  } = props
+
+  const theme = useTheme()
+
+  const styles = StyleSheet.create({
+    address: {
+      flex: 1,
+      marginHorizontal: 5
+    },
+    icon: {
+      flex: 0.2
+    },
+    buttonIcon: {
+      width: 20,
+      height: 20,
+      resizeMode: 'contain',
+      left: 20,
+      position: 'absolute',
+      tintColor: theme.colors.primary
+    },
+    button: {
+      marginVertical: 30
+    }
+  })
+
+  const [orderState] = useOrder()
+  const [, t] = useLanguage()
+  const [{ auth }, { logout }] = useSession()
+  const [alert, setAlert] = useState<any>({ show: false })
+
+  const onNavigatorRedirect = () => {
+    if (route && (isFromBusinesses || isGoBack)) {
+      isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
+      return
+    }
+    if (route && route?.params?.isFromCheckout) {
+      onNavigationRedirect('CheckoutPage')
+      return
+    }
+    if (route && !route?.params?.isFromCheckout){
+      onNavigationRedirect('BottomTab')
+    }
+
+  }
+
+  const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
+    (address: any, i: number, self: any) =>
+      i === self.findIndex((obj: any) => (
+        address.address === obj.address &&
+        address.address_notes === obj.address_notes &&
+        address.zipcode === obj.zipcode &&
+        address.internal_number === obj.internal_number
+      )))) || []
+
+  const checkAddress = (address: any) => {
+    if (!orderState?.options?.address) return true
+    const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
+    const values: any = []
+    props.forEach(prop => {
+      if (address[prop]) {
+        if (prop === 'location') {
+          values.push(address[prop].lat === orderState?.options?.address[prop]?.lat &&
+            address[prop].lng === orderState?.options?.address[prop]?.lng)
+        } else {
+          values.push(address[prop] === orderState?.options?.address[prop])
+        }
+      } else {
+        values.push(orderState?.options?.address[prop] === null || orderState?.options?.address[prop] === '')
+      }
+    })
+    return values.every((value: any) => value)
+  }
+
+  const addressIcon = (tag: string) => {
+    switch (tag) {
+      case 'other':
+        return 'plus'
+      case 'office':
+        return 'office-building'
+      case 'home':
+        return 'home'
+      case 'favorite':
+        return 'heart'
+      default:
+        return 'plus'
+    }
+  }
+
+  const handleSetAddress = (address: any) => {
+    if (address.id === orderState?.options?.address_id) return
+    handleSetDefault(address)
+  }
+
+  const handleSaveAddress = (address: any) => {
+    let found = false
+    const addresses = addressList.addresses.map((_address: any) => {
+      if (_address?.id === address?.id) {
+        Object.assign(_address, address)
+        found = true
+      } else if (address.default) {
+        _address.default = false
+      }
+      return _address
+    })
+    if (!found) {
+      addresses.push(address)
+    }
+    setAddressList({
+      ...addressList,
+      addresses
+    })
+  }
+
+  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+  const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
+
+  useEffect(() => {
+    if (orderState.loading && auth && orderState.options.address?.location) {
+      onNavigatorRedirect()
+    }
+  }, [orderState.options.address])
+
+  return (
+    <Container nopadding={nopadding}>
+      {(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile)) && (
+        <AddressListContainer>
+          {
+            route &&
+            (
+              route?.params?.isFromBusinesses ||
+              route?.params?.isFromCheckout ||
+              route?.params?.isFromProductsList ||
+              route?.params?.isFromProfile
+            ) &&
+            (
+              <NavBar
+                title={route?.params?.isFromProfile ? t('SAVED_PLACES', 'My saved places') : t('ADDRESS_LIST', 'Address List')}
+                titleAlign={'center'}
+                onActionLeft={() => goToBack()}
+                showCall={false}
+                btnStyle={{ paddingLeft: 0 }}
+                paddingTop={0}
+              />
+            )}
+          {addressList.loading && (
+            <>
+              {[...Array(5)].map((item, i) => (
+                <Placeholder key={i} style={{ padding: 20 }} Animation={Fade}>
+                  <View style={{ flexDirection: 'row' }}>
+                    <PlaceholderLine width={20} height={60} style={{ marginBottom: 0, marginRight: 15 }} />
+                    <Placeholder>
+                      <PlaceholderLine width={70} />
+                      <PlaceholderLine width={40} />
+                      <PlaceholderLine width={70} />
+                    </Placeholder>
+                  </View>
+                </Placeholder>
+              ))}
+            </>
+          )}
+          {
+            !addressList.error &&
+            addressList?.addresses?.length > 0 && (
+              <>
+                {uniqueAddressesList.map((address: any) => (
+                  <AddressItem
+                    key={address.id}
+                    isSelected={checkAddress(address)}
+                    onPress={() => handleSetAddress(address)}
+                  >
+                    <MaterialIcon
+                      name={addressIcon(address?.tag)}
+                      size={32}
+                      color={theme.colors.primary}
+                      style={styles.icon}
+                    />
+                    <OText style={styles.address}>{address.address}</OText>
+                    <MaterialIcon
+                      name='pencil-outline'
+                      size={28}
+                      color={theme.colors.green}
+                      onPress={() => !afterSignup ?  onNavigationRedirect(
+                        'AddressForm',
+                        {
+                          address: address,
+                          isEditing: true,
+                          addressesList: addressList,
+                          onSaveAddress: handleSaveAddress,
+                          isSelectedAfterAdd: true,
+                          isFromProductsList: isFromProductsList,
+                          hasAddressDefault: !!orderState.options?.address?.location,
+                          isFromCheckout: isFromCheckout
+                        }
+                      ) : onNavigationRedirect(
+                        'AddressFormInitial',
+                        {
+                          address: address,
+                          isEditing: true,
+                          addressesList: addressList,
+                          onSaveAddress: handleSaveAddress,
+                          isSelectedAfterAdd: true,
+                          isFromProductsList: isFromProductsList,
+                          hasAddressDefault: !!orderState.options?.address?.location
+                        })}
+                    />
+                    <MaterialIcon
+                      name='trash-can-outline'
+                      size={28}
+                      color={!checkAddress(address) ? theme.colors.primary : theme.colors.disabled}
+                      onPress={() => setAlert({
+                        show: true,
+                        title: t('DELETE_ADDRESS', 'Delete Address'),
+                        onAccept: () => {
+                          handleDelete && handleDelete(address)
+                          setAlert({ show: false })
+                        },
+                        content: [t('QUESTION_DELETE_ADDRESS', 'Are you sure to you wants delete the selected address')]
+                      })}
+                    />
+                  </AddressItem>
+                ))}
+              </>
+            )}
+          {!addressList.loading && addressList.error && (
+            addressList.error.length > 0 && (
+              <NotFoundSource
+                content={
+                  addressList.error[0]?.message ||
+                  addressList.error[0] ||
+                  t('NETWORK_ERROR', 'Network Error, please reload the app')
+                }
+                btnTitle={t('LOGIN', 'Login')}
+                onClickButton={() => logout()}
+              />
+            )
+          )}
+          {!addressList.loading && !addressList.error && (
+            <>
+              {!(
+                route && (route?.params?.isFromBusinesses || route?.params?.isFromCheckout)
+              ) && !isFromProfile && (
+                  <OText size={24}>
+                    {t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
+                  </OText>
+                )}
+              <OButton
+                text={t('ADD_NEW_ADDRESS', 'Add new Address')}
+                imgRightSrc=''
+                imgLeftSrc={addIcon}
+                bgColor={theme.colors.white}
+                imgLeftStyle={styles.buttonIcon}
+                style={styles.button}
+                borderColor={theme.colors.primary}
+                onClick={() => !afterSignup ? onNavigationRedirect(
+                  'AddressForm',
+                  {
+                    address: null,
+                    onSaveAddress: handleSaveAddress,
+                    addressesList: addressList?.addresses,
+                    nopadding: true,
+                    isSelectedAfterAdd: true,
+                    hasAddressDefault: !!orderState.options?.address?.location,
+                    isFromCheckout: isFromCheckout
+                  }) : onNavigationRedirect(
+                    'AddressFormInitial',
+                    {
+                      address: null,
+                      onSaveAddress: handleSaveAddress,
+                      addressesList: addressList?.addresses,
+                      nopadding: true,
+                      isSelectedAfterAdd: true,
+                      hasAddressDefault: !!orderState.options?.address?.location})}
+              />
+            </>
+          )}
+          {!isFromProfile && addressList?.addresses?.length > 0 && (
+            <OButton
+              text={t('CONTINUE', 'Continue')}
+              style={styles.button}
+              onClick={() => onNavigatorRedirect()}
+              textStyle={{ color: theme.colors.white }}
+            />
+          )}
+        </AddressListContainer>
+      )}
+      <OAlert
+        open={alert.show}
+        title={alert.title}
+        onAccept={alert.onAccept}
+        onClose={() => setAlert({ show: false })}
+        onCancel={() => setAlert({ show: false })}
+        content={alert.content}
+      />
+    </Container>
+  )
+}
+
+export const AddressList = (props: AddressListParams) => {
+  const addressListProps = {
+    ...props,
+    UIComponent: AddressListUI
+  }
+  return <AddressListController {...addressListProps} />
+}