ordering-ui-external 10.4.1 → 10.5.0

package/src/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/index.js

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { AutoScroll } from '../../AutoScroll'
+import { SingleGiftCard } from '../SingleGiftCard'
+import { Pagination } from '../../Pagination'
+import {
+  ProductsListContainer,
+  ProductsList,
+  PaginationWrapper
+} from './styles'
+
+const HorizontalGiftCardOrdersLayoutUI = (props) => {
+  const {
+    giftCards,
+    paginationProps,
+    goToPage,
+    title,
+    setIsEmpty,
+    scrollId
+  } = props
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <>
+      {giftCards.loading
+        ? <Skeleton width={100} height={24} />
+        : giftCards.list?.length > 0 && <h2>{title}</h2>}
+      <ProductsListContainer>
+        <ProductsList>
+          <AutoScroll scrollId={scrollId}>
+            {giftCards.loading ? (
+              [...Array(10).keys()].map(i => (
+                <SingleGiftCard
+                  isSkeleton
+                  key={i}
+                />
+              ))
+            ) : (
+              <>
+                {giftCards.list.map(card => (
+                  <SingleGiftCard
+                    key={card.id}
+                    card={card}
+                  />
+                ))}
+              </>
+            )}
+          </AutoScroll>
+        </ProductsList>
+      </ProductsListContainer>
+      {giftCards.list?.length > 0 && Math.ceil(paginationProps?.totalPages) > 1 && (
+        <PaginationWrapper>
+          <Pagination
+            currentPage={paginationProps.currentPage}
+            totalPages={Math.ceil(paginationProps?.totalPages)}
+            handleChangePage={goToPage}
+          />
+        </PaginationWrapper>
+      )}
+    </>
+  )
+}
+
+export const HorizontalGiftCardOrdersLayout = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: HorizontalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/src/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const ProductsListContainer = styled.div`
+  margin-top: 10px;
+  display: flex;
+  overflow: scroll hidden;
+`
+
+export const ProductsList = styled.div`
+  display: flex;
+  box-sizing: border-box;
+
+  .product-card {
+    width: 270px;
+    max-width: 270px;
+    margin: 10px;
+    border: 1px solid #E9ECEF;
+  }
+
+  @media(min-width: 480px){
+    .product-card {
+      width: 400px;
+      max-width: 400px;
+    }
+  }
+`
+export const PaginationWrapper = styled.div`
+  margin: 20px 0;
+`

package/src/themes/five/src/components/GiftCard/SingleGiftCard/index.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useLanguage, useUtils, useEvent } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+import BsDot from '@meronex/icons/bs/BsDot'
+
+import {
+  CardContainer,
+  CardLogo,
+  CardInfo
+} from './styles'
+
+export const SingleGiftCard = (props) => {
+  const {
+    card,
+    isSkeleton
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+
+  const getGiftCardStatus = (status) => {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending')
+      case 'activated':
+        return t('REDEEMED')
+      default:
+        return status
+    }
+  }
+
+  const handleClickGiftCardOrder = (card) => {
+    events.emit('go_to_page', { page: 'order_detail', params: { orderId: card.order_product?.order_id } })
+  }
+
+  return (
+    <CardContainer
+      className='product-card'
+      onClick={() => handleClickGiftCardOrder(card)}
+    >
+      {isSkeleton ? (
+        <Skeleton height={86} width={86} />
+      ) : (
+        <CardLogo
+          bgimage={optimizeImage(card?.order_product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+        />
+      )}
+      <CardInfo>
+        <div>
+          {isSkeleton ? (
+            <Skeleton height={16} width={100} />
+          ) : (
+            <span className='name'>{card?.order_product?.name}</span>
+          )}
+          {isSkeleton ? (
+            <Skeleton height={16} width={80} />
+          ) : (
+            <span>{parsePrice(card?.order_product?.price)}</span>
+          )}
+        </div>
+        {isSkeleton ? (
+          <p className='date'><Skeleton width={150} height={14} /></p>
+        ) : (
+          <p className='date'>
+            {t('ORDER_NUM', 'Order No.')} {card?.order_product?.order_id}<BsDot />{parseDate(card?.created_at)}
+          </p>
+        )}
+        {isSkeleton ? (
+          <p className='status'><Skeleton width={80} height={14} /></p>
+        ) : (
+          <p className='status'>{getGiftCardStatus(card?.status)}</p>
+        )}
+      </CardInfo>
+    </CardContainer>
+  )
+}

package/src/themes/five/src/components/GiftCard/SingleGiftCard/styles.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const CardContainer = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage};
+  display: flex;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 7.6px;
+
+  &:hover {
+    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
+  }
+`
+const CardLogoStyled = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  background-position: center;
+  object-fit: cover;
+  height: 86px;
+  width: 86px;
+  min-width: 86px;
+  min-height: 86px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
+`
+export const CardLogo = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)'
+  }
+  return (
+    <CardLogoStyled {...props} style={style}>
+      {props.children}
+    </CardLogoStyled>
+  )
+}
+
+export const CardInfo = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 15px;
+  ` : css`
+    margin-left: 15px;
+  `}
+
+  flex: 1;
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    font-weight: 600;
+    span.name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  
+  p.date {
+    font-size: 14px;
+    color: ${props => props.theme.colors.darkGray};
+    margin: 7px 0;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+  }
+  p.status {
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.primary};
+    margin: 0;
+  }
+`

