ordering-ui-external 1.8.7 → 1.8.9

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

@@ -0,0 +1,297 @@
+import React, { useContext, useState } from 'react'
+import { useLanguage, useSession, useUtils } from 'ordering-components-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import BisBusiness from '@meronex/icons/bi/BisBusiness'
+import { DriverSelector } from '../DriverSelector'
+import { IconButton } from '../../../styles'
+import { Telephone, ChevronDown } from 'react-bootstrap-icons'
+import { Accordion, AccordionContext, useAccordionToggle } from 'react-bootstrap'
+import { ReviewCustomer } from '../ReviewCustomer'
+import { Modal } from '../../Shared'
+
+import {
+  BusinessInfo,
+  PhotoWrapper,
+  Photo,
+  InfoContent,
+  CustomerInfo,
+  DriverInfoContainer,
+  DriverInfo,
+  DriverSelectorContainer,
+  CutsomerDetail,
+  CustomerInfoTable,
+  ToggleItemWrapper,
+  ReviewButton
+} from './styles'
+
+export const OrderContactInformation = (props) => {
+  const {
+    order,
+    isTourOpen,
+    setCurrentTourStep,
+    handleOpenMessages,
+    isServiceOrder
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ user }] = useSession()
+  const [{ optimizeImage }] = useUtils()
+
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [currentCustomer, setCurrentCustomer] = useState(null)
+
+  const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
+
+  const handleReviewCustomer = (customer) => {
+    setCurrentCustomer(customer)
+    setIsModalOpen(true)
+  }
+
+  const handleCustomerReviewed = () => {
+    setIsModalOpen(false)
+  }
+
+  return (
+    <>
+      <Accordion>
+        {user?.level !== 2 && (
+          <>
+            <ContextAwareToggle eventKey='0'>
+              <BusinessInfo>
+                <PhotoWrapper>
+                  {order?.business?.logo ? (
+                    <Photo bgimage={optimizeImage(order?.business?.logo, 'h_50,c_limit')} />
+                  ) : (
+                    <BisBusiness />
+                  )}
+                </PhotoWrapper>
+                <InfoContent>
+                  <div>
+                    <p className='name'>{order?.business?.name}</p>
+                    {order?.business?.phone && (
+                      <IconButton
+                        onClick={() => window.open(`tel:${order.business.phone}`)}
+                      >
+                        <Telephone />
+                      </IconButton>
+                    )}
+                  </div>
+                  <p>{order?.business?.phone}</p>
+                </InfoContent>
+                <ChevronDown className='down-arrow' />
+              </BusinessInfo>
+            </ContextAwareToggle>
+            <Accordion.Collapse eventKey='0'>
+              <CutsomerDetail>
+                <CustomerInfoTable>
+                  <tbody>
+                    {order?.business?.email && (
+                      <tr>
+                        <td>{t('EMAIL', 'Email')}</td>
+                        <td>
+                          <a href={`mailto: ${order?.business?.email}`}>{order?.business?.email}</a>
+                        </td>
+                      </tr>
+                    )}
+                    {order?.business?.address && (
+                      <tr>
+                        <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
+                        <td>
+                          <a href={`http://maps.google.com/?q=${order?.business?.address}`} rel='noopener noreferrer' target='_blank'>{order?.business?.address}</a>
+                        </td>
+                      </tr>
+                    )}
+                    {order?.business?.address_notes && (
+                      <tr>
+                        <td>{t('NOTES', 'Notes')}</td>
+                        <td>{order?.business?.address_notes}</td>
+                      </tr>
+                    )}
+                    {order?.business?.zipcode && (
+                      <tr>
+                        <td>{t('ZIPCODE', 'Zipcode')}</td>
+                        <td>{order?.business?.zipcode}</td>
+                      </tr>
+                    )}
+                  </tbody>
+                </CustomerInfoTable>
+              </CutsomerDetail>
+            </Accordion.Collapse>
+          </>
+        )}
+        <ContextAwareToggle eventKey='1'>
+          <CustomerInfo>
+            <PhotoWrapper>
+              {order?.customer?.photo ? (
+                <Photo bgimage={optimizeImage(order?.customer?.photo, 'h_50,c_limit')} />
+              ) : (
+                <FaUserAlt />
+              )}
+            </PhotoWrapper>
+            <InfoContent>
+              <div>
+                <p className='name'>{order?.customer?.name} {order?.customer?.middle_name} {order?.customer?.lastname} {order?.customer?.second_lastname}</p>
+                {order?.customer?.cellphone && (
+                  <IconButton
+                    onClick={() => window.open(`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`)}
+                  >
+                    <Telephone />
+                  </IconButton>
+                )}
+              </div>
+              {/* {!order?.user_review && pastOrderStatuses.includes(order?.status) && (
+                <ReviewButton
+                  onClick={() => handleReviewCustomer(order?.customer)}
+                >
+                  {t('REVIEW', 'Review')}
+                </ReviewButton>
+              )} */}
+            </InfoContent>
+            <ChevronDown className='down-arrow' />
+          </CustomerInfo>
+        </ContextAwareToggle>
+        <Accordion.Collapse eventKey='1'>
+          <CutsomerDetail>
+            <CustomerInfoTable>
+              <tbody>
+                {order?.customer?.cellphone && (
+                  <tr>
+                    <td>{t('CELLPHONE', 'Phone / Mobile')}</td>
+                    <td>
+                      <a href={`tel:${order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}>
+                        {(order?.customer?.country_phone_code && `+${order?.customer?.country_phone_code}`)} {order?.customer?.cellphone}
+                      </a>
+                    </td>
+                  </tr>
+                )}
+                {order?.customer?.email && (
+                  <tr>
+                    <td>{t('EMAIL', 'Email')}</td>
+                    <td>
+                      <a href={`mailto: ${order?.customer?.email}`}>{order?.customer?.email}</a>
+                    </td>
+                  </tr>
+                )}
+                {!!order?.customer?.address && (
+                  <tr>
+                    <td>{t('CHECKOUT_FULL_ADDRESS', 'Full address')}</td>
+                    <td>
+                      <a href={`http://maps.google.com/?q=${order?.customer?.address}`} rel='noopener noreferrer' target='_blank'>{order?.customer?.address}</a>
+                    </td>
+                  </tr>
+                )}
+                {!!order?.customer?.internal_number && (
+                  <tr>
+                    <td>{t('INTERNAL_NUMBER', 'Internal number')}</td>
+                    <td>{order?.customer?.internal_number}</td>
+                  </tr>
+                )}
+                {!!order?.customer?.address_notes && (
+                  <tr>
+                    <td>{t('NOTES', 'Notes')}</td>
+                    <td>{order?.customer?.address_notes}</td>
+                  </tr>
+                )}
+                {!!order?.customer?.zipcode && (
+                  <tr>
+                    <td>{t('ZIPCODE', 'Zipcode')}</td>
+                    <td>{order?.customer?.zipcode}</td>
+                  </tr>
+                )}
+                {!!order?.on_behalf_of && (
+                  <tr>
+                    <td>{t('ON_BEHALF_OF', 'On behalf of')}</td>
+                    <td>{order?.on_behalf_of}</td>
+                  </tr>
+                )}
+              </tbody>
+            </CustomerInfoTable>
+          </CutsomerDetail>
+        </Accordion.Collapse>
+      </Accordion>
+      {order?.delivery_type === 1 && !isServiceOrder && (
+        <>
+          <DriverSelectorContainer>
+            <p>{t('DRIVER_ASSIGN', 'Driver assign')}</p>
+            <DriverSelector
+              small
+              isPhoneView
+              defaultValue={order?.driver_id ? order.driver_id : 'default'}
+              order={order}
+              isTourOpen={isTourOpen}
+              setCurrentTourStep={setCurrentTourStep}
+              handleOpenMessages={handleOpenMessages}
+              isOrderDrivers
+              orderId={order?.id}
+            />
+          </DriverSelectorContainer>
+          <DriverInfoContainer>
+            <DriverInfo>
+              <PhotoWrapper>
+                {order?.driver?.photo ? (
+                  <Photo bgimage={optimizeImage(order?.driver?.photo, 'h_50,c_limit')} />
+                ) : (
+                  <FaUserAlt />
+                )}
+              </PhotoWrapper>
+              {order.driver_id ? (
+                <InfoContent>
+                  <div>
+                    <p>{order?.driver?.name} {order?.driver?.middle_name} {order?.driver?.lastname} {order?.driver?.second_lastname}</p>
+                    {order?.driver?.cellphone && (
+                      <IconButton
+                        onClick={() => window.open(`tel:${order?.driver?.cellphone}`)}
+                      >
+                        <Telephone />
+                      </IconButton>
+                    )}
+                  </div>
+                  <p>{t('DRIVER', 'Driver')}</p>
+                </InfoContent>
+              ) : (
+                <InfoContent>
+                  <div>
+                    <p>{t('NO_DRIVER', 'No driver')}</p>
+                  </div>
+                </InfoContent>
+              )}
+            </DriverInfo>
+          </DriverInfoContainer>
+        </>
+      )}
+
+      <Modal
+        width='700px'
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      >
+        <ReviewCustomer
+          order={order}
+          customer={currentCustomer}
+          onClose={() => handleCustomerReviewed()}
+        />
+      </Modal>
+    </>
+  )
+}
+
+const ContextAwareToggle = ({ children, eventKey, callback }) => {
+  const currentEventKey = useContext(AccordionContext)
+  const decoratedOnClick = useAccordionToggle(
+    eventKey,
+    () => callback && callback(eventKey)
+  )
+  const isCurrentEventKey = currentEventKey === eventKey
+
+  const handleButtonClick = () => {
+    decoratedOnClick()
+  }
+  return (
+    <ToggleItemWrapper
+      active={isCurrentEventKey}
+      onClick={handleButtonClick}
+    >
+      {children}
+    </ToggleItemWrapper>
+  )
+}

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

