ordering-ui-external 14.1.49 → 14.1.52

package/src/themes/callcenterOriginal/src/components/ConfirmAddressForm/index.js

@@ -0,0 +1,579 @@
+import React, { useState, useEffect, useRef } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import CgSearchLoading from '@meronex/icons/cg/CgSearchLoading'
+import {
+  Heart,
+  Building,
+  PlusLg,
+  House,
+  GeoAlt
+} from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import { useForm } from 'react-hook-form'
+import {
+  AddressForm as AddressFormController,
+  GoogleAutocompleteInput,
+  useLanguage,
+  GoogleMapsMap,
+  useSession,
+  useOrder,
+  useConfig
+} from 'ordering-components-external'
+import { Alert } from '../Confirm'
+import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'
+import {
+  FormControl,
+  FormActions,
+  AddressWrap,
+  WrapAddressInput,
+  AddressTagSection,
+  WrapperMap,
+  WrapperSkeleton,
+  AddressMarkContainer,
+
+  AddressFormContainer
+} from './styles'
+
+import { Button } from '../../styles/Buttons'
+import { Input, TextArea } from '../../styles/Inputs'
+
+const ConfirmAddressFormUI = (props) => {
+  const {
+    addressesList,
+    googleMapsControls,
+    formState,
+    addressState,
+    isRequiredField,
+    showField,
+    updateChanges,
+    handleChangeInput,
+    saveAddress,
+    setIsEdit,
+    userCustomerSetup
+  } = props
+
+  const [configState] = useConfig()
+  const [orderState] = useOrder()
+  const [, t] = useLanguage()
+  const formMethods = useForm()
+  const [{ auth }] = useSession()
+  const theme = useTheme()
+
+  const [addressTag, setAddressTag] = useState(addressState?.address?.tag)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [addressValue, setAddressValue] = useState(formState.changes?.address ?? addressState.address?.address ?? '')
+  const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({ value: null })
+  const [geolocationState, setGeolocationState] = useState({ result: null, error: false })
+  const isEditing = !!addressState.address?.id
+  const googleInputRef = useRef()
+
+  const [locationChange, setLocationChange] = useState(
+    isEditing
+      ? addressState?.address?.location
+      : formState.changes?.location ?? null
+  )
+  const isHideMap = theme?.address?.components?.map?.hidden
+  const isHideIcons = theme?.address?.components?.icons?.hidden
+  const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
+  const isLocationRequired = configState.configs?.google_autocomplete_selection_required?.value === '1' ||
+    configState.configs?.google_autocomplete_selection_required?.value === 'true'
+
+  const mapErrors = {
+    ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
+    ERROR_MAX_LIMIT_LOCATION: `Sorry, You can only set the position to ${maxLimitLocation}m`
+  }
+
+  const inputNames = [
+    { name: 'address', code: 'Address' },
+    { name: 'internal_number', code: 'Internal number' },
+    { name: 'zipcode', code: 'Zipcode' },
+    { name: 'address_notes', code: 'Address notes' }
+  ]
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  /**
+   * Returns true when the user made no changes
+   * @param {object} address
+   */
+  const checkAddress = (address, addressToCompare) => {
+    const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
+    const values = []
+    props.forEach(prop => {
+      if (addressToCompare[prop]) {
+        if (prop === 'location') {
+          values.push(address[prop]?.lat === addressToCompare[prop]?.lat &&
+            address[prop]?.lng === addressToCompare[prop]?.lng)
+        } else {
+          values.push(address[prop] === addressToCompare[prop])
+        }
+      } else {
+        values.push(!address[prop])
+      }
+    })
+    return values.every(value => value)
+  }
+
+  const getAddressFormatted = (addressChange) => {
+    const data = { address: null, error: null }
+    const geocoder = window.google && new window.google.maps.Geocoder()
+    if (geocoder) {
+      geocoder.geocode({ address: addressChange }, (results, status) => {
+        let postalCode = null
+        if (status === 'OK' && results && results.length > 0) {
+          for (const component of results?.[0].address_components) {
+            const addressType = component.types?.[0]
+            if (addressType === 'postal_code') {
+              postalCode = component.short_name
+              break
+            }
+          }
+          data.address = {
+            address: addressChange,
+            location: { lat: results?.[0].geometry.location.lat(), lng: results?.[0].geometry.location.lng() },
+            utc_offset: results?.[0].utc_offset_minutes ?? 0,
+            map_data: {
+              library: 'google',
+              place_id: results?.[0].place_id
+            }
+          }
+          if (postalCode) {
+            data.address.zipcode = postalCode
+          }
+          const arrayList = isEditing
+            ? addressesList.filter(address => address.id !== addressState.address?.id) || []
+            : addressesList || []
+          const addressToCompare = isEditing
+            ? { ...addressState.address, ...data.address, ...formState?.changes }
+            : { ...data.address, ...formState?.changes }
+
+          const isAddressAlreadyExist = arrayList.map(address => checkAddress(address, addressToCompare)).some(value => value) ?? false
+          if (!isAddressAlreadyExist) {
+            saveAddress(data.address, userCustomerSetup)
+            return
+          }
+
+          setAlertState({
+            open: true,
+            content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')]
+          })
+        } else {
+          setAlertState({
+            open: true,
+            content: [t('ERROR_NOT_FOUND_ADDRESS', 'Error, address not found')]
+          })
+        }
+      })
+    } else {
+      setAlertState({
+        open: true,
+        content: [t('ERROR_FAILED_LOAD_GEOCODER', 'Failed to load geocoder, please try again.')]
+      })
+    }
+  }
+
+  const checkKeyDown = (e) => {
+    const keyCode = e.keyCode ? e.keyCode : e.which
+    if (keyCode === 13) { e.preventDefault() }
+  }
+
+  const showFieldWithTheme = (name) => {
+    return !theme?.address?.components?.[name]?.hidden
+  }
+
+  const onSubmit = async () => {
+    if (!auth && formState?.changes?.address === '' && addressState?.address?.address) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_ADDRESS_REQUIRED', 'The field Address is required')]
+      })
+      setLocationChange(null)
+      return
+    }
+
+    if (formState?.changes?.address && !formState?.changes?.location) {
+      if (isLocationRequired) {
+        setAlertState({
+          open: true,
+          content: [t('ADDRESS_REQUIRE_LOCATION', 'The address needs a location, please select one of the suggested')]
+        })
+        return
+      }
+      getAddressFormatted(formState?.changes?.address)
+      return
+    }
+
+    const arrayList = isEditing
+      ? addressesList?.filter(address => address?.id !== addressState?.address?.id) || []
+      : addressesList || []
+    const addressToCompare = isEditing
+      ? { ...addressState.address, ...formState.changes }
+      : formState?.changes
+
+    const isAddressAlreadyExist = arrayList.map(address => checkAddress(address, addressToCompare)).some(value => value) ?? false
+
+    if (!isAddressAlreadyExist) {
+      await saveAddress({}, userCustomerSetup)
+      setAlertState({
+        open: true,
+        content: [t('ADDRESS_CAN_CLOSE_PAGE', 'Your address has been added, you can now close this page')]
+      })
+      return
+    }
+
+    setAlertState({
+      open: true,
+      content: [t('ADDRESS_ALREADY_EXIST', 'The address already exists')]
+    })
+  }
+
+  const handleAddressTag = (tag) => {
+    setAddressTag(tag)
+    handleChangeInput({
+      target: {
+        name: 'tag',
+        value: tag
+      }
+    })
+  }
+
+  const handleChangeAddress = async (address, isGps) => {
+    updateChanges({
+      ...address,
+      address: isGps ? address?.address : googleInputRef?.current?.value || address?.address
+    })
+    if (isGps && googleInputRef.current) {
+      googleInputRef.current.value = address?.address
+    }
+    setGeolocationState({ result: 'OK', error: null })
+  }
+
+  const setMapErrors = (errKey) => {
+    setAlertState({
+      open: true,
+      content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION')
+        ? [t(errKey, mapErrors[errKey])]
+        : `${[t(errKey, mapErrors[errKey])]} ${maxLimitLocation} ${[t('METTERS', 'meters')]}`
+    })
+  }
+
+  const onErrorGps = (error) => {
+    setGeolocationState({ result: null, error })
+  }
+
+  useEffect(() => {
+    if (!auth) {
+      setLocationChange(formState?.changes?.location ?? orderState?.options?.address?.location ?? '')
+      setAddressValue(formState?.changes?.address ?? orderState?.options?.address?.address ?? '')
+      inputNames.forEach(field =>
+        formMethods.setValue(
+          field.name,
+          formState?.changes[field.name] ||
+          (orderState?.options?.address && orderState?.options?.address[field.name]) ||
+          ''
+        )
+      )
+      return
+    }
+
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+
+    setAddressValue(formState?.changes?.address ?? addressState.address?.address ?? '')
+    formMethods.setValue('address', formState?.changes?.address ?? addressState.address?.address ?? '')
+    if (!isEditing) {
+      inputNames.forEach(field => formMethods.setValue(field.name, formState?.changes[field.name] || ''))
+      formState?.changes?.address && setLocationChange(formState?.changes?.location)
+      if (
+        formState?.changes?.address &&
+        formState?.changes?.address !== firstLocationNoEdit?.address &&
+        formState?.changes?.location &&
+        formState?.changes?.location?.lat !== firstLocationNoEdit.value?.lat &&
+        formState?.changes?.location?.lng !== firstLocationNoEdit.value?.lng
+      ) {
+        setFirstLocationNoEdit({
+          value: formState?.changes?.location,
+          address: formState?.changes?.address
+        })
+      }
+    }
+
+    if (isEditing) {
+      if (formState?.changes?.location) {
+        const prevLocation = { lat: Math.trunc(locationChange?.lat), lng: Math.trunc(locationChange?.lng) }
+        const newLocation = { lat: Math.trunc(formState?.changes?.location?.lat), lng: Math.trunc(formState?.changes?.location?.lng) }
+        if (prevLocation.lat !== newLocation.lat && prevLocation.lng !== newLocation.lng) {
+          setLocationChange(formState?.changes?.location)
+        }
+      }
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (isEditing) {
+      setIsEdit && setIsEdit(true)
+      setAddressValue(addressState.address?.address)
+    } else {
+      setIsEdit && setIsEdit(false)
+    }
+  }, [addressState])
+
+  useEffect(() => {
+    if (!auth) {
+      setLocationChange(formState?.changes?.location ?? orderState?.options?.address?.location ?? '')
+    }
+
+    return () => {
+      setFirstLocationNoEdit({ value: null })
+    }
+  }, [])
+
+  /** Form events control */
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map(error => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  useEffect(() => {
+    inputNames.forEach(field => {
+      formMethods.register(field.name, {
+        required: isRequiredField(field.name)
+          ? t(`VALIDATION_ERROR_${field.name}_REQUIRED`, `The field ${field.code} is required`)
+          : null
+      })
+      formMethods.setValue(field.name, formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? '')
+    })
+  }, [formMethods])
+
+  useEffect(() => {
+    if (!window.navigator?.geolocation) {
+      setGeolocationState({ result: null, error: t('GEOLOCATION_NOT_SUPPORTED_BROWSER', 'Geolocation not supported in your browser') })
+    }
+  }, [navigator?.geolocation])
+
+  return (
+    <AddressFormContainer>
+      <h1>
+        {t('ADD_YOUR_ADDRESS', 'Add your address')}
+      </h1>
+      <div className='address-form'>
+        {(configState.loading || addressState.loading) && (
+          <WrapperSkeleton>
+            <Skeleton height={50} count={5} style={{ marginBottom: '10px' }} />
+          </WrapperSkeleton>
+        )}
+
+        {!configState.loading && !addressState.loading && (
+          <div>
+            <FormControl
+              onSubmit={formMethods.handleSubmit(onSubmit)}
+              onKeyDown={(e) => checkKeyDown(e)}
+              autoComplete='off'
+            >
+              {inputNames.map(field => showField && showField(field.name) && (
+                field.name === 'address' ? (
+                  <React.Fragment key={field.name}>
+                    <AddressWrap className='google-control'>
+                      <WrapAddressInput>
+                        {!(addressState?.address?.location || formState?.changes?.location) && (
+                          <>
+                            {!geolocationState?.result && !geolocationState?.error && (
+                              <AddressMarkContainer>
+                                <p>
+                                  {t('GEOCALITION_PLEASE_ACCEPT_PERMISSIONS', 'We are geolocating you, please accept the permissions')}
+                                </p>
+                              </AddressMarkContainer>
+                            )}
+                            {geolocationState?.error && (
+                              <AddressMarkContainer error>
+                                <p>
+                                  {geolocationState?.error}
+                                </p>
+                              </AddressMarkContainer>
+                            )}
+                          </>
+                        )}
+                        <GoogleAutocompleteInput
+                          className='input-autocomplete'
+                          apiKey={googleMapsApiKey}
+                          placeholder={t('ADDRESS', 'Address')}
+                          onChangeAddress={(e) => {
+                            formMethods.setValue('address', e.address)
+                            handleChangeAddress(e)
+                          }}
+                          onChange={(e) => {
+                            handleChangeInput({ target: { name: 'address', value: e.target.value } })
+                            setAddressValue(e.target.value)
+                          }}
+                          childRef={(ref) => {
+                            googleInputRef.current = ref
+                          }}
+                          defaultValue={
+                            formState?.result?.result
+                              ? formState?.result?.result?.address
+                              : formState?.changes?.address ?? addressValue
+                          }
+                          autoComplete='new-password'
+                          countryCode={configState?.configs?.country_autocomplete?.value || '*'}
+                        />
+                      </WrapAddressInput>
+                      <GoogleGpsButton
+                        enableAutoGeolocation
+                        className='gps-button'
+                        apiKey={googleMapsApiKey}
+                        onAddress={(e) => {
+                          formMethods.setValue('address', e.address)
+                          handleChangeAddress(e, true)
+                        }}
+                        onError={onErrorGps}
+                        IconButton={GeoAlt}
+                        IconLoadingButton={CgSearchLoading}
+                        geolocationState={geolocationState}
+                        location={addressState?.address?.location || formState?.changes?.location}
+                      />
+                    </AddressWrap>
+
+                    <WrapperMap height={Math.ceil(window.innerHeight * 0.31)}>
+                      {!isHideMap && locationChange && (addressState?.address?.location || formState?.changes?.location) ? (
+                        <GoogleMapsMap
+                          apiKey={googleMapsApiKey}
+                          location={locationChange}
+                          fixedLocation={!isEditing ? firstLocationNoEdit.value : null}
+                          mapControls={googleMapsControls}
+                          handleChangeAddressMap={handleChangeAddress}
+                          setErrors={setMapErrors}
+                          maxLimitLocation={parseInt(maxLimitLocation, 10)}
+                        />
+                      ) : (
+                        <Skeleton height={Math.ceil(window.innerHeight * 0.31)} />
+                      )}
+                    </WrapperMap>
+                  </React.Fragment>
+                ) : (
+                  <React.Fragment key={field.name}>
+                    {(isRequiredField(field.name) || showFieldWithTheme(field.name)) && (
+                      <>
+                        {field.name !== 'address_notes' ? (
+                          <Input
+                            className={field.name}
+                            placeholder={t(field.name.toUpperCase(), field.code)}
+                            value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
+                            onChange={(e) => {
+                              formMethods.setValue(field.name, e.target.value)
+                              handleChangeInput({ target: { name: field.name, value: e.target.value } })
+                            }}
+                            autoComplete='new-field'
+                            maxLength={30}
+                          />
+                        ) : (
+                          <TextArea
+                            rows={3}
+                            placeholder={t('ADDRESS_NOTES', 'Address Notes')}
+                            value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
+                            onChange={(e) => {
+                              formMethods.setValue('address_notes', e.target.value)
+                              handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
+                            }}
+                            autoComplete='new-field'
+                            maxLength={250}
+                          />
+                        )}
+                      </>
+                    )}
+                  </React.Fragment>
+                )
+              ))}
+
+              {!formState.loading && formState.error && <p style={{ color: '#c10000' }}>{formState.error}</p>}
+              {!isHideIcons && (
+                <AddressTagSection>
+                  <Button className={addressTag === 'home' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('home')}>
+                    <span><House /></span>
+                  </Button>
+                  <Button className={addressTag === 'office' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('office')}>
+                    <span><Building /></span>
+                  </Button>
+                  <Button className={addressTag === 'favorite' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('favorite')}>
+                    <span><Heart /></span>
+                  </Button>
+                  <Button className={addressTag === 'other' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('other')}>
+                    <span><PlusLg /></span>
+                  </Button>
+                </AddressTagSection>
+              )}
+              <FormActions>
+                {Object.keys(formState?.changes).length > 0 && (
+                  <Button
+                    id='submit-btn'
+                    type='submit'
+                    disabled={formState.loading}
+                    color='primary'
+                  >
+                    {!formState.loading ? (
+                      <>
+                        {t('ADD_ADDRESS', 'Add address')}
+                      </>
+                    ) : (
+                      t('LOADING', 'Loading')
+                    )}
+                  </Button>
+                )}
+              </FormActions>
+            </FormControl>
+          </div>
+        )}
+
+        <Alert
+          title={t('ADDRESS', 'Address')}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </div>
+
+    </AddressFormContainer>
+  )
+}
+
+export const ConfirmAddressForm = (props) => {
+  const googleMapsControls = {
+    defaultZoom: 17,
+    zoomControl: true,
+    streetViewControl: false,
+    fullscreenControl: false,
+    mapTypeId: 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain'
+    mapTypeControl: true,
+    mapTypeControlOptions: {
+      mapTypeIds: ['roadmap', 'satellite']
+    },
+    isMarkerDraggable: true
+  }
+  const addressFormProps = {
+    ...props,
+    UIComponent: ConfirmAddressFormUI,
+    googleMapsControls,
+    isSelectedAfterAdd: false,
+    confirmAddress: true,
+    avoidRefreshUserInfo: true
+  }
+
+  return <AddressFormController {...addressFormProps} />
+}