ordering-ui-external 10.4.0 → 10.5.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

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

@@ -4,7 +4,8 @@ import {
   PhoneAutocomplete as PhoneAutocompleteController,
   useLanguage,
   useOrder,
-  useCustomer
+  useCustomer,
+  useConfig
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 
@@ -22,7 +23,14 @@ import {
   Slogan,
   UserEdit,
   WrappBtn,
-  SelectContainer
+  SelectContainer,
+  TypesContainer,
+  TypeButton,
+  IconTypeButton,
+  AdditionalTypesContainer,
+  PhoneAutocompleteContainer,
+  ImageWrapper,
+  ContinueButton
 } from './styles'
 
 import MdcCellphoneAndroid from '@meronex/icons/mdc/MdcCellphoneAndroid'
@@ -39,19 +47,26 @@ const PhoneAutocompleteUI = (props) => {
     onChangeNumber,
     setCustomerState,
     countryCallingCode,
-    onRedirectPage
+    onRedirectPage,
+    urlPhone,
+    orderTypes,
+    localPhoneCode
   } = props
-  const [orderState] = useOrder()
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 3, 4, 5]
+  const [orderState, { changeType }] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
   const [, { deleteUserCustomer }] = useCustomer()
+  const [configState] = useConfig()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState(urlPhone ?? '')
   const [optSelected, setOptSelected] = useState(null)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
+  const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
-
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
     ? `${userCustomer?.name} ${userCustomer?.lastname}`
     : userCustomer?.name
@@ -75,6 +90,15 @@ const PhoneAutocompleteUI = (props) => {
     }
   }
 