package/src/themes/five/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.js

@@ -0,0 +1,72 @@
+import React, { useEffect } from 'react'
+import { useLanguage, GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { SingleGiftCard } from '../SingleGiftCard'
+import { Button } from '../../../styles/Buttons'
+
+import {
+  ProductsListContainer,
+  WrappButton,
+  SingleGiftCardWrapper
+} from './styles'
+
+const VerticalGiftCardOrdersLayoutUI = (props) => {
+  const {
+    giftCards,
+    paginationProps,
+    loadMoreOrders,
+    title,
+    setIsEmpty
+  } = props
+
+  const [, t] = useLanguage()
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <ProductsListContainer>
+      {giftCards.loading
+        ? <Skeleton width={100} height={24} />
+        : giftCards.list?.length > 0 && <h2>{title}</h2>}
+      {giftCards.list.map(card => (
+        <SingleGiftCardWrapper key={card.id}>
+          <SingleGiftCard
+            card={card}
+          />
+        </SingleGiftCardWrapper>
+      ))}
+      {giftCards.loading && (
+        [...Array(10).keys()].map(i => (
+          <SingleGiftCardWrapper key={i}>
+            <SingleGiftCard
+              isSkeleton
+            />
+          </SingleGiftCardWrapper>
+        ))
+      )}
+      {paginationProps.totalPages && paginationProps.currentPage < paginationProps.totalPages && (
+        <WrappButton>
+          <Button
+            outline
+            color='primary'
+            bgtransparent
+            onClick={loadMoreOrders}
+          >
+            {t('LOAD_MORE_ORDERS', 'Load more orders')}
+          </Button>
+        </WrappButton>
+      )}
+    </ProductsListContainer>
+  )
+}
+
+export const VerticalGiftCardOrdersLayout = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: VerticalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/src/themes/five/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+import { darken } from 'polished'
+
+export const ProductsListContainer = styled.div`
+  margin-top: 10px;
+`
+export const SingleGiftCardWrapper = styled.div`
+  border-bottom: 1px solid #E9ECEF;
+  padding: 20px 0;
+`
+export const WrappButton = styled.div`
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto;
+
+  button {
+    padding: 10px 0px;
+    width: 100%;
+  }
+
+  button:hover{
+    color: ${props => darken(0.07, props.theme.colors.primary)};
+  }
+
+  @media (min-width: 768px) {
+    button {
+      width: 60%;
+    }
+  }
+`

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { useLanguage } from 'ordering-components-external'
 import { ProfileOptions } from '../../../../../components/UserProfileForm/ProfileOptions'
 import { OrdersOption } from '../OrdersOption'
+import { GiftCardOrdersList } from '../GiftCard/GiftCardOrdersList'
 import { Button } from '../../styles/Buttons'
 import MdClose from '@meronex/icons/ios/MdClose'
 import { useHistory } from 'react-router-dom'
@@ -41,7 +42,8 @@ export const MyOrders = (props) => {
   const MyOrdersMenu = [
     { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
     { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
-    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab },
+    { key: 'giftCards', value: t('GIFT_CARD', 'Gift card'), disabled: false }
   ]
 
   const notOrderOptions = ['business', 'products', 'professionals']
@@ -144,6 +146,9 @@ export const MyOrders = (props) => {
             onProductRedirect={onProductRedirect}
           />
         )}
+        {selectedOption === 'giftCards' && (
+          <GiftCardOrdersList />
+        )}
       </Container>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -133,7 +133,7 @@ const OrderProgressUI = (props) => {
 
 export const OrderProgress = (props) => {
   const propsToFetchBusiness = ['name', 'logo', 'slug', 'id']
-  const propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary']
+  const propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary', 'eta_current_status_time', 'eta_previous_status_times', 'eta_time', 'delivered_in', 'prepared_in', 'eta_drive_time']
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,

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

@@ -365,6 +365,7 @@ export const OrdersOption = (props) => {
   const orderListProps = {
     ...props,
     UIComponent: OrdersOptionUI,
+    noGiftCardOrders: true,
     orderStatus: getAllOrders
       ? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
       : props.activeOrders