ordering-ui-external 1.7.1 → 1.8.0

package/src/themes/five/src/components/MyOrders/styles.js

@@ -20,8 +20,7 @@ export const Container = styled.div`
   @media (min-width: 769px) {
     ${({ hideOrders }) => !hideOrders ? css`
       padding: 40px;
-      width: 80%;
-    
+      width: 100%;
       @media (min-width: 993px) {
         min-height: calc(100vh - 382px);
       }

package/src/themes/five/src/components/OrderDetails/index.js

@@ -125,6 +125,7 @@ const OrderDetailsUI = (props) => {
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
+  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
   const showOrderActions = order?.delivery_type !== 1
 
@@ -407,6 +408,14 @@ const OrderDetailsUI = (props) => {
             <OrderInfo>
               <TitleContainer>
                 <OrderIdSec>{isService ? t('APPOINTMENT', 'Appointment') : t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OrderIdSec>
+                {enabledPoweredByOrdering && (
+                  <PoweredByOrdering>
+                    {t('POWERED_BY', 'Powered by')}
+                    <a href='https://www.ordering.co'>
+                      {' '}{t('ORDERING_CO', 'Ordering.co')}
+                    </a>
+                  </PoweredByOrdering>
+                )}
                 {parseInt(configs?.guest_uuid_access?.value, 10) && order?.hash_key && (
                   <Content className='order-content'>
                     <ShareOrder>

package/src/themes/five/src/components/OrderDetails/styles.js

@@ -7,7 +7,6 @@ export const Container = styled.div`
   flex-direction: column;
   align-items: center;
   margin: 45px 0 20px;
-
   @media (min-width: 740px) {
     margin: 20px 0;
   }
@@ -19,7 +18,6 @@ export const WrapperContainer = styled.div`
   flex-direction: column;
   min-height: auto;
   position: relative;
-
   @media (min-width: 993px) {
     min-height: calc(100vh - 337px);
     box-sizing: border-box;
@@ -29,7 +27,6 @@ export const WrapperContainer = styled.div`
 export const SkeletonWrapper = styled.div`
   display: flex;
   flex-direction: column;
-
   @media (min-width: 768px) {
     flex-direction: row;
   }
@@ -38,12 +35,10 @@ export const SkeletonWrapper = styled.div`
 export const HeaderInfo = styled.div`
   width: 80%;
   margin-bottom: 20px;
-
   h1, p {
     margin: 0;
     color: ${props => props.theme.colors.darkTextColor};
   }
-
   h1 {
     margin-bottom: 22px;
   }
@@ -66,7 +61,6 @@ export const OrderBusiness = styled.div`
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0px 4px 10px 0px #0000001F;
-
   @media (min-width: 769px) {
     flex-direction: row;
   }
@@ -78,7 +72,6 @@ export const BusinessWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
-
   ${props => props.borderBottom && css`
     padding-bottom: 15px;
     border-bottom: 1px solid ${props => props.theme.colors.lightGray};
@@ -92,12 +85,10 @@ export const BusinessWrapper = styled.div`
     height: 100px;
     border-radius: 7.6px;
     margin-right: 0;
-
     @media (min-width: 400px) {
       margin-right: 40px;
     }
   }
-
   @media (min-width: 400px) {
     flex-direction: row;
     width: ${props => props.w ?? '100%'};
@@ -110,7 +101,6 @@ export const BtsOrderStatus = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
-
   div + div {
     margin-left: 0;
     margin-top: 10px;
@@ -129,14 +119,12 @@ export const BusinessInfo = styled.div`
   box-sizing: border-box;
   margin-right: 0;
   margin-top: 10px;
-
   h1,
   p {
     margin: 0;
     color: ${props => props.theme.colors.darkTextColor};
     overflow-wrap: anywhere;
   }
-
   h2 {
     font-weight: 500;
     font-size: 18px;
@@ -146,7 +134,6 @@ export const BusinessInfo = styled.div`
     font-size: 14px;
     margin-bottom: 5px;
   }
-
   @media (min-width: 400px) {
     margin-right: 15px;
     margin-top: 0;
@@ -169,7 +156,6 @@ export const ActionsBlock = styled.div`
     cursor: pointer;
     color: #B1BCCC;
   }
-
   @media (min-width: 380px) {
     svg {
       font-size: 20px;
@@ -196,16 +182,13 @@ export const OrderInfo = styled.div`
     overflow: hidden;
     white-space: nowrap;
   }
-
   .date {
     margin-bottom: 6px;
   }
-
   .types {
     margin-bottom: 6px;
     font-size: 16px;
   }
-
   .order-status {
     font-weight: 600;
     font-size: 16px;
@@ -295,7 +278,6 @@ export const Map = styled.div`
     width: 100% !important;
     height: 100% !important;
   }
-
   img {
     object-fit: cover;
   }
@@ -307,12 +289,10 @@ export const WrapperDriver = styled.div`
   display: flex;
   width: 100%;
   align-items: center;
-
   div.photo {
     display: flex;
     align-items: center;
     justify-content: center;
-
     svg {
       width: 48px;
       height: 48px;
@@ -347,7 +327,6 @@ export const OrderBill = styled.div`
       `}
     }
   }
-
   table.total {
     border-top: 1px solid #BFBFBF;
     margin-top: 15px;
@@ -365,7 +344,6 @@ export const OrderBill = styled.div`
       }
     }
   }
-
   table.comments {
     margin-top: 20px;
     align-items: center;
@@ -375,7 +353,6 @@ export const OrderBill = styled.div`
       }
     }
   }
-
   @media (min-width: 678px) {
     table {
       font-size: 16px;
@@ -405,7 +382,6 @@ export const ShareOrder = styled.div`
   margin: 0 0 20px;
   justify-content: space-between;
   z-index: 1;
-
   div.wrap {
     & > div:first-child {
       left: 0;
@@ -419,12 +395,10 @@ export const ShareOrder = styled.div`
     font-size: 15px;
     margin: 0px;
   }
-
   p {
     font-size: 13px;
     margin: 0px;
   }
-
   button {
     display: flex;
     justify-content: center;
@@ -432,28 +406,23 @@ export const ShareOrder = styled.div`
     font-size: 14px;
     align-items: center;
     background: ${props => props.theme.colors.backgroundPage};
-
     svg {
       left: 0;
       margin-right: 6px;
       color: ${props => props.theme.colors.primary};
     }
-
     &:hover {
       svg {
         color: #FFFFFF;
       }
     }
   }
-
   div.text {
     width: 60%;
   }
-
   div.wrap {
     display: flex;
     align-items: center;
-
     & > div:first-child {
       width: 100%;
       position: relative;
@@ -464,7 +433,6 @@ export const ShareOrder = styled.div`
       }
     }
   }
-
   @media (min-width: 1201px) {
     div.wrap {
       & > div:first-child {
@@ -472,7 +440,6 @@ export const ShareOrder = styled.div`
       }
     }
   }
-
   @media (min-width: 768px) {
     div.wrap {
       width: 30%;
@@ -480,15 +447,12 @@ export const ShareOrder = styled.div`
         left: 0;
       }
     }
-
     h1 {
       font-size: 20px;
     }
-
     p {
       font-size: 18px;
     }
-
     button {
       font-size: 18px;
       width: 100%;
@@ -498,16 +462,13 @@ export const ShareOrder = styled.div`
       }
     }
   }
-
   @media (min-width: 425px) {
     div.text {
       width: 70%;
     }
-
     h1 {
       font-size: 18px;
     }
-
     p {
       font-size: 15px;
     }
@@ -540,7 +501,6 @@ export const Divider = styled.div`
   background: #F8F9FA;
   width: calc(100% + 40px);
   margin-left: -20px;
-
   @media(min-width: 769px) {
     width: calc(100% + 80px);
     margin-left: -40px;
@@ -608,17 +568,14 @@ export const ReOrder = styled.div`
   margin-top: 20px;
   margin-bottom: 20px;
   flex-direction: column;
-
   button {
     padding: 5px 16px;
     min-width: unset;
     margin: 5px 5px;
-
     @media (min-width: 650px) {
       margin: 0px 5px;
     }
   }
-
   @media (min-width: 650px) {
     flex-direction: row;
   }
@@ -644,13 +601,11 @@ export const HeaderTitle = styled.div`
 `
 
 export const PlaceSpotSection = styled.div`
-
 `
 export const OrderStatusAndLinkContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-
   @media (min-width: 450px) {
     flex-direction: row;
   }
@@ -668,7 +623,6 @@ export const HistoryItemWrapper = styled.div`
   align-items: center;
   padding: 28px 23px;
   border-bottom: 1px solid ${props => props.theme.colors.gray200};
-
   > svg {
     width: 24px;
     height: 24px;
@@ -682,7 +636,6 @@ export const DetailWrapper = styled.div`
     margin-left: 0px;
     margin-right: 50px;
   `}
-
   h3 {
     font-weight: 600;
     font-size: 16px;
@@ -703,7 +656,6 @@ export const ButtonWrapper = styled.div`
     width: 100%;
     height: 44px;
     position: relative;
-
     svg {
       position: absolute;
       top: 10px;
@@ -721,7 +673,6 @@ export const ButtonWrapper = styled.div`
 export const MapWrapper = styled.div`
   width: 100%;
   margin-top: 20px;
-
   @media (min-width: 769px) {
     width: 50%;
     margin-top: 0px;
@@ -732,7 +683,6 @@ export const BusinessExternalWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-
   @media (min-width: 769px) {
     width: 50%;
   }
@@ -745,7 +695,6 @@ export const ProfessionalWrapper = styled.div`
   display: flex;
   align-items: center;
   margin: 0px 10px 10px 10px;
-
   > img {
     width: 55px;
     height: 55px;
@@ -753,25 +702,21 @@ export const ProfessionalWrapper = styled.div`
     border-radius: 8px;
     object-fit: cover;
   }
-
   > svg {
     width: 55px;
     height: 55px;
     min-width: 55px;
   }
-
   > p {
     font-weight: 600;
     font-size: 17px;
     line-height: 26px;
     margin-left: 14px;
-
     ${props => props.theme.rtl && css`
       margin-left: 0px;
       margin-right: 14px;
     `}
   }
-
   @media (min-width: 411px) {
     > img {
       width: 65px;

package/src/themes/five/src/components/OrderItAgain/styles.js

@@ -54,7 +54,25 @@ export const ProductList = styled.div`
   box-sizing: border-box;
   align-items: center;
 
+  button {
+    padding: 0px;
+  }
+
+  .order-it-again-logo {
+    max-width: 75px;
+    max-height: 100px;
+    height: 100px;
+    width: 75px;
+  }
+
+  .image {
+    min-height: 75px;
+  }
+
   #orderItAgain > div {
     width: 350px;
+    ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`
+      width: 230px;
+    `}
   }
 `

package/src/themes/five/src/components/OrdersOption/index.js

@@ -4,7 +4,6 @@ import moment from 'moment'
 import { useLanguage, useOrder, useEvent, OrderList } from 'ordering-components-external'
 import { HorizontalOrdersLayout } from '../HorizontalOrdersLayout'
 import { VerticalOrdersLayout } from '../../../../../components/VerticalOrdersLayout'
-import { NotFoundSource } from '../../../../../components/NotFoundSource'
 
 import { useTheme } from 'styled-components'
 
@@ -46,7 +45,6 @@ const OrdersOptionUI = (props) => {
     isBusinessesLoading,
     pastOrders,
     preOrders,
-    selectItem,
     setIsEmptyPast,
     setIsEmptyActive,
     setIsEmptyPreorder,
@@ -67,7 +65,8 @@ const OrdersOptionUI = (props) => {
     professionals,
     handleUpdateProfessionals,
     businesses,
-    handleUpdateBusinesses
+    handleUpdateBusinesses,
+    getPage
   } = props
 
   const [, t] = useLanguage()
@@ -77,10 +76,6 @@ const OrdersOptionUI = (props) => {
   const { width } = useWindowSize()
   const { loading, error, orders: values } = orderList
 
-  const imageFails = activeOrders
-    ? theme.images?.general?.emptyActiveOrders
-    : theme.images?.general?.emptyPastOrders
-
   const orders = customArray || values || []
   const isShowTitles = businessesIds
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)
@@ -98,6 +93,10 @@ const OrdersOptionUI = (props) => {
     }
   }
 
+  const handleChangePage = (page) => {
+    getPage(page)
+  }
+
   const showSkeletons = (!isBusiness && !isProducts && loading) || (businesses?.loading && isBusiness) || (products?.length === 0 && isProducts && ((!businessesSearchList && loading) || businessesSearchList?.loading))
 
   const getOrderStatus = (s) => {
@@ -215,13 +214,6 @@ const OrdersOptionUI = (props) => {
               </h1>
             </OptionTitle>
           )}
-          {!loading && orders.length === 0 && selectItem !== 'all' && (
-            <NotFoundSource
-              image={imageFails}
-              content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-              conditioned
-            />
-          )}
         </>
       )}
       {isBusiness && businessOrderIds?.length > 0 && (
@@ -329,7 +321,7 @@ const OrdersOptionUI = (props) => {
         horizontal ? (
           <HorizontalOrdersLayout
             businessesIds={businessesIds}
-            orders={orders.filter(order => orderStatus.includes(order.status)).sort((a, b) => moment(b?.delivery_datetime_utc).valueOf() - moment(a?.delivery_datetime_utc).valueOf())}
+            orders={orders?.filter(order => orderStatus?.includes(order.status)).sort((a, b) => moment(b?.delivery_datetime_utc)?.valueOf() - moment(a?.delivery_datetime_utc)?.valueOf())}
             pagination={pagination}
             onRedirectPage={onRedirectPage}
             loadMoreOrders={loadMoreOrders}
@@ -344,6 +336,7 @@ const OrdersOptionUI = (props) => {
             isCustomerMode={isCustomerMode}
             isBusiness={isBusiness}
             isProducts={isProducts}
+            handleChangePage={handleChangePage}
           />
         ) : (
           <VerticalOrdersLayout
@@ -354,6 +347,7 @@ const OrdersOptionUI = (props) => {
             onRedirectPage={onRedirectPage}
             getOrderStatus={getOrderStatus}
             handleReorder={handleReorder}
+            handleUpdateOrderList={handleUpdateOrderList}
           />
         )
       )}
@@ -390,7 +384,7 @@ export const OrdersOption = (props) => {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: getAllOrders ? 30 : 10,
+      pageSize: 3,
       controlType: 'infinity'
     }
   }

package/src/themes/five/src/components/OrdersOption/styles.js

@@ -22,8 +22,6 @@ export const OrdersContainer = styled.div`
     padding: 0 10px;
     text-align: center;
     display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
     justify-content: ${({ ordersLength }) => !ordersLength ? 'flex-start' : 'center'};
     width: 100%;
     margin: auto 0px auto auto;
@@ -36,7 +34,7 @@ export const OrdersContainer = styled.div`
       height: 0px;
     }
 
-    ${({ isSkeleton }) => !isSkeleton && css`   
+    ${({ isSkeleton }) => !isSkeleton && css`
       ::-webkit-scrollbar {
       width: 6px;
       height: 6px;

package/src/themes/five/src/components/PageBanner/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { PageBanner as PageBannerController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import SwiperCore, {
+  Navigation
+} from 'swiper'
+import 'swiper/swiper-bundle.min.css'
+import 'swiper/swiper.min.css'
+
+import {
+  BannerContainer,
+  ImageWrapper
+} from './styles'
+
+SwiperCore.use([Navigation])
+
+const PageBannerUI = (props) => {
+  const {
+    pageBannerState
+  } = props
+
+  return (
+    <>
+      {pageBannerState.loading ? (
+        <BannerContainer>
+          <Skeleton height={250} />
+        </BannerContainer>
+      ) : (
+        pageBannerState.banner?.items && (
+          <BannerContainer>
+            <Swiper
+              navigation
+              spaceBetween={0}
+              loop={pageBannerState.banner?.items.length > 1}
+            >
+              {pageBannerState.banner?.items.map((img, i) => (
+                <SwiperSlide key={i}>
+                  <ImageWrapper>
+                    <img src={img.url} className='banner-img' alt='' />
+                  </ImageWrapper>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </BannerContainer>
+        )
+      )}
+    </>
+  )
+}
+
+export const PageBanner = (props) => {
+  const pageBannerProps = {
+    ...props,
+    UIComponent: PageBannerUI
+  }
+  return <PageBannerController {...pageBannerProps} />
+}

package/src/themes/five/src/components/PageBanner/styles.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components'
+
+export const BannerContainer = styled.div`
+  width: 100%;
+  margin: 40px 0;
+  overflow: hidden;
+  .swiper-slide {
+    /* position: relative; */
+    /* height: 256px; */
+  }
+  .swiper-button-next {
+    background-image: url(${props => props.theme.images.general.rightArrow});
+    background-color: #d1d0d04d;
+    background-repeat: no-repeat;
+    background-position: 55% center;
+    width: 32px;
+    height: 32px;
+    box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .swiper-button-prev {
+    background-image: url(${props => props.theme.images.general.leftArrow});
+    background-color: #d1d0d04d;
+    background-repeat: no-repeat;
+    background-position: 45% center;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    box-shadow: rgb(0 0 0 / 7%) 0px 4px 10px;
+    transition: all 0.2s ease;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .swiper-button-next::after, .swiper-button-prev::after {
+    display: none;
+  }
+`
+export const ImageWrapper = styled.div`
+  width: 100%;
+  padding-top: 260px;
+  position: relative;
+  .banner-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  @media (min-width: 768px) {
+    padding-top: 18%;
+  }
+`