ordering-ui-external 1.7.1 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -85,7 +85,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.6.0",
+    "ordering-components-external": "1.7.0",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/BusinessInformation/index.js

@@ -75,12 +75,7 @@ export const BusinessInformationUI = (props) => {
   const [{ parsePrice, parseDistance }] = useUtils()
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
-  const timeFormat = configs?.format_time?.value
-
-  const timeOptions = {
-    12: 'hh:mm a',
-    24: 'HH:mm'
-  }
+  const timeFormat = configs?.general_hour_format?.value
 
   const handleModalImage = (src) => {
     setImage(src)
@@ -218,12 +213,12 @@ export const BusinessInformationUI = (props) => {
                               {schedule.enabled ? (
                                 schedule.lapses.map((time, k) => (
                                   <React.Fragment key={k}>
-                                    <p>{moment(time.open).format(timeOptions[timeFormat])}</p>
+                                    <p>{moment(time.open).format(timeFormat)}</p>
                                     <p style={{
                                       borderBottom: '2px solid',
                                       borderBottomColor: theme.colors.primary,
                                       marginBottom: 10
-                                    }} >{moment(time.close).format(timeOptions[timeFormat])}</p>
+                                    }} >{moment(time.close).format(timeFormat)}</p>
                                   </React.Fragment>
                                 ))
                               ) : (

package/src/components/OrdersOption/styles.js

@@ -100,7 +100,7 @@ export const OrdersContainer = styled.div`
     }
 
     @media(min-width: 480px){
-      width: 80%;
+      width: 100%;
       padding: 0;
       div:last-child {
         border-top: none;
@@ -275,7 +275,6 @@ export const BusinessInformation = styled.div`
   }
 
   p[name='order_number']{
-    width: 170px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -288,6 +287,10 @@ export const BusinessInformation = styled.div`
     width: fit-content;
   }
 
+  .status {
+    color: ${props => props.theme.colors.primary};
+  }
+
   @media (min-width: 480px){
     h2 {
     font-size: 14px;
@@ -299,9 +302,6 @@ export const BusinessInformation = styled.div`
         font-size: 0.9em;
       `}
     }
-    p[name='order_number']{
-      width: 230px;
-    }
   }
 
   @media (min-width: 768px){

package/src/components/Pagination/index.js

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { Select } from '../../themes/five/src/styles/Select'
+import { ChevronLeft, ChevronRight } from 'react-bootstrap-icons'
+
+import {
+  PaginationContainer,
+  PaginationButtonContainer,
+  PageButton,
+} from './styles'
+
+export const Pagination = (props) => {
+  const {
+    currentPage,
+    totalPages,
+    handleChangePage,
+  } = props
+
+  const [, t] = useLanguage()
+
+  const [visiblePages, setVisiblePages] = useState([])
+  const [activePage, setActivePage] = useState(currentPage)
+
+  const filterPages = (visiblePages, totalPages) => {
+    return visiblePages.filter(page => page <= totalPages)
+  }
+
+  const getVisiblePages = (page, total) => {
+    if (total < 7) {
+      return filterPages([1, 2, 3, 4, 5, 6], total)
+    } else {
+      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
+        return [1, page - 1, page, page + 1, total]
+      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
+        return [1, total - 3, total - 2, total - 1, total]
+      } else {
+        return [1, 2, 3, 4, 5, total]
+      }
+    }
+  }
+
+  const changePage = (page) => {
+    if (page === activePage) {
+      return
+    }
+    setActivePage(page)
+    const _visiblePages = getVisiblePages(page, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+    handleChangePage(page)
+  }
+
+  useEffect(() => {
+    if (!totalPages) return
+    setVisiblePages(getVisiblePages(null, totalPages))
+  }, [totalPages])
+
+  useEffect(() => {
+    setActivePage(currentPage)
+    const _visiblePages = getVisiblePages(currentPage, totalPages)
+    setVisiblePages(filterPages(_visiblePages, totalPages))
+  }, [currentPage])
+
+  return (
+    <PaginationContainer>
+      <PaginationButtonContainer>
+        <PageButton
+          disabled={activePage === 1}
+          onClick={() => (activePage !== 1) && changePage(activePage - 1)}
+        >
+          <ChevronLeft />
+        </PageButton>
+
+        {visiblePages.map((page, index, array) => (
+          <React.Fragment key={page}>
+            {array[index - 1] + 2 <= page ? (
+              <>
+                <PageButton noEffect>
+                  ...
+                </PageButton>
+                <PageButton
+                  active={activePage === page}
+                  onClick={() => changePage(page)}
+                >
+                  {page}
+                </PageButton>
+              </>
+            ) : (
+              <PageButton
+                active={activePage === page}
+                onClick={() => changePage(page)}
+              >
+                {page}
+              </PageButton>
+            )}
+          </React.Fragment>
+        ))}
+
+        <PageButton
+          disabled={activePage === totalPages}
+          onClick={() => (activePage !== totalPages) && changePage(activePage + 1)}
+        >
+          <ChevronRight />
+        </PageButton>
+      </PaginationButtonContainer>
+    </PaginationContainer>
+  )
+}

package/src/components/Pagination/styles.js

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const PaginationContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+export const PaginationButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 20px;
+  ` : css`
+    margin-right: 20px;
+  `}
+`
+
+export const PageButton = styled.button`
+  background-color: transparent;
+  font-size: 14px;
+  color: ${props => props.theme.colors.headingColor};
+  outline: none;
+  border: none;
+  border-radius: 27px;
+  min-width: 27px;
+  min-height: 27px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 7px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 3px;
+  ` : css`
+    margin-right: 3px;
+  `}
+
+  &:hover {
+    background-color: #1507260a;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:active {
+    background-color: #1507261a;
+  }
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.primary)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.primary)};
+    }
+  `}
+
+  ${({ noEffect }) => noEffect && css`
+    cursor: initial;
+    &:hover {
+      background-color: transparent;
+    }
+    &:active {
+      background-color: transparent;
+    }
+  `}
+`
+
+export const PageSizeContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+
+  .select {
+    border-color: ${props => props.theme.colors.lightGray};
+    padding: 5px 0;
+
+    > div:first-child {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+`
+
+export const PageSizeTitle = styled.p`
+  margin: 0px;
+  color: ${props => props.theme.colors.lightGray};
+  font-size: 12px;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 10px;
+  ` : css`
+    margin-right: 10px;
+  `}
+`
+
+export const Option = styled.div`
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+`

package/src/components/SmartAppBanner/index.js

@@ -25,6 +25,7 @@ const SmartAppBanneUI = (props) => {
           windows: t('FREE', 'Free'),
           kindle: t('FREE', 'Free')
         }}
+        ignoreIosVersion
       />
     </>
   )

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import BsDot from '@meronex/icons/bs/BsDot'
+import { BusinessInformation } from '../../OrdersOption/styles'
+import { useLanguage, useUtils, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
+import { Button } from '../../../styles/Buttons'
+import { useTheme } from 'styled-components'
+
+import {
+  SingleCard,
+  OrderPastContent,
+  PastLogo,
+  WrapperBusinessTitle,
+  Reorder,
+  OrderInfo,
+  FavoriteWrapper
+} from '../styles'
+
+const SingleOrderCardUI = (props) => {
+  const {
+    order,
+    getOrderStatus,
+    handleReorder,
+    reorderLoading,
+    orderID,
+    handleFavoriteOrder,
+    setOrderSelected
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+
+  const handleChangeFavorite = (order) => {
+    handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
+  }
+
+  return (
+    <SingleCard key={order.id} id='order-card'>
+      <OrderPastContent>
+        {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
+          <PastLogo>
+            <img src={order.business?.logo || theme.images?.dummies?.businessLogo} alt='business-logo' width='55px' height='64px' loading='lazy' />
+          </PastLogo>
+        )}
+        <BusinessInformation>
+          <WrapperBusinessTitle>
+            <h2>{order.business?.name}</h2>
+            <FavoriteWrapper onClick={() => handleChangeFavorite(order)} className='favorite'>
+              {order?.favorite ? <Like /> : <DisLike />}
+            </FavoriteWrapper>
+          </WrapperBusinessTitle>
+          <OrderInfo>
+            {order?.id && (
+              <>
+                <p name='order_number'>{t('ORDER_NUM', 'Order No.')} {order.id}</p>
+                <BsDot className='dot' />
+              </>
+            )}
+            <p>{order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}</p>
+          </OrderInfo>
+          <p className='status'>{getOrderStatus(order.status)?.value}</p>
+        </BusinessInformation>
+      </OrderPastContent>
+      <Reorder>
+        <Button
+          outline
+          disabled={!!order?.review}
+          color='primary'
+          className='review'
+          onClick={() => setOrderSelected(order)}
+        >
+          {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
+        </Button>
+        <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
+          {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
+        </Button>
+      </Reorder>
+    </SingleCard>
+  )
+}
+
+export const SingleOrderCard = (props) => {
+  const singleOrderCardProps = {
+    ...props,
+    UIComponent: SingleOrderCardUI
+  }
+  return <SingleOrderCardController {...singleOrderCardProps} />
+}

package/src/components/VerticalOrdersLayout/index.js

@@ -1,34 +1,73 @@
-import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components-external'
-import { useTheme } from 'styled-components'
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
 
 import {
-  SingleCard,
-  OrderPastContent,
-  PastLogo,
-  WrapperBusinessTitle,
-  Reorder,
-  WrappButton
+  WrappButton,
+  ReviewWrapper,
 } from './styles'
 
-import { OrdersContainer, BusinessInformation } from '../OrdersOption/styles'
+import { OrdersContainer } from '../OrdersOption/styles'
+
+import { ReviewOrder } from '../../themes/five/src/components/ReviewOrder'
+import { ReviewProduct } from '../../themes/five/src/components/ReviewProduct'
+import { ReviewDriver } from '../../themes/five/src/components/ReviewDriver'
+import { Modal } from '../../themes/five/src/components/Modal'
+import { SingleOrderCard } from './SingleOrderCard'
 
 export const VerticalOrdersLayout = (props) => {
   const {
     orders,
     pagination,
-    onRedirectPage,
     loadMoreOrders,
-    getOrderStatus,
-    handleReorder,
-    reorderLoading,
-    orderID
+    handleUpdateOrderList
   } = props
 
-  const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ parseDate }] = useUtils()
+  const [isReviewOpen, setIsReviewOpen] = useState(false)
+  const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false })
+  const [isOrderReviewed, setIsOrderReviewed] = useState(false)
+  const [isProductReviewed, setIsProductReviewed] = useState(false)
+  const [isDriverReviewed, setIsDriverReviewed] = useState(false)
+  const [orderSelected, setOrderSelected] = useState({})
+
+  const closeReviewOrder = () => {
+    if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
+    else if (orderSelected?.driver && !orderSelected?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else handleCloseReivew()
+  }
+
+  const closeReviewProduct = () => {
+    if (orderSelected?.driver && !orderSelected?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else {
+      setIsDriverReviewed(true)
+      handleCloseReivew()
+    }
+  }
+  const handleOpenReview = () => {
+    if (!orderSelected?.review && !isOrderReviewed) setReviewStatus({ order: true, product: false, driver: false })
+    else if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
+    else if (orderSelected?.driver && !orderSelected?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else {
+      setIsReviewOpen(false)
+      return
+    }
+    setIsReviewOpen(true)
+  }
+
+  const handleCloseReivew = () => {
+    setReviewStatus({ order: false, product: false, driver: false })
+    setIsReviewOpen(false)
+  }
+
+  const handleClickReview = (order) => {
+    handleOpenReview && handleOpenReview()
+  }
+
+  useEffect(() => {
+    if (!orderSelected?.id) return
+    handleClickReview()
+  }, [orderSelected])
 
   return (
     <>
@@ -42,37 +81,12 @@ export const VerticalOrdersLayout = (props) => {
       }
       <OrdersContainer id='orders-container'>
         {orders.map(order => (
-          <SingleCard key={order.id} id='order-card'>
-            <OrderPastContent>
-              {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
-                <PastLogo>
-                  <img src={order.business?.logo || theme.images?.dummies?.businessLogo} alt='business-logo' width='55px' height='64px' loading='lazy' />
-                </PastLogo>
-              )}
-              <BusinessInformation>
-                <WrapperBusinessTitle>
-                  <h2>{order.business?.name}</h2>
-                </WrapperBusinessTitle>
-                <p>{order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })}</p>
-                <p
-                  name='view_order'
-                  onClick={() => onRedirectPage({ page: 'order_detail', params: { orderId: order.uuid } })}
-                >
-                  {t('MOBILE_FRONT_BUTTON_VIEW_ORDER', 'View order')}
-                </p>
-              </BusinessInformation>
-            </OrderPastContent>
-            <Reorder>
-              <p>{getOrderStatus(order.status)?.value}</p>
-              <Button
-                color='primary'
-                onClick={() => handleReorder(order.id)}
-                disabled={reorderLoading}
-              >
-                {orderID === order.id && reorderLoading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
-              </Button>
-            </Reorder>
-          </SingleCard>
+          <SingleOrderCard
+            {...props}
+            key={order.id}
+            order={order}
+            setOrderSelected={setOrderSelected}
+          />
         ))}
       </OrdersContainer>
       {pagination.totalPages && pagination.currentPage < pagination.totalPages && (
@@ -87,6 +101,30 @@ export const VerticalOrdersLayout = (props) => {
           </Button>
         </WrappButton>
       )}
+      {isReviewOpen && (
+        <Modal
+          open={isReviewOpen}
+          onClose={handleCloseReivew}
+          title={orderSelected
+            ? (reviewStatus?.order
+              ? t('REVIEW_ORDER', 'Review order')
+              : (reviewStatus?.product
+                ? t('REVIEW_PRODUCT', 'Review Product')
+                : t('REVIEW_DRIVER', 'Review Driver')))
+            : t('LOADING', 'Loading...')}
+        >
+          <ReviewWrapper>
+            {
+              reviewStatus?.order
+                ? <ReviewOrder order={orderSelected} closeReviewOrder={closeReviewOrder} setIsReviewed={setIsOrderReviewed} handleUpdateOrderList={handleUpdateOrderList} />
+                : (reviewStatus?.product
+                  ? <ReviewProduct order={orderSelected} closeReviewProduct={closeReviewProduct} setIsProductReviewed={setIsProductReviewed} />
+                  : <ReviewDriver order={orderSelected} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={setIsDriverReviewed} />)
+            }
+          </ReviewWrapper>
+
+        </Modal>
+      )}
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))
       }