ordering-ui-external 10.0.1 → 10.2.0

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectCustomer/index.js

@@ -0,0 +1,240 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, useConfig, useCustomer } from 'ordering-components-external'
+import { UserAddForm } from '../../UserAddForm'
+import { AddressList } from '../../AddressList'
+import { Dot, HouseDoor } from 'react-bootstrap-icons'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
+import { SideBar } from '../../../Shared'
+import { Button, Input, LinkButton } from '../../../../styles'
+import {
+  SectionContainer,
+  SearchBarContainer,
+  SearchBarWrapper,
+  OptionsToSelectContainer,
+  SelectOption,
+  WrapperImage,
+  SelectedUserWrapper,
+  CustomerAddressWrapper,
+  SavedPlaces,
+  AddressListWrapper
+} from './styles'
+
+export const SelectCustomer = (props) => {
+  const {
+    phone,
+    customersPhones,
+    selectedUser,
+    setSelectedUser,
+    onChangeNumber,
+    handleParentSidebarMove,
+    customerAddress
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+  const [, { setUserCustomer }] = useCustomer()
+
+  const [searchInputFocus, setSearchInputFocus] = useState(false)
+  const [showSearchbar, setShowSearchbar] = useState(true)
+  const [openSidebar, setOpenSidebar] = useState(null)
+  const [openExtraAdddress, setOpenExtraAddress] = useState(false)
+
+  let timeout = null
+  const onInputChange = (inputValue) => {
+    if (inputValue && inputValue.length > 10) {
+      return
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(function () {
+      onChangeNumber(inputValue)
+    }, 750)
+  }
+
+  const onSelectUser = (user) => {
+    setUserCustomer(user, true)
+    setSelectedUser(user)
+    setShowSearchbar(false)
+  }
+
+  const handleOpenAddForm = () => {
+    setOpenSidebar('user_add_form')
+    handleParentSidebarMove(500)
+  }
+
+  const handleCloseSidebar = () => {
+    setOpenSidebar(null)
+    handleParentSidebarMove(0)
+  }
+
+  const onPhoneNumberPaste = (event) => {
+    event.preventDefault()
+    const pastedValue = event.clipboardData.getData('text/plain')
+    const trimmedValue = pastedValue.replace(/\D/g, '')
+    document.execCommand('insertText', false, trimmedValue)
+    onChangeNumber(trimmedValue)
+  }
+
+  return (
+    <>
+      <SectionContainer>
+        <h3>{t('CUSTOMER', 'Customer')}</h3>
+        <p>{t('SEARCH_WITH_PHONE_FOR_CUSTOM_ORDER', 'Search with the phone the customer who will assign the custom order.')}</p>
+        <SearchBarContainer>
+          {showSearchbar ? (
+            <SearchBarWrapper>
+              <Input
+                placeholder={t('PHONE_NUMBER', 'Phone number')}
+                onChange={e => onInputChange(e.target.value)}
+                defaultValue={phone}
+                onKeyPress={(e) => {
+                  if (!/^[0-9]$/.test(e.key) || e.target.value.length >= 10) {
+                    e.preventDefault()
+                  }
+                }}
+                onFocus={() => setSearchInputFocus(true)}
+                onBlur={() => {
+                  setTimeout(() => {
+                    setSearchInputFocus(false)
+                  }, 300)
+                }}
+                onPaste={(event) => onPhoneNumberPaste(event)}
+              />
+              {customersPhones.loading && (
+                <span className='loading'>
+                  <CgSpinnerTwoAlt />
+                </span>
+              )}
+              {searchInputFocus && (
+                <OptionsToSelectContainer>
+                  {customersPhones?.users?.length > 0 ? (
+                    <>
+                      {customersPhones?.users?.map(user => (
+                        <SelectOption
+                          key={user.id}
+                          onClick={() => onSelectUser(user)}
+                        >
+                          <span>{user?.cellphone || user?.phone}</span>
+                          <Dot />
+                          <WrapperImage>
+                            {user?.photo ? (
+                              <img src={optimizeImage(user?.photo, 'h_50,c_limit')} alt='' />
+                            ) : (
+                              <FaUserAlt />
+                            )}
+                          </WrapperImage>
+                          <span className='name'>{user?.name} {user?.lastname}</span>
+                        </SelectOption>
+                      ))}
+                    </>
+                  ) : (
+                    <p>
+                      {
+                        customersPhones.loading
+                          ? t('LOADING', 'Loading')
+                          : phone?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')
+                      }
+                    </p>
+                  )}
+                </OptionsToSelectContainer>
+              )}
+            </SearchBarWrapper>
+          ) : (
+            <>
+              <SelectedUserWrapper>
+                <SelectOption
+                  onClick={() => setShowSearchbar(true)}
+                >
+                  <span>{selectedUser?.cellphone || selectedUser?.phone}</span>
+                  <Dot />
+                  <WrapperImage>
+                    {selectedUser?.photo ? (
+                      <img src={optimizeImage(selectedUser?.photo, 'h_50,c_limit')} alt='' />
+                    ) : (
+                      <FaUserAlt />
+                    )}
+                  </WrapperImage>
+                  <span className='name'>{selectedUser?.name} {selectedUser?.lastname}</span>
+                </SelectOption>
+              </SelectedUserWrapper>
+            </>
+          )}
+          <Button
+            borderRadius='8px'
+            color='primary'
+            disabled={openSidebar === 'user_add_form'}
+            onClick={() => handleOpenAddForm()}
+          >
+            {t('USERS_REGISTER', 'New user')}
+          </Button>
+        </SearchBarContainer>
+        {selectedUser && (
+          <CustomerAddressWrapper>
+            {customerAddress?.address && (
+              <div>
+                <HouseDoor />
+                <span>{customerAddress?.address}</span>
+              </div>
+            )}
+            <LinkButton
+              onClick={() => {
+                setOpenSidebar('address_list')
+                handleParentSidebarMove(500)
+              }}
+            >
+              {customerAddress?.address ? t('CHANGE', 'Change') : t('ADD_NEW_ADDRESS', 'Add new address')}
+            </LinkButton>
+          </CustomerAddressWrapper>
+        )}
+      </SectionContainer>
+
+      {openSidebar === 'user_add_form' && (
+        <SideBar
+          isBorderShow
+          sidebarId='user_add_form'
+          open={openSidebar === 'user_add_form'}
+          onClose={() => handleCloseSidebar()}
+        >
+          <UserAddForm
+            isFromCustomOrder
+            // defaultPhoneNumber={
+            //   findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())
+            //     ? `+${findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())} ${selectedUser?.cellphone || selectedUser?.phone || phone}`
+            //     : `+1 ${selectedUser?.cellphone || selectedUser?.phone || phone}`
+            // }
+            handleSuccessAdd={onSelectUser}
+            onClose={() => handleCloseSidebar()}
+          />
+        </SideBar>
+      )}
+      {openSidebar === 'address_list' && (
+        <SideBar
+          isBorderShow={!openExtraAdddress}
+          sidebarId='address_list'
+          defaultSideBarWidth={openExtraAdddress ? 1000 : 500}
+          moveDistance={openExtraAdddress ? 500 : 0}
+          open={openSidebar === 'address_list'}
+          onClose={() => handleCloseSidebar()}
+        >
+          <SavedPlaces>
+            <h2>{selectedUser?.name} {selectedUser?.lastname}</h2>
+            <p>{t('SELECT_CUSTOMER_ADDRESS', 'Select customer address')}</p>
+            <AddressListWrapper>
+              <AddressList
+                isSeletectedUserAddresses
+                userId={selectedUser?.id}
+                addresses={selectedUser?.addresses}
+                userState={{
+                  user: selectedUser
+                }}
+                setExtraOpen={setOpenExtraAddress}
+                handleSuccessUpdate={setSelectedUser}
+              />
+            </AddressListWrapper>
+          </SavedPlaces>
+        </SideBar>
+      )}
+    </>
+  )
+}

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectCustomer/styles.js

@@ -0,0 +1,235 @@
+import styled, { css } from 'styled-components'
+
+export const SectionContainer = styled.div`
+  margin-bottom: 50px;
+
+  > p {
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+`
+export const SearchBarContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > button {
+    height: 44px;
+    white-space: nowrap;
+  }
+`
+export const SearchBarWrapper = styled.div`
+  position: relative;
+  flex: 1;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 13px;
+  ` : css`
+    margin-right: 13px;
+  `}
+
+  > input {
+    width: 100%;
+    height: 44px;
+    ${props => props.theme?.rtl ? css`
+      padding-left: 40px;
+    ` : css`
+      padding-right: 40px;
+    `}
+  }
+
+  span.loading {
+    position: absolute;
+    top: 10px;
+    ${props => props.theme?.rtl ? css`
+      left: 10px;
+    ` : css`
+      right: 10px;
+    `}
+
+    @keyframes spinner-content {
+      0% { transform: rotate(0) }
+      100% { transform: rotate(360deg) }
+    }
+
+    svg {
+      animation: spinner-content 1.85s linear infinite;
+      color: ${props => props.theme.colors.headingColor};
+    }
+  }
+`
+export const OptionsToSelectContainer = styled.div`
+  position: absolute;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-x: hidden;
+  border-radius: 8px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  background-color: ${props => props.theme.colors.backgroundPage};
+  padding: 9px 0;
+
+  > p {
+    font-size: 12px;
+    margin: 0 16px;
+  }
+`
+export const SelectOption = styled.div`
+  cursor: pointer;
+  width: 100%;
+  padding: 9px 16px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: ${props => props.theme.colors.secundary};
+  }
+  span {
+    font-size: 14px;
+    &.name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+`
+
+export const WrapperImage = styled.div`
+  position: relative;
+  max-width: 24px;
+  max-height: 24px;
+  height: 24px;
+  width: 24px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  margin: 0 6px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    padding: 3px;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+`
+export const SelectedUserWrapper = styled.div`
+  border-radius: 8px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  height: 44px;
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 13px;
+  ` : css`
+    margin-right: 13px;
+  `}
+`
+export const CustomerAddressWrapper = styled.div`
+  margin-top: 21px;
+  > div {
+    display: flex;
+    align-items: center;
+    svg {
+      color: ${props => props.theme.colors.secundaryLight};
+      font-size: 14px;
+    }
+  
+    span {
+      flex: 1;
+      font-size: 14px;
+      line-height: 24px;
+      ${props => props.theme?.rtl ? css`
+        margin-right: 15px;
+      ` : css`
+        margin-left: 15px;
+      `}
+    }
+  }
+
+  a {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 30px;
+    ` : css`
+      margin-left: 30px;
+    `}
+    font-size: 12px;
+  }
+`
+export const SavedPlaces = styled.div`
+  width: 100%;
+  padding: 25px 20px;
+  overflow: auto;
+
+  > h2 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 25px;
+
+    ${props => props.theme?.rtl ? css`
+      margin-left: 40px;
+    ` : css`
+      margin-right: 40px;
+    `}
+  }
+
+  > p {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 25px;
+  }  
+`
+export const AddressListWrapper = styled.div`
+  display: flex;
+  height: calc(100% - 120px);
+  > div:first-child {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    flex: 1;
+
+    > button{
+      width: auto;
+      align-self: center;
+      position: absolute;
+      bottom: 0px;
+
+      ${props => props.theme?.rtl ? css`
+        right: 0px;
+      ` : css`
+        left: 0px;
+      `}
+    }
+
+    > ul {
+      margin-top: 0px;
+      max-height: calc(100% - 70px);
+      overflow: auto;
+    }
+  }
+
+
+  @media (min-width: 768px){
+    ul{
+      width: 100%;
+    }
+    >div {
+      > button {
+        width: 65%;
+      }
+    }
+  }
+`

package/src/themes/callcenterOriginal/src/components/Orders/CreateCustomOrder/SelectProducts/index.js

@@ -0,0 +1,237 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useLanguage, useUtils, useOrder } from 'ordering-components-external'
+import { Input, IconButton } from '../../../../styles'
+import { DashCircle, PlusCircle, Pencil, Trash } from 'react-bootstrap-icons'
+import CgSpinnerTwoAlt from '@meronex/icons/cg/CgSpinnerTwoAlt'
+import BiImage from '@meronex/icons/bi/BiImage'
+import { Modal, Confirm } from '../../../Shared'
+import { ProductForm } from '../ProductForm'
+
+import {
+  Container,
+  SearchProductsWrapper,
+  OptionsToSelectContainer,
+  SelectOption,
+  WrapperImage,
+  CartProductsWrapper,
+  ProductQuantityActionsContainer,
+  CartProductsConatiner,
+  ProductEditDeleteActions
+} from './styles'
+
+export const SelectProducts = (props) => {
+  const {
+    productList,
+    getProducts,
+    handeUpdateProductCart,
+    cart,
+    business
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [, { removeProduct }] = useOrder()
+
+  const searchInputRef = useRef(null)
+  const [searchInputFocus, setSearchInputFocus] = useState(false)
+  const [openProduct, setOpenProduct] = useState(false)
+  const [curProduct, setCurProduct] = useState(null)
+  const [selectedProductCart, setSelectedProductCart] = useState(null)
+  const [isCartProduct, setIsCartProduct] = useState(false)
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  let timeout = null
+  const onInputChange = (inputValue) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(function () {
+      getProducts(inputValue)
+    }, 750)
+  }
+
+  const handleSelectProduct = (product) => {
+    setIsCartProduct(false)
+    setSelectedProductCart(null)
+    setCurProduct(product)
+    setOpenProduct(true)
+  }
+
+  const handleEditProduct = (product) => {
+    setIsCartProduct(true)
+    setCurProduct(null)
+    setSelectedProductCart(product)
+    setOpenProduct(true)
+  }
+
+  const closeModalProductForm = () => {
+    setCurProduct(null)
+    setOpenProduct(false)
+  }
+
+  const handleDeleteClick = (product) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?'),
+      handleOnAccept: () => {
+        removeProduct(product, cart)
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (business?.id) {
+      searchInputRef.current.value = ''
+    }
+  }, [business?.id])
+
+  useEffect(() => {
+    if (!searchInputFocus || !productList?.products?.length) return
+    const el = document.querySelector('.custom-order-content')
+    if (el) {
+      el.scrollTo({
+        top: 300,
+        behavior: 'smooth'
+      })
+    }
+  }, [searchInputFocus, productList?.products])
+
+  return (
+    <Container>
+      <h3>{t('WAHT_WANT_TO_BUY', 'What do you want us to buy?')}</h3>
+      <SearchProductsWrapper>
+        <Input
+          ref={searchInputRef}
+          placeholder={t('SEARCH_PRODUCTOS', 'Search products')}
+          onChange={e => onInputChange(e.target.value)}
+          onFocus={() => setSearchInputFocus(true)}
+          onBlur={() => {
+            setTimeout(() => {
+              setSearchInputFocus(false)
+            }, 300)
+          }}
+        />
+        {productList.loading && (
+          <span className='loading'>
+            <CgSpinnerTwoAlt />
+          </span>
+        )}
+        {searchInputFocus && (
+          <OptionsToSelectContainer>
+            {productList?.products?.length > 0 ? (
+              <>
+                {productList?.products?.map(product => (
+                  <SelectOption
+                    key={product.id}
+                    onClick={() => handleSelectProduct(product)}
+                  >
+                    <WrapperImage>
+                      {product?.images ? (
+                        <img src={optimizeImage(product?.images, 'h_50,c_limit')} alt='' />
+                      ) : (
+                        <BiImage />
+                      )}
+                    </WrapperImage>
+                    <span className='name'>{product?.name}</span>
+                  </SelectOption>
+                ))}
+              </>
+            ) : (
+              <p>
+                {
+                  productList.loading
+                    ? t('LOADING', 'Loading')
+                    : t('SEARCH_PRODUCTOS', 'Search products')
+                }
+              </p>
+            )}
+          </OptionsToSelectContainer>
+        )}
+      </SearchProductsWrapper>
+      <CartProductsConatiner>
+        {cart?.products?.map((product, index) => (
+          <CartProductsWrapper key={`${product.id}_${index}`}>
+            <SelectOption>
+              <WrapperImage>
+                {product?.images ? (
+                  <img src={optimizeImage(product?.images, 'h_50,c_limit')} alt='' />
+                ) : (
+                  <BiImage />
+                )}
+              </WrapperImage>
+              <span className='name'>{product?.name}</span>
+            </SelectOption>
+            <ProductQuantityActionsContainer>
+              <IconButton
+                color='black'
+                disabled={product?.quantity === 1}
+                onClick={() => handeUpdateProductCart(product, false)}
+              >
+                <DashCircle />
+              </IconButton>
+              <Input
+                type='number'
+                disabled
+                max={product?.maximum_per_order}
+                value={product?.quantity}
+              />
+              <IconButton
+                color='black'
+                disabled={product?.maximum_per_order === product?.quantity}
+                onClick={() => handeUpdateProductCart(product, true)}
+              >
+                <PlusCircle />
+              </IconButton>
+            </ProductQuantityActionsContainer>
+            <ProductEditDeleteActions>
+              <IconButton
+                color='black'
+                onClick={() => handleEditProduct(product)}
+              >
+                <Pencil />
+              </IconButton>
+              <IconButton
+                color='black'
+                onClick={() => handleDeleteClick(product)}
+              >
+                <Trash />
+              </IconButton>
+            </ProductEditDeleteActions>
+          </CartProductsWrapper>
+        ))}
+      </CartProductsConatiner>
+
+      <Modal
+        width='760px'
+        open={openProduct}
+        closeOnBackdrop
+        onClose={() => closeModalProductForm()}
+        padding='0'
+        isProductForm
+        disableOverflowX
+      >
+        <ProductForm
+          isCartProduct={isCartProduct}
+          product={curProduct}
+          productCart={selectedProductCart}
+          businessSlug={business?.slug}
+          businessId={business?.id}
+          categoryId={curProduct?.category_id || selectedProductCart?.category_id}
+          productId={curProduct?.id || selectedProductCart?.id}
+          onSave={() => setOpenProduct(false)}
+          productAddedToCartLength={cart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === curProduct?.id ? Cproduct?.quantity : 0) }, 0) || 0}
+        />
+      </Modal>
+
+      <Confirm
+        title={t('PRODUCT', 'Product')}
+        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}
+      />
+    </Container>
+  )
+}