+  const handleChangeType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      if (value === 1) {
+        setIsPickupSelected(false)
+      }
+    }
+  }
+
   useEffect(() => {
     if (customersPhones?.error) {
       setAlertState({ open: true, content: [customersPhones?.error] })
@@ -97,13 +121,16 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const onChange = (option) => {
-    if (!option) { onChangeNumber('') }
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
+    if (!option) { onChangeNumber(''); return }
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)
     if (user) {
       setCustomerState({ ...customerState, result: user })
-      setOpenModal({ ...openModal, customer: true })
+      setOpenModal({ signup: false, customer: true })
+    } else {
+      setCustomerState({ ...customerState, result: { error: false } })
+      setOpenModal({ customer: false, signup: true })
     }
   }
 
@@ -119,11 +146,17 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const handleCloseAddressList = () => {
-    setOpenModal({ openModal, customer: false })
+    setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
     deleteUserCustomer(true)
   }
 
+  const handleChangeToPickup = () => {
+    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
+    handleChangeType(firstEnabledPickupType)
+    setIsPickupSelected(true)
+  }
+
   const optionsToSelect = customersPhones.users.map(user => {
     const obj = {}
     obj.value = user.cellphone || user.phone
@@ -131,53 +164,140 @@ const PhoneAutocompleteUI = (props) => {
     return obj
   }) || []
 
+  useEffect(() => {
+    if (!urlPhone) return
+    onInputChange(urlPhone, { action: 'url' })
+    onChange({ value: urlPhone, label: urlPhone })
+  }, [urlPhone, customersPhones?.users?.length])
+
+  useEffect(() => {
+    if (pickupTypes.includes(orderState?.options?.type)) {
+      setIsPickupSelected(true)
+    }
+  }, [orderState?.options?.type])
+
+  const OrderTypesComponent = () => {
+    return (
+      <>
+        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && type.value !== 1) : orderTypes).map((item, i) => (
+          <Button
+            key={item.value}
+            onClick={() => handleChangeType(item.value)}
+            color={orderState?.options?.type === item?.value ? 'primary' : 'secondary'}
+            disabled={orderState?.loading}
+            className={orderState?.options?.type !== item?.value ? 'activated' : ''}
+          >
+            {item.text}
+          </Button>
+        ))}
+      </>
+    )
+  }
+
   return (
     <>
-      <PhoneContainer bgimage={theme.images?.general?.homeHero}>
+      <PhoneContainer>
         <ContentWrapper>
           <Title>{t('TITLE_HOME_CALLCENTER', 'Welcome to your Ordering Call Center.')}</Title>
-          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start First by adding the customers\' phone number')}</Slogan>
-          {!userCustomer && (
-            <SelectContainer>
-              <MdcCellphoneAndroid size={26} />
-              <Select
-                isSearchable
-                isClearable
-                className='basic-single'
-                classNamePrefix='select'
-                placeholder={t('PHONE_NUMBER', 'Phone number')}
-                value={optSelected}
-                noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
-                inputValue={!optSelected ? inputValue : ''}
-                onChange={onChange}
-                onInputChange={onInputChange}
-                isLoading={customersPhones?.loading}
-                options={optionsToSelect}
-              />
-            </SelectContainer>
+          <Slogan>{t('SUBTITLE_HOME_CALLCENTER', 'Start first by selecting a delivery type')}</Slogan>
+          {!(userCustomer && orderState?.options?.address?.address) && (
+            <TypesContainer>
+              {configTypes.includes(1) && (
+                <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={!isPickupSelected}>
+                  <IconTypeButton activated={!isPickupSelected}>
+                    <img
+                      src={theme?.images?.general?.deliveryIco}
+                      width={20}
+                      height={20}
+                    />
+                  </IconTypeButton>
+                  <p>{t('DELIVERY', 'Delivery')}</p>
+                </TypeButton>
+              )}
+              {configTypes.some(type => pickupTypes.includes(type)) && (
+                <TypeButton
+                  disabled={orderState?.loading}
+                  activated={isPickupSelected}
+                  onClick={() => handleChangeToPickup()}
+                >
+                  <IconTypeButton activated={isPickupSelected}>
+                    <img
+                      src={theme?.images?.general?.pickupIco}
+                      width={22}
+                      height={22}
+                    />
+                  </IconTypeButton>
+                  <p>{t('PICKUP', 'Pickup')}</p>
+                </TypeButton>
+              )}
+            </TypesContainer>
+          )}
+          {isPickupSelected && (
+            <>
+              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
+              <AdditionalTypesContainer>
+                <OrderTypesComponent />
+              </AdditionalTypesContainer>
+            </>
+          )}
+          {configTypes.includes(orderState?.options?.type) && (
+            <>
+              {!userCustomer && (
+                <PhoneAutocompleteContainer>
+                  <h2>
+                    {t('ADDING_CUSTOMERS_PHONE_NUMBER', 'Adding the customers’ phone number')}
+                  </h2>
+                  <WrappBtn>
+                    <Button
+                      color={(inputValue || (userCustomer && orderState?.options?.address?.address)) ? 'primary' : 'secundary'}
+                      onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
+                      disabled={(!inputValue && !(userCustomer && orderState?.options?.address?.address))}
+                    >
+                      {
+                        !(userCustomer && orderState?.options?.address?.address)
+                          ? t('CREATE_CUSTOMER', 'Create new customer')
+                          : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
+                      }
+                    </Button>
+                  </WrappBtn>
+                  <SelectContainer>
+                    <MdcCellphoneAndroid size={18} color={theme?.colors?.primary} />
+                    <Select
+                      isSearchable
+                      isClearable
+                      className='basic-single'
+                      classNamePrefix='select'
+                      placeholder={t('PHONE_NUMBER', 'Phone number')}
+                      value={optSelected}
+                      noOptionsMessage={() => inputValue?.length > 6 ? t('NO_OPTIONS', 'No options') : t('TYPE_AT_LEAST_NUMBER_SUGGEST', 'Type at least 7 numbers for suggesstions')}
+                      inputValue={!optSelected ? inputValue : ''}
+                      onChange={onChange}
+                      onInputChange={onInputChange}
+                      isLoading={customersPhones?.loading}
+                      options={optionsToSelect}
+                    />
+                    {optSelected && (
+                      <ContinueButton>
+                        <Button onClick={() => onChange(optSelected)} color='primary'>
+                          {t('CONTINUE', 'Continue')}
+                        </Button>
+                      </ContinueButton>
+                    )}
+                  </SelectContainer>
+                </PhoneAutocompleteContainer>
+              )}
+            </>
           )}
-          <WrappBtn>
-            <Button
-              color={inputValue || (userCustomer && orderState?.options?.address?.address) ? 'primary' : 'secundary'}
-              onMouseDown={() => !(userCustomer && orderState?.options?.address?.address) ? createNewUser() : handleFindClick()}
-              disabled={!inputValue && !(userCustomer && orderState?.options?.address?.address)}
-            >
-              {
-                !(userCustomer && orderState?.options?.address?.address)
-                  ? t('CREATE_CUSTOMER', 'Create new customer')
-                  : `${t('CONTINUE_WITH', 'Continue with')} ${userName}`
-              }
-            </Button>
-          </WrappBtn>
         </ContentWrapper>
+        <ImageWrapper bgimage={theme?.images?.general?.phoneHero} />
       </PhoneContainer>
       <Modal
         open={openModal.signup}
         width='80%'
-        onClose={() => setOpenModal({ openModal, signup: false })}
+        onClose={() => setOpenModal({ ...openModal, signup: false })}
       >
         <SignUpForm
-          externalPhoneNumber={`${countryCallingCode} ${optSelected?.value || phone}`}
+          externalPhoneNumber={`${localPhoneCode || countryCallingCode} ${optSelected?.value || phone}`}
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds
@@ -210,7 +330,8 @@ const PhoneAutocompleteUI = (props) => {
                 changeOrderAddressWithDefault
                 userCustomerSetup={{
                   ...customerState?.result,
-                  phone
+                  phone,
+                  urlPhone
                 }}
                 isEnableContinueButton
                 isCustomerMode
@@ -234,9 +355,37 @@ const PhoneAutocompleteUI = (props) => {
 }
 
 export const PhoneAutocomplete = (props) => {
+  const [, t] = useLanguage()
   const phoneProps = {
     UIComponent: PhoneAutocompleteUI,
-    ...props
+    ...props,
+    orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        text: t('DELIVERY', 'Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+      },
+      {
+        value: 2,
+        text: t('PICKUP', 'Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
+      },
+      {
+        value: 3,
+        text: t('EAT_IN', 'Eat in'),
+        description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
+      },
+      {
+        value: 4,
+        text: t('CURBSIDE', 'Curbside'),
+        description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
+      },
+      {
+        value: 5,
+        text: t('DRIVE_THRU', 'Drive thru'),
+        description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
+      }
+    ]
   }
 
   return <PhoneAutocompleteController {...phoneProps} />

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

@@ -1,9 +1,10 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const PhoneContainer = styled.div`
   width: 100%;
   height: calc(100vh - 97px);
-
+  display: flex;
   ${({ bgimage }) => bgimage && css`
     background-repeat: no-repeat, repeat;
     background-size: cover;
@@ -78,10 +79,7 @@ export const ContentWrapper = styled.div`
   justify-content: center;
   height: 100%;
   padding: 0px 20px 0px;
-
-  .basic-single {
-    margin-bottom: 15px;
-  }
+  width: 70%;
 
   .select__control {
     border-radius: 30px;
@@ -126,11 +124,14 @@ export const ContentWrapper = styled.div`
         padding: 0px 40px 0px;
       `}
     }
+    @media (min-width: 1400px){
+      width: 60%;
+    }
 `
 
 export const WrappBtn = styled.div`
   width: 50%;
-
+  margin-top: 20px;
   button {
     min-width: 130px;
     max-width: 400px;
@@ -145,7 +146,6 @@ export const Title = styled.h1`
   text-align: left;
   font: normal normal normal 80px ${props => props.theme.fonts.special?.name || 'Georgia'};
   letter-spacing: 0px;
-  color: #ffffff;
   text-shadow: 0px 3px 6px #00000029;
   opacity: 1;
   font-size: 35px;
@@ -160,7 +160,6 @@ export const Slogan = styled.p`
   text-align: left;
   font-size: 18px;
   letter-spacing: 0px;
-  color: #fff;
   opacity: 1;
   margin-bottom: 15px;
 
@@ -256,7 +255,7 @@ export const SelectContainer = styled.div`
   svg{
     position: absolute;
     top: 0;
-    left: 0;
+    left: 20px;
     transform: translate(50%, 70%);
     z-index: 10;
   }
@@ -264,7 +263,8 @@ export const SelectContainer = styled.div`
     width: 100%;
     .select__placeholder, .select__single-value, input {
       margin-left: 40px;
-      z-index: 100
+      z-index: 100;
+      bottom: -10px;
     }
     .select__menu {
       position: relative;
@@ -279,6 +279,18 @@ export const SelectContainer = styled.div`
         height: 30px;
       }
     }
+    .select__control {
+      height: 45px;
+      padding-left: 10px;
+    }
+    .select__indicator {
+      bottom: 8px;
+      position: relative;
+    }
+    input {
+      position: relative;
+      top: -5px;
+    }
   }
 `
 
@@ -287,3 +299,87 @@ export const SearchContainer = styled.div`
   top: 0;
   width: 90%;
 `
+
+const ImageWrapperStyled = styled.div`
+  width: 30%;
+  ${({ bgimage }) => bgimage && css`
+    background-repeat: no-repeat, repeat;
+    background-size: cover;
+    object-fit: cover;
+    background-position: center;
+  `}
+  @media (min-width: 1400px){
+    width: 40%;
+  }
+`
+
+export const ImageWrapper = (props) => {
+  const style = {}
+  style.backgroundImage = `url(${props.bgimage})`
+
+  return (
+    <ImageWrapperStyled {...props} style={style}>
+      {props.children}
+    </ImageWrapperStyled>
+  )
+}
+
+export const TypeButton = styled.div`
+  display: flex;
+  align-items: center;
+  width: 215px;
+  height: 75px;
+  border-radius: 7.6px;
+  padding: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  margin-right: 32px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.primary : theme?.colors?.white};
+  p{
+    margin: 0;
+    margin-left: 33px;
+    ${({ activated, theme }) => activated && css`
+      color: ${theme?.colors?.white};
+    `}
+  }
+`
+
+export const IconTypeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  border-radius: 44px;
+`
+
+export const TypesContainer = styled.div`
+  display: flex;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  button {
+    padding: 4px 10px;
+    border-radius: 50px;
+    font-size: 10px;
+    line-height: 0;
+    height: 25px;
+    margin-right: 20px;
+  }
+  .activated {
+    color: ${({ theme }) => theme?.colors?.darkTextColor}
+  }
+`
+
+export const PhoneAutocompleteContainer = styled.div`
+
+  h2 {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+`

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

@@ -416,6 +416,7 @@ const ProductOptionsUI = (props) => {
               observer
               observeParents
               parallax
+              slidesPerView={1}
               thumbs={{ swiper: thumbsSwiper }} className='mySwiper2'
               onSlideChange={() => handleSlideChange()}
             >

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

@@ -337,6 +337,7 @@ export const RenderProductsLayout = (props) => {
                       handleUpdateProducts={handleUpdateProducts}
                       professionalSelected={professionalSelected}
                       handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                      previouslyProducts={businessState?.business?.previously_products}
                     />
                   </WrapContent>
                 </BusinessCategoryProductWrapper>

package/src/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -237,7 +237,7 @@ export const QuantityContainer = styled.div`
   color: ${({ theme }) => theme.colors.primaryContrast};
   position: absolute;
   left: 100%;
-  bottom: 100%;
+  bottom: 98%;
   width: 25px;
   height: 25px;
   text-align: center;