ordering-ui-external 10.0.0 → 10.1.0

package/src/themes/callcenterOriginal/src/components/Orders/AddressForm/styles.js

@@ -0,0 +1,200 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const FormActions = styled.div`
+  margin-top: 20px;
+  padding: 10px 0px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  button {
+    height: 42px;
+  }
+`
+
+export const FormControl = styled.form`
+  padding: 0px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  input {
+    box-sizing: border-box;
+    height: 43px;
+    width: 100%;
+    &::placeholder{
+      color: #B1BCCC;
+    }
+  }
+
+  textarea {
+    width: 100%;
+  }
+
+  .input-autocomplete {
+    width: 100%;
+    background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+    border: 1px solid #DEE2E6;
+    border-radius: 8px;
+    font-size: 14px;
+    padding: 7px 15px;
+    outline: none;
+    color: ${props => props.theme.colors.headingColor};
+    ::placeholder {
+      color: #B1BCCC;
+    }
+
+    &:-ms-input-placeholder {
+      color: #B1BCCC;
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: #B1BCCC;
+    }
+    &:focus {
+      border-color: ${() => darken(0.07, '#CCC')};
+    }
+  }
+
+  @media (min-width: 481px) {
+    padding: 10px 0;
+  }
+`
+
+export const AddressWrap = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+`
+
+export const WrapAddressInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  i {
+    padding: 0px 10px;
+  }
+
+  svg {
+    position: absolute;
+    color: #9A9A9A;
+    top: 11px;
+    left: 10px;
+    font-size: 20px;
+    ${props => props.theme?.rtl && css`
+      right: 10px;
+      left: initial;
+    `}
+  }
+
+  input {
+    background-position: left 10px center !important;
+    background-repeat: no-repeat !important;
+    background-size: 13px !important;
+    padding: 7px 15px 7px 30px !important;
+    ${props => props.theme?.rtl && css`
+      padding: 7px 30px 7px 15px !important;
+    `}
+  }
+`
+
+export const AddressTagSection = styled.div`
+  width: 100%;
+  margin: 30px 0px;
+  display: flex;
+  justify-content: space-between;
+`
+
+export const WrapperMap = styled.div`
+  width: 100%;
+  height: 200px;
+  margin-bottom: 20px;
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 8px;
+  }
+`
+
+export const WrapperSkeleton = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+
+  span {
+    width: 100%;
+  }
+`
+
+export const Title = styled.div`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${props => props.theme.colors.headingColor};
+  text-align: initial;
+  text-transform: capitalize;
+  margin-bottom: 10px;
+`
+
+export const CloseButtonWrapper = styled.span`
+  position: fixed;
+  cursor: pointer;
+  top: 20px;
+  ${props => props.theme?.rtl ? css`
+    left: 20px;
+  ` : css`
+    right: 20px;
+  `}
+`
+
+export const WrapInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  &.address_notes {
+    width: 100%;
+  }
+
+  &.internal_number,
+  &.zipcode {
+    width: 100%;
+  }
+  @media (min-width: 621px) {
+    &.internal_number,
+    &.zipcode  {
+      width: 48%;
+    }
+  }
+`
+
+export const InputText = styled.label`
+  color: ${props => props.theme.colors.headingColor};
+  font-size: 14px;
+  margin: 30px 0 7px 0;
+`
+
+export const TagButton = styled.button`
+  color: ${props => props.theme.colors.disabled};
+  border-radius: 8px;
+  outline: none;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  padding: 10px 15px;
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.secundaryDarkContrast};
+    color: ${props => props.theme.colors.secundaryDark};
+  `}
+
+  svg {
+    font-size: 16px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 10px;
+    ` : css`
+      margin-right: 10px;
+    `}
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/AddressList/index.js

@@ -0,0 +1,327 @@
+import React, { useState, useEffect } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import VscTrash from '@meronex/icons/vsc/VscTrash'
+import IosRadioButtonOn from '@meronex/icons/ios/IosRadioButtonOn'
+import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
+import {
+  Pencil,
+  HouseDoor,
+  Building,
+  SuitHeart,
+  PlusLg
+} from 'react-bootstrap-icons'
+
+import {
+  AddressList as AddressListController,
+  useLanguage,
+  useOrder,
+  useCustomer
+} from 'ordering-components-external'
+
+import {
+  AddressListContainer,
+  AddressListUl,
+  AddressItem,
+  AddressItemActions,
+  WrappNotAddresses,
+  FormActions,
+  ContinueButton,
+  WrapperAddressForm
+} from './styles'
+
+import { Confirm, NotFoundSource } from '../../Shared'
+import { Button } from '../../../styles/Buttons'
+import { AddressForm } from '../AddressForm'
+import { useTheme } from 'styled-components'
+import { scrollTo } from '../../../../../../utils'
+
+const AddressListUI = (props) => {
+  const {
+    actionStatus,
+    addressList,
+    handleDelete,
+    setAddressList,
+    handleSetDefault,
+    isModal,
+    isSeletectedUserAddresses,
+    isPopover,
+    isProductForm,
+    onCancel,
+    onAccept,
+    userId,
+    userCustomerSetup,
+    isEnableContinueButton,
+    setCustomerModalOpen,
+    setExtraOpen,
+    userState,
+    handleSuccessUpdate
+  } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+
+  const [curAddress, setCurAddress] = useState(false)
+  const [addressOpen, setAddressOpen] = useState(false)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const theme = useTheme()
+  const [{ user }] = useCustomer()
+
+  const [uniqueAddressesList, setUniqueAddressesList] = useState([])
+
+  const openAddress = (address) => {
+    setCurAddress(address)
+    setAddressOpen(true)
+    const container = window.document.getElementsByClassName('form_edit')[0]
+    container && scrollTo(container, 0, 500)
+  }
+
+  const handleSaveAddress = (address) => {
+    let found = false
+    const addresses = addressList.addresses.map(_address => {
+      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)
+      setAddressOpen(false)
+    }
+    setAddressList({
+      ...addressList,
+      addresses
+    })
+    if (handleSuccessUpdate) {
+      const updatedUser = { ...userState.user, addresses: addresses }
+      handleSuccessUpdate(updatedUser)
+    }
+    if (userCustomerSetup) {
+      handleSetAddress(address)
+    }
+  }
+
+  const handleSetAddress = (address) => {
+    if (checkAddress(address) && userCustomerSetup?.id === user?.id) {
+      setCustomerModalOpen && setCustomerModalOpen(false)
+      return
+    }
+    setAddressOpen(false)
+    handleSetDefault(address, userCustomerSetup)
+  }
+
+  const handleDeleteClick = (address) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ADDRESS', 'Are you sure that you want to delete the address?'),
+      handleOnAccept: () => {
+        handleDelete(address)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const checkAddress = (address) => {
+    const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
+    const values = []
+    if (userCustomerSetup) {
+      return address.default
+    }
+    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 => value)
+  }
+
+  /**
+   * Close modals and alerts
+   */
+  useEffect(() => {
+    return () => {
+      setConfirm({ ...confirm, open: false })
+      setAddressOpen(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    setExtraOpen && setExtraOpen(addressOpen)
+  }, [addressOpen])
+
+  useEffect(() => {
+    if (addressList.loading) return
+    const _uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
+      (address, i, self) =>
+        i === self.findIndex(obj => (
+          address.address === obj.address &&
+          address.address_notes === obj.address_notes &&
+          address.zipcode === obj.zipcode &&
+          address.internal_number === obj.internal_number
+        )))) || []
+    setUniqueAddressesList(_uniqueAddressesList)
+  }, [addressList])
+
+  return (
+    <>
+      <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading}>
+        {
+          (!isPopover || !addressOpen) && (
+            <Button
+              borderRadius='8px'
+              className='add'
+              color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'lightPrimary'}
+              onClick={() => openAddress({})}
+              disabled={orderState?.loading || actionStatus.loading}
+            >
+              {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add new address')}
+            </Button>
+          )
+        }
+
+        {
+          !addressList.loading &&
+          !actionStatus.loading &&
+          !orderState.loading &&
+          !addressList.error &&
+          addressList?.addresses?.length > 0 &&
+          typeof orderState.options?.address === 'object' &&
+          ((!addressOpen && isPopover) || isModal || isSeletectedUserAddresses) && (
+            <AddressListUl id='list'>
+              {uniqueAddressesList.map(address => (
+                <AddressItem key={address?.id}>
+                  <div className='wrapAddress' onClick={() => handleSetAddress(address)}>
+                    <span className='radio'>
+                      {address?.default ? <IosRadioButtonOn color={theme.colors.primary} /> : <IosRadioButtonOff />}
+                    </span>
+                    <span className='tag'>
+                      {address?.tag === 'home' && <HouseDoor />}
+                      {address?.tag === 'office' && <Building />}
+                      {address?.tag === 'favorite' && <SuitHeart />}
+                      {(address?.tag === 'other' || !address?.tag) && <PlusLg />}
+                    </span>
+                    <div className='address'>
+                      <span>{address.address}</span>
+                      <span>{address.internal_number} {address.zipcode}</span>
+                    </div>
+                  </div>
+                  <AddressItemActions className='form'>
+                    <a className={actionStatus.loading ? 'disabled' : ''} onClick={() => openAddress(address)}>
+                      <Pencil />
+                    </a>
+                    <a className={actionStatus.loading || address.default ? 'disabled' : ''} onClick={() => handleDeleteClick(address)}>
+                      <VscTrash />
+                    </a>
+                  </AddressItemActions>
+                </AddressItem>
+              ))}
+              {isEnableContinueButton && uniqueAddressesList.map(address => address.default && (
+                <ContinueButton key={address.id}>
+                  <Button color='primary' onClick={() => handleSetAddress(address)}>
+                    {t('CONTINUE_WITH', 'Continue with')}: {address.address}
+                  </Button>
+                </ContinueButton>
+              ))}
+            </AddressListUl>
+          )
+        }
+
+        {!(addressList.loading || actionStatus.loading || orderState.loading) &&
+          !addressList.error &&
+          addressList?.addresses?.length === 0 &&
+          !isProductForm &&
+        (
+          <WrappNotAddresses>
+            <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='112px' loading='lazy' />
+            <h1>{t('NOT_FOUND_ADDRESS', 'Sorry, You don\'t seem to have any addresses.')}</h1>
+          </WrappNotAddresses>
+        )}
+
+        {!(addressList.loading || actionStatus.loading || orderState.loading) && addressList.error && (
+          addressList.error.length > 0 && (
+            <NotFoundSource
+              content={addressList.error[0]?.message || addressList.error[0]}
+            />
+          )
+        )}
+
+        {!(addressList.loading || actionStatus.loading || orderState.loading) && (typeof orderState.options?.address !== 'object') && !addressList.error && (
+          <NotFoundSource
+            content={t('NETWORK_ERROR', 'Network error, please reload the page')}
+          />
+        )}
+
+        {(addressList.loading || actionStatus.loading || orderState.loading) && !isProductForm && (
+          <AddressListUl>
+            <Skeleton height={50} count={3} style={{ marginBottom: '10px' }} />
+          </AddressListUl>
+        )}
+
+        {onCancel && onAccept && typeof orderState.options?.address === 'object' && (
+          <FormActions>
+            <Button
+              outline
+              type='button'
+              disabled={(addressList.loading || actionStatus.loading || orderState.loading)}
+              onClick={() => onCancel()}
+            >
+              {t('CANCEL', 'Cancel')}
+            </Button>
+            <Button
+              disabled={(addressList.loading || actionStatus.loading || orderState.loading)}
+              id='second-btn'
+              color='primary'
+              onClick={() => onAccept()}
+            >
+              {t('ACCEPT', 'Accept')}
+            </Button>
+          </FormActions>
+        )}
+
+        <Confirm
+          title={t('SEARCH', 'Search')}
+          content={confirm.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={confirm.open}
+          onClose={() => setConfirm({ ...confirm, open: false })}
+          onCancel={() => setConfirm({ ...confirm, open: false })}
+          onAccept={confirm.handleOnAccept}
+          closeOnBackdrop={false}
+        />
+      </AddressListContainer>
+
+      {addressOpen && isSeletectedUserAddresses && (
+        <WrapperAddressForm>
+          <AddressForm
+            isSeletectedUserAddresses
+            userId={userId}
+            addressesList={addressList?.addresses}
+            useValidationFileds
+            address={curAddress}
+            onCancel={() => setAddressOpen(false)}
+            onSaveAddress={handleSaveAddress}
+            userCustomerSetup={userCustomerSetup}
+          />
+        </WrapperAddressForm>
+      )}
+    </>
+  )
+}
+
+export const AddressList = (props) => {
+  const addressListProps = {
+    ...props,
+    UIComponent: AddressListUI
+  }
+
+  return <AddressListController {...addressListProps} />
+}

package/src/themes/callcenterOriginal/src/components/Orders/AddressList/styles.js

@@ -0,0 +1,198 @@
+import styled, { css } from 'styled-components'
+
+export const AddressListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${({ isLoading }) => isLoading && css`
+    pointer-events: none;
+  `}
+
+  button.add {
+    height: 42px;
+  }
+`
+
+export const AddressListUl = styled.ul`
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin-top: 40px;
+`
+
+export const AddressItem = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0px;
+
+  label {
+    font-size: 15px;
+    margin-left: 5px;
+    font-weight: bold;
+    ${props => props.theme?.rtl && css`
+      margin-right: 5px;
+      margin-left: 0;
+  `}
+  }
+
+  .wrapAddress {
+    display: flex;
+    align-items: center;
+
+    span {
+      color: ${props => props.theme.colors.headingColor};
+      svg {
+        color: ${props => props.theme.colors.disabled};
+      }
+      font-size: 14px;
+      display: flex;
+      cursor: pointer;
+      margin-right: 15px;
+      ${props => props.theme?.rtl && css`
+        margin-left: 15px;
+        margin-right: 0px;
+      `}
+      &.radio {
+        color: ${props => props.theme.colors.primary};
+        font-size: 24px;
+      }
+    }
+  }
+
+  .address {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.5;
+    span {
+      text-align: initial;
+
+      &:last-child {
+        font-size: 10px;
+        color: ${props => props.theme.colors.disabled};
+      }
+    }
+  }
+`
+
+export const AddressItemActions = styled.div`
+  display: flex;
+  align-items: center;
+  a {
+    display: flex;
+    cursor: pointer;
+    margin: 0px 5px;
+    font-size: 20px;
+
+    &:nth-child(1) {
+      svg {
+        font-size: 16px;
+        color: #03459E;
+      }
+    }
+
+    &:nth-child(2) {
+      svg {
+        font-size: 16px;
+        color: #D81212;
+      }
+    }
+  }
+  a.disabled {
+    svg {
+      color: #CCC;
+    }
+    pointer-events: none;
+  }
+`
+
+export const WrappNotAddresses = styled.div`
+  height: 270px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  margin: 20px auto 10px;
+
+  img {
+    width: 200px;
+    height: auto;
+    aspect-ratio: attr(width) / attr(height)
+  }
+  h1 {
+    margin: 5px 0px 0px;
+    opacity: 0.5;
+    text-align: center;
+    font-size: 24px;
+  }
+`
+
+export const FormActions = styled.div`
+  padding: 10px 0px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  button {
+    height: 45px;
+    flex: 1;
+
+    &:last-child#second-btn {
+      margin-left: 10px;
+      ${props => props.theme?.rtl && css`
+        margin-left: 0;
+        margin-right: 10px;
+      `}
+    }
+  }
+
+  @media (min-width: 769px) {
+    button {
+      &:last-child#second-btn {
+        margin-left: 25px;
+        ${props => props.theme?.rtl && css`
+          margin-left: 0;
+          margin-right: 25px;
+      `}
+      }
+    }
+  }
+`
+
+export const ContinueButton = styled.div`
+  width: 100%;
+  position: sticky;
+  bottom: 1px;
+  
+  button {
+    width: 100%;
+    white-space: nowrap;
+    height: 50px;
+  }
+`
+
+export const WrapperAddressForm = styled.div`
+  position: fixed;
+  top: 0px;
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+  ` : css`
+    right: 0px;
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100);
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 25px 20px;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+
+  @media (min-width: 500px) {
+    width: 500px;
+  }
+`