ordering-ui-external 1.8.8 → 1.8.9

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

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react'
+import {
+  useLanguage,
+  useUtils,
+  ReviewCustomer as ReviewCustomerController
+} from 'ordering-components-external'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+import MdClose from '@meronex/icons/md/MdClose'
+import { useTheme } from 'styled-components'
+import { Button, TextArea } from '../../../styles'
+import { Alert } from '../../Shared'
+
+import { reviewCommentList } from '../../../../../../utils'
+
+import {
+  ReviewContainer,
+  PhotoWrapper,
+  Photo,
+  CustomerName,
+  ReviewsProgressWrapper,
+  ReviewsProgressContent,
+  ReviewsProgressBar,
+  ReviewsMarkPoint,
+  CommentsList,
+  CommentButton,
+  Comments
+} from './styles'
+
+const ReviewCustomerUI = (props) => {
+  const {
+    customer,
+    reviewState,
+    setReviewState,
+    actionState,
+    handleSendCustomerReview
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [comments, setComments] = useState([])
+  const [extraComment, setExtraComment] = useState('')
+
+  const qualificationList = [
+    { key: 1, text: t('TERRIBLE', 'Terrible'), middleNode: false, left: 0, right: 'initial' },
+    { key: 2, text: t('BAD', 'Bad'), middleNode: true, left: '25%', right: '75%' },
+    { key: 3, text: t('OKAY', 'Okay'), middleNode: true, left: '50%', right: '50%' },
+    { key: 4, text: t('GOOD', 'Good'), middleNode: true, left: '75%', right: '25%' },
+    { key: 5, text: t('GREAT', 'Great'), middleNode: false, left: 'initial', right: 0 }
+  ]
+
+  const commentsList = reviewCommentList(1)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+  const handleChangeQualification = (index) => {
+    if (index) setReviewState({ ...reviewState, qualification: index, comment: '' })
+    setComments([])
+  }
+
+  const isSelectedComment = (commentKey) => {
+    const found = comments.find((comment) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComment = (commentItem) => {
+    const found = comments.find((comment) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setReviewState({ ...reviewState, comment: _comment })
+  }, [comments, extraComment])
+
+  useEffect(() => {
+    if (!actionState.error) return
+    setAlertState({
+      open: true,
+      content: actionState.error
+    })
+  }, [actionState.error])
+
+  return (
+    <>
+      <ReviewContainer>
+        <h1>{t('REVIEW_CUSTOMER', 'Review customer')}</h1>
+        <PhotoWrapper>
+          {customer?.photo ? (
+            <Photo bgimage={optimizeImage(customer?.photo, 'h_150,c_limit')} />
+          ) : (
+            <FaUserAlt />
+          )}
+        </PhotoWrapper>
+        <CustomerName>{customer?.name} {customer?.middle_name} {customer?.lastname} {customer?.second_lastname}</CustomerName>
+
+        <ReviewsProgressWrapper>
+          <p>{t('HOW_WAS_THE_DELIVERY', 'How was the delivery?')}</p>
+          <ReviewsProgressContent>
+            <ReviewsProgressBar style={{ width: `${(reviewState?.qualification === 0 ? 0 : (reviewState?.qualification - 1) / 4) * 100}%` }} />
+            {
+              qualificationList?.map(qualification => (
+                <ReviewsMarkPoint
+                  key={qualification?.key}
+                  style={{
+                    left: theme?.rtl ? (qualification?.middleNode ? 'initial' : qualification?.right) : qualification?.left,
+                    right: theme?.rtl ? qualification?.left : (qualification?.middleNode ? 'initial' : qualification?.right)
+                  }}
+                  active={reviewState?.qualification === qualification?.key}
+                  pass={reviewState?.qualification >= qualification?.key}
+                  className={qualification?.middleNode ? 'mark-point' : ''}
+                  onClick={() => handleChangeQualification(qualification?.key)}
+                >
+                  <span>{qualification?.text}<span /></span>
+                </ReviewsMarkPoint>
+              ))
+            }
+          </ReviewsProgressContent>
+        </ReviewsProgressWrapper>
+        <CommentsList>
+          <p>{commentsList[reviewState?.qualification || 1]?.title}</p>
+          {
+            commentsList[reviewState?.qualification || 1]?.list?.map((commentItem, i) => (
+              <CommentButton
+                key={i}
+                active={isSelectedComment(commentItem?.key)}
+                onClick={() => handleChangeComment(commentItem)}
+                initialIcon
+              >
+                {commentItem.content}
+                {
+                  isSelectedComment(commentItem?.key) && <MdClose />
+                }
+              </CommentButton>
+            ))
+          }
+        </CommentsList>
+        <Comments>
+          <p>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</p>
+          <TextArea
+            name='comments'
+            value={extraComment}
+            onChange={(e) => setExtraComment(e.target.value)}
+            autoComplete='off'
+          />
+        </Comments>
+        <Button
+          borderRadius='8px'
+          color='primary'
+          onClick={() => handleSendCustomerReview()}
+          disabled={actionState.loading}
+        >
+          {t('SEND_REVIEW', 'Send review')}
+        </Button>
+      </ReviewContainer>
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const ReviewCustomer = (props) => {
+  const reviewProps = {
+    ...props,
+    UIComponent: ReviewCustomerUI
+  }
+  return <ReviewCustomerController {...reviewProps} />
+}

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

@@ -0,0 +1,212 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { Button } from '../../../styles/Buttons'
+
+export const ReviewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > h1 {
+    text-align: center;
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 0 29px 0;
+  }
+
+  > button {
+    width: 100%;
+    height: 44px;
+    margin-top: 40px;
+  }
+`
+export const PhotoWrapper = styled.div`
+  max-width: 133px;
+  max-height: 133px;
+  height: 133px;
+  width: 133px;
+  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: 100px;
+    height: 100px;
+    border-radius: 50%;
+  }
+
+  @media print {
+    display: none;
+  }
+`
+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 CustomerName = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 21px;
+  margin-top: 15px;
+`
+export const ReviewsProgressWrapper = styled.div`
+  width: 100%;
+  margin: 30px 0;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 17px;
+    font-size: 14px;
+  }
+`
+export const ReviewsProgressContent = styled.div`
+  background: ${props => props.theme.colors.borderColor};
+  border-radius: 50px;
+  width: 100%;
+  height: 4px;
+  position: relative;
+  margin-bottom: 30px;
+`
+export const ReviewsProgressBar = styled.div`
+  height: 4px;
+  border-radius: 50px;
+  background: ${props => props.theme.colors.primary};
+  transition: all 0.2s linear;
+`
+
+export const ReviewsMarkPoint = styled.div`
+  position: absolute;
+  top: 15px;
+  font-size: 12px;
+  color: #CED4DA;
+  cursor: pointer;
+
+  ${({ active }) => active && css`
+    > span {
+      color: #344050;
+    }
+  `}
+
+  &.mark-point {
+    span {
+      position: relative;
+      margin-left: -50%;
+      ${props => props.theme?.rtl && css`
+        margin-right: -50%;
+        margin-left: 0;
+      `}
+
+      > span {
+        position: absolute;
+        height: 6px;
+        top: -15px;
+        width: 2px;
+        background: #CED4DA;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  ${({ pass }) => pass && css`
+    span {
+      > span {
+        background: transparent !important;
+      }
+    }
+  `}
+`
+export const CommentsList = styled.div`
+  width: 100%;
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  > button {
+    border-radius: 50px;
+    margin-bottom: 18px;
+    &:not(:last-child) {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 40px;
+      ` : css`
+        margin-right: 40px;
+      `}
+    }
+  
+    svg {
+      vertical-align: middle;
+      margin-left: 5px;
+
+      ${props => props.theme?.rtl && css`
+        margin-right: 5px;
+        margin-left: 0;
+      `}
+    }
+  }
+`
+
+export const CommentButton = styled(Button)`
+  border-radius: 50px;
+  margin-bottom: 18px;
+  padding: 0 10px;
+  font-size: 12px;
+  color: #414954;
+  background: ${props => props.theme.colors.borderColor};
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  transition: all 0.3s linear;
+  line-height: 26px;
+
+  svg {
+    vertical-align: middle;
+    margin-left: 5px;
+
+    ${props => props.theme?.rtl && css`
+      margin-right: 5px;
+      margin-left: 0;
+    `}
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme?.colors.primary};
+    border: 1px solid ${props => props.theme?.colors.primary};
+    color: white;
+  `}
+`
+
+export const Comments = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-top: 10px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  textarea {
+    min-height: 104px;
+  }
+`

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import Tour from 'reactour'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import { Stars } from 'react-bootstrap-icons'
+
+import {
+  HelperContent
+} from './styles'
+
+export const WizardOrders = (props) => {
+  const {
+    isTourOpen,
+    setIsTourOpen,
+    currentStep,
+    detailsOrder
+  } = props
+
+  const [, t] = useLanguage()
+
+  const tourSteps = [
+    {
+      selector: '[data-tour="tour_start"]',
+      content: (goTo) => (
+        <HelperContent>
+          <span>1.</span>
+          <p>{t('TOUR_ORDER_START', 'Lets see your trial, we will guide you step by step.')}</p>
+        </HelperContent>
+      ),
+      position: 'bottom'
+    },
+    {
+      selector: '[data-tour="tour_detail"]',
+      content: () => (
+        <HelperContent>
+          <span>2.</span>
+          <p>{t('TOUR_ORDER_DETAIL', 'Then, you can see all the order details.')}</p>
+        </HelperContent>
+      ),
+      position: 'left'
+    },
+    {
+      selector: '[data-tour="tour_driver"]',
+      content: () => (
+        <HelperContent>
+          <span>3.</span>
+          <p>{t('TOUR_ASSIGN_DRIVER', 'Assign a driver for your delivery order')}</p>
+        </HelperContent>
+      ),
+      position: 'left'
+    },
+    {
+      selector: '[data-tour="tour_message"]',
+      content: () => (
+        <HelperContent>
+          <span>{detailsOrder?.delivery_type === 1 ? 4 : 3}.</span>
+          <p>{t('TOUR_ORDER_CHAT', 'Finally, you can use the order chat to communicate with customer or driver')}</p>
+        </HelperContent>
+      ),
+      position: 'left'
+    },
+    {
+      selector: '[data-tour="tour_start"]',
+      content: () => (
+        <HelperContent>
+          <Stars />
+          <p>
+            <span>{t('THATS_IT', 'THAT’S IT')}!!</span> {t('TOUR_ORDER_COMPLETED', 'Now, you can see all your order that your store receive')}
+          </p>
+        </HelperContent>
+      ),
+      position: 'center'
+    }
+  ]
+
+  return (
+    <Tour
+      steps={tourSteps}
+      isOpen={isTourOpen}
+      onRequestClose={() => setIsTourOpen(false)}
+      maskClassName='mask'
+      className='helper'
+      rounded={8}
+      onAfterOpen={target => disableBodyScroll(target)}
+      onBeforeClose={target => enableBodyScroll(target)}
+      showNavigation={false}
+      showCloseButton={false}
+      disableFocusLock
+      startAt={currentStep}
+      goToStep={currentStep}
+      disableKeyboardNavigation
+    />
+  )
+}

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

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components'
+
+export const HelperContent = styled.div`
+  display: flex;
+  align-items: center;
+
+  > span {
+    color: ${props => props.theme.colors.primary};
+    font-size: 20px;
+    line-height: 30px;
+    font-weight: 600;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 13px;
+    ` : css`
+      margin-right: 13px;
+    `}
+  }
+  p {
+    flex: 1;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+
+    span {
+      font-weight: 600;
+    }
+  }
+
+  > svg {
+    color: #FFC700;
+    font-size: 30px;
+    margin-right: 20px;
+  }
+`

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

@@ -0,0 +1,95 @@
+import { DeliveriesManager } from './DeliveriesManager'
+import { DriversManager } from './DriversManager'
+import { Messages } from './Messages'
+import { OrdersContentHeader } from './OrdersContentHeader'
+import { OrdersDashboardList } from './OrdersDashboardList'
+import { OrdersManager } from './OrdersManager'
+import { OrderStatusFilterBar } from './OrderStatusFilterBar'
+import { OrderStatusSubFilter } from './OrderStatusSubFilter'
+import { OrderNotification } from './OrderNotification'
+import { OrderDetails } from './OrderDetails'
+import { OrdersLateralBar } from './OrdersLateralBar'
+import { OrdersDashboardControls } from './OrdersDashboardControls'
+import { OrdersDashboard } from './OrdersDashboard'
+import { WizardOrders } from './WizardOrders'
+import { DriversDashboard } from './DriversDashboard'
+import { DriversLocation } from './DriversLocation'
+import { DriversList } from './DriversList'
+import { DriversOnlineOfflineFilter } from './DriversOnlineOfflineFilter'
+import { DriversBusyStatusFilter } from './DriversBusyStatusFilter'
+import { DeliveryDashboard } from './DeliveryDashboard'
+import { ProductItemAccordion } from './ProductItemAccordion'
+import { OrderStatusTypeSelector } from './OrderStatusTypeSelector'
+import { OrderMetaFields } from './OrderMetaFields'
+import { OrderDetailsHeader } from './OrderDetailsHeader'
+import { OrderBill } from './OrderBill'
+import { OrderContactInformation } from './OrderContactInformation'
+import { OrdersFilterGroup } from './OrdersFilterGroup'
+import { BusinessesSelector } from './BusinessesSelector'
+import { DriversGroupTypeSelector } from './DriversGroupTypeSelector'
+import { DateTypeSelector } from './DateTypeSelector'
+import { DriverSelector } from './DriverSelector'
+import { DeliveryTypeSelector } from './DeliveryTypeSelector'
+import { PaymethodTypeSelector } from './PaymethodTypeSelector'
+import { DeliveriesLocation } from './DeliveriesLocation'
+import { DriverMapMarkerAndInfo } from './DriverMapMarkerAndInfo'
+import { InterActOrderMarker } from './InterActOrderMarker'
+import { OrderDelete } from './OrderDelete'
+import { OrdersExportCSV } from './OrdersExportCSV'
+import { OrderLogisticInformation } from './OrderLogisticInformation'
+import { Logistics } from './Logistics'
+import { OrdersListing } from './OrdersListing'
+import { OrdersTable } from './OrdersTable'
+import { OrdersCards } from './OrdersCards'
+import { ReviewCustomer } from './ReviewCustomer'
+import { CountryFilter } from './CountryFilter'
+import { OrderToPrint } from './OrderToPrint'
+
+export {
+  DeliveriesManager,
+  DriversManager,
+  Messages,
+  OrdersContentHeader,
+  OrdersManager,
+  OrdersDashboardList,
+  OrderStatusFilterBar,
+  OrderStatusSubFilter,
+  OrderNotification,
+  OrderDetails,
+  OrdersLateralBar,
+  OrdersDashboardControls,
+  OrdersDashboard,
+  WizardOrders,
+  DriversDashboard,
+  DriversLocation,
+  DriversList,
+  DriversOnlineOfflineFilter,
+  DriversBusyStatusFilter,
+  DeliveryDashboard,
+  ProductItemAccordion,
+  OrderStatusTypeSelector,
+  OrderMetaFields,
+  OrderDetailsHeader,
+  OrderBill,
+  OrderContactInformation,
+  OrdersFilterGroup,
+  BusinessesSelector,
+  DriversGroupTypeSelector,
+  DateTypeSelector,
+  DriverSelector,
+  DeliveryTypeSelector,
+  PaymethodTypeSelector,
+  DeliveriesLocation,
+  DriverMapMarkerAndInfo,
+  InterActOrderMarker,
+  OrderDelete,
+  OrdersExportCSV,
+  OrderLogisticInformation,
+  Logistics,
+  OrdersListing,
+  OrdersTable,
+  OrdersCards,
+  ReviewCustomer,
+  CountryFilter,
+  OrderToPrint
+}

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

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { PageNotFoundContainer, PageNotFoundText } from './styles'
+import { useLanguage } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+
+export const PageNotFound = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  return (
+    <PageNotFoundContainer>
+      <PageNotFoundText>
+        <span>{t('PAGE_NOT_FOUND', 'PAGE NOT FOUND')}</span>
+        <img src={theme.images?.general?.notFoundLighting} alt='lighting' />
+      </PageNotFoundText>
+      <div>
+        <img src={theme.images?.general?.notFound404} alt='error404' />
+      </div>
+    </PageNotFoundContainer>
+  )
+}