@@ -0,0 +1,196 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const BusinessInfo = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 15px 0;
+  position: relative;
+
+  > svg {
+    position: absolute;
+    top: 32px;
+    right: 10px;
+    transition: all 0.3s;
+  }
+`
+
+export const PhotoWrapper = styled.div`
+  max-width: 48px;
+  max-height: 48px;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+`
+
+const PhotoStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 10px;
+`
+
+export const Photo = (props) => {
+  return (
+    <PhotoStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </PhotoStyled>
+  )
+}
+
+export const InfoContent = styled.div`
+  flex: 1;
+  > div {
+    display: flex;
+    align-items: center;
+
+    > p {
+      margin: 0px;
+      font-weight: 600;
+      color: ${props => props.theme.colors?.headingColor};
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+
+      &.name {
+        max-width: 70%;
+      }
+    }
+
+    > button {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 8px;
+      ` : css`
+        margin-left: 8px;
+      `}
+    }
+  }
+
+  > p {
+    color: ${props => props.theme.colors?.lightGray};
+    font-size: 12px;
+    margin: 0px;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    margin-right: 15px;
+  ` : css`
+    margin-left: 15px;
+  `}
+`
+
+export const CustomerInfo = styled(BusinessInfo)``
+
+export const DriverInfoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+export const DriverInfo = styled(BusinessInfo)``
+
+export const DriverSelectorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 23px;
+  margin-bottom: 13px;
+  > p {
+    font-size: 14px;
+    margin-top: 0;
+    margin-bottom: 15px;
+  }
+  > div {
+    width: 100%;
+    border-radius: 8px;
+    background-color: ${props => props.theme.colors?.secundary};
+
+    > div {
+      &:first-child {
+        border: none;
+        height: 50px;
+      }
+      > div:first-child {
+        color: ${props => props.theme.colors?.headingColor};
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    > div {
+      width: 50%;
+    }
+  }
+  @media (max-width: 576px) {
+    > div {
+      p {
+        max-width: initial;
+      }
+    }
+  }
+`
+export const CutsomerDetail = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors?.secundary};
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+`
+
+export const CustomerInfoTable = styled.table`
+  width: 100%;
+
+  tr {
+    td {
+      color: ${props => props.theme.colors?.lightGray};
+      font-size: 12px;
+      margin: 0px;
+
+      &:first-child {
+        color: ${props => props.theme.colors?.headingColor};
+      }
+
+      > a {
+        color: ${props => props.theme.colors?.primary};
+        transition: all 0.3s linear;
+        &:hover {
+          color: ${props => props.theme.colors?.headingColor};
+        }
+      }
+    }
+  }
+`
+
+export const ToggleItemWrapper = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors?.secundary};
+
+  ${({ active }) => active && css`
+    border-bottom: none;
+    .down-arrow {
+      transform: rotateZ(180deg);
+    }
+  `}
+`
+export const ReviewButton = styled.span`
+  cursor: pointer;
+  color: ${props => props.theme.colors.primary};
+  font-size: 14px;
+  text-decoration: underline;
+`