ordering-ui-external 2.6.7 → 2.7.0

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { LanguageSelector as LanguageSelectorController } from 'ordering-components-external'
 import { Select } from '../../styles/Select'
 import { Container } from './styles'
@@ -40,6 +40,7 @@ const LanguageSelectorUI = (props) => {
           src={`http://purecatamphetamine.github.io/country-flag-icons/3x2/${transformLanguageToCountry(currentLanguage)}.svg`}
         />
         <Select
+          zIndex={20000}
           isHomeStyle
           options={languagesState?.loading ? defaultLanguages : _languages}
           defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}

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

@@ -11,7 +11,8 @@ import {
   useSession,
   useToast, ToastType,
   ReCaptcha,
-  useApi
+  useApi,
+  useOptimizationLoad
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
@@ -96,6 +97,7 @@ const LoginFormUI = (props) => {
   const theme = useTheme()
   const [, { showToast }] = useToast()
   const [{ configs }] = useConfig()
+  const [optimizationLoad] = useOptimizationLoad()
   const formMethods = useForm()
   const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -118,9 +120,9 @@ const LoginFormUI = (props) => {
     scope: 'profile'
   }
 
-  const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-  const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-  const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+  const googleLoginEnabled = optimizationLoad?.result?.configs?.google_login_enabled?.value === '1'
+  const facebookLoginEnabled = optimizationLoad?.result?.configs?.facebook_login_enabled?.value === '1'
+  const appleLoginEnabled = optimizationLoad?.result?.configs?.apple_login_enabled?.value === '1'
 
   const spoonityTitle = configs?.spoonity_title?.value
 

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

@@ -22,6 +22,7 @@ export const ModalDialog = styled.div`
   max-height: 100vh;
   overflow: auto;
   overflow-x: ${({ disableOverflowX }) => disableOverflowX ? 'hidden' : 'auto'};
+  z-index: 10001;
   @media (min-width: 769px) {
     width: ${({ width }) => width || '50%'};
     max-height: 90vh;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
 import { MomentPopover } from '../../../../pwa/src/components/MomentPopover'
 import { OrderTypeSelectorHeader } from '../../../../../components/OrderTypeSelectorHeader'
@@ -13,6 +13,7 @@ import {
   FeatureItems,
   ItemInline
 } from './styles'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 export const OrderContextUI = (props) => {
   const { isCheckOut, setMapErrors, isCustomerMode, isBusinessList } = props
@@ -25,7 +26,7 @@ export const OrderContextUI = (props) => {
   const [openPopover, setOpenPopover] = useState({})
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-
+  const windowSize = useWindowSize()
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
 
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
@@ -66,6 +67,12 @@ export const OrderContextUI = (props) => {
     }
   }
 
+  useEffect(() => {
+    const handleCloseallPopovers = () => handleClosePopover('moment')
+    window.addEventListener('scroll', handleCloseallPopovers)
+    return () => window.removeEventListener('scroll', handleCloseallPopovers)
+  }, [])
+
   return (
     <>
       <Container isBusinessList={isBusinessList} hero={props.hideHero} isCheckOut={isCheckOut}>
@@ -78,7 +85,7 @@ export const OrderContextUI = (props) => {
         </AddressMenu>
         <FeatureItems>
           <ItemInline>
-            <OrderTypeSelectorHeader configTypes={configTypes} />
+            <OrderTypeSelectorHeader configTypes={configTypes} autoCloseWhenScroll={windowSize.width < 576} />
           </ItemInline>
           {isPreOrderSetting && (
             <ItemInline>

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

@@ -175,7 +175,7 @@ export const OrderBillSection = (props) => {
               </tr>
             ))
           }
-          {order?.summary?.delivery_price > 0 && (
+          {typeof order?.summary?.delivery_price === 'number' && (
             <tr>
               <td>{t('DELIVERY_FEE', theme?.defaultLanguages?.DELIVERY_FEE || 'Delivery Fee')}</td>
               <td>{parsePrice(order?.summary?.delivery_price)}</td>

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

@@ -12,14 +12,31 @@ export const OrderEta = (props) => {
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
 
   const getEstimatedDeliveryTime = () => {
-    let _estimatedTime = null
+    let estimatedUtcTime = null
     let totalEta = 0
+    if (order?.delivered_in) totalEta += order?.delivered_in
+    if (order?.prepared_in) totalEta += order?.prepared_in
+    if (order?.delivery_type === 1 && order?.eta_drive_time) {
+      totalEta += order?.eta_drive_time
+    }
+
     const _delivery = order?.delivery_datetime_utc
       ? order?.delivery_datetime_utc
       : order?.delivery_datetime
+
     if (order?.eta_current_status_time) {
       const currentStatueEta = order?.eta_current_status_time
       totalEta += currentStatueEta
+      let previousStatusTimes = 0
+      if (order?.eta_previous_status_times) {
+        Object.keys(order.eta_previous_status_times).map(key => {
+          if (!key.includes('status_penalty')) {
+            previousStatusTimes += order.eta_previous_status_times[key]
+          }
+        })
+      }
+      totalEta += previousStatusTimes
+
       let nextStatusTimes = 0
       if (order?.eta_next_status_times) {
         Object.keys(order.eta_next_status_times).map(key => {
@@ -28,7 +45,6 @@ export const OrderEta = (props) => {
           }
         })
       }
-
       totalEta += nextStatusTimes
 
       const diffTimeAsSeconds = moment.utc(order?.reporting_data?.at[`status:${order.status}`]).add(order?.eta_current_status_time, 'minutes').diff(moment().utc(), 'seconds')
@@ -36,15 +52,11 @@ export const OrderEta = (props) => {
       if (diffTimeAsMinutes <= 0) {
         totalEta += (Math.floor(Math.abs(diffTimeAsMinutes / order?.eta_current_status_time) + 1) * order?.eta_current_status_penalty_time)
       }
-      _estimatedTime = moment.utc(_delivery).add(totalEta, 'minutes')
     } else {
-      let timesToAdd = 0
-      if (order?.delivered_in) timesToAdd += order?.delivered_in
-      if (order?.prepared_in) timesToAdd += order?.prepared_in
-      const _etaTime = order?.eta_time + timesToAdd
-      _estimatedTime = moment.utc(_delivery).add(_etaTime, 'minutes')
+      totalEta = order?.eta_time + totalEta
     }
-    _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
+    estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
+    const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components-external'
+import { useLanguage, useUtils, useConfig } from 'ordering-components-external'
 import { ArrowRight, CheckCircleFill } from 'react-bootstrap-icons'
 import { Button } from '../../styles/Buttons'
 import { formatSeconds, getTraduction } from '../../../../../utils'
@@ -21,6 +21,7 @@ export const OrderHistory = (props) => {
 
   const [, t] = useLanguage()
   const [{ parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
 
   const getLogisticTagStatus = (status) => {
     switch (status) {
@@ -113,7 +114,7 @@ export const OrderHistory = (props) => {
               {t('VIA', 'Via')}{' '}
               {order.app_id ? t(order.app_id.toUpperCase(), order.app_id) : t('OTHER', 'Other')}
             </h3>
-            <p>{parseDate(order.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</p>
+            <p>{parseDate(order.created_at, { outputFormat: `MMM DD, ${configs?.general_hour_format?.value}` })}</p>
           </DetailWrapper>
         </HistoryItemWrapper>
       )}
@@ -152,7 +153,7 @@ export const OrderHistory = (props) => {
                 ) : <>{t('DRIVER_UNASSIGNED', 'Driver unassigned')}</>}
               </h3>
             )}
-            <p>{parseDate(message.created_at, { outputFormat: 'MMM DD, hh:mm A' })}</p>
+            <p>{parseDate(message.created_at, { outputFormat: `MMM DD, ${configs?.general_hour_format?.value}` })}</p>
           </DetailWrapper>
         </HistoryItemWrapper>
       ))}

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

@@ -424,7 +424,7 @@ const OrderDetailsUI = (props) => {
                     {activeStatus.includes(order?.status) ? (
                       <OrderEta order={order} />
                     ) : (
-                      parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                      parseDate(order?.reporting_data?.at[`status:${order.status}`], { outputFormat: `YYYY-MM-DD ${configs?.general_hour_format?.value}` })
                     )}
                   </p>
                 )}

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

@@ -0,0 +1,70 @@
+import { PaymentOptionStripe, useLanguage, useSession } from 'ordering-components-external'
+import React, { useEffect, useState } from 'react'
+import { CardFormCustom } from '../CardFormCustom'
+import Modal from '../Modal'
+import { PaymentOptionStripeUI } from '../PaymentOptionStripe'
+import { AddNewCard } from '../PaymentOptionStripe/styles'
+
+const PaymentOptionCardUI = (props) => {
+  const {
+    deleteCard,
+    cardsList,
+    handleCardClick,
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway,
+    paymethodsWithoutSaveCards,
+    onSelectCard
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ token }] = useSession()
+
+  const [addCardOpen, setAddCardOpen] = useState(false)
+
+  useEffect(() => {
+    if (cardsList?.cards?.length > 0) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.cards])
+
+  return (
+    <>
+      <PaymentOptionStripeUI
+        deleteCard={deleteCard}
+        cardsList={cardsList}
+        handleCardClick={handleCardClick}
+        handleNewCard={handleNewCard}
+        paymethodSelected={paymethodSelected}
+        cardSelected={cardSelected}
+        gateway={gateway}
+        onSelectCard={onSelectCard}
+      />
+
+      {token && !cardsList.loading && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && (
+        <AddNewCard>
+          <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
+        </AddNewCard>
+      )}
+
+      <Modal
+        open={addCardOpen}
+        onClose={() => setAddCardOpen(false)}
+        title={t('ADD_NEW_CARD', 'Add new card')}
+      >
+        <CardFormCustom handleNewCard={handleNewCard} setAddCardOpen={setAddCardOpen} />
+      </Modal>
+    </>
+  )
+}
+
+export const PaymentOptionCard = (props) => {
+  const paymentOptionStripeProps = {
+    ...props,
+    UIComponent: PaymentOptionCardUI
+  }
+  return (
+    <PaymentOptionStripe {...paymentOptionStripeProps} />
+  )
+}

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

@@ -5,7 +5,9 @@ import {
   useSession,
   useLanguage
 } from 'ordering-components-external'
-import FiMoreVertical from '@meronex/icons/fi/FiMoreVertical'
+import IosRadioButtonOn from '@meronex/icons/ios/IosRadioButtonOn'
+import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
+import { Trash } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 
 import { Modal } from '../Modal'
@@ -22,16 +24,18 @@ import {
   CardItemActions,
   BlockLoading,
   AddNewCard,
-  ActionsContent,
   CardItemActionsWrapper
 } from './styles'
 
-const PaymentOptionStripeUI = (props) => {
+export const PaymentOptionStripeUI = (props) => {
   const {
     deleteCard,
     cardsList,
     handleCardClick,
-    handleNewCard
+    handleNewCard,
+    paymethodSelected,
+    cardSelected,
+    gateway
   } = props
   const [{ token }] = useSession()
   const [, t] = useLanguage()
@@ -39,6 +43,8 @@ const PaymentOptionStripeUI = (props) => {
 
   const [addCartOpen, setAddCardOpen] = useState(false)
 
+  const paymethodsWithoutSaveCards = ['credomatic']
+
   const _handleNewCard = (card) => {
     setAddCardOpen(false)
     handleNewCard(card)
@@ -55,6 +61,12 @@ const PaymentOptionStripeUI = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+      setAddCardOpen(true)
+    }
+  }, [cardsList?.loading])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -79,7 +91,7 @@ const PaymentOptionStripeUI = (props) => {
         )}
         {token && cardsList.cards && cardsList.cards.length > 0 && (
           <>
-            {cardsList?.cards?.map((card, i) => (
+            {cardsList?.cards?.map((card, i) =>
               <PaymentCard
                 {...props}
                 key={i}
@@ -87,11 +99,14 @@ const PaymentOptionStripeUI = (props) => {
                 handleDeleteCard={() => handleDeleteCard(card)}
                 card={card}
                 defaultSelected={i === 0}
+                active={(paymethodSelected || cardSelected?.id) === card.id}
+                cardSelected={cardSelected}
+                paymethodSelected={paymethodSelected}
               />
-            ))}
+            )}
           </>
         )}
-        {token && !cardsList.loading && (
+        {token && !cardsList.loading && !paymethodsWithoutSaveCards.includes(gateway) && (
           <AddNewCard>
             <span onClick={() => setAddCardOpen(true)}>{t('ADD_NEW_CARD', 'Add new card')}</span>
           </AddNewCard>
@@ -148,14 +163,15 @@ export const PaymentCard = (props) => {
     handleDeleteCard,
     card,
     handleCardClick,
-    onSelectCard
+    onSelectCard,
+    active,
+    cardSelected
   } = props
 
-  const [, t] = useLanguage()
-  const theme = useTheme()
   const [isShowActions, setIsShowActions] = useState(false)
   const cardActionsRef = useRef(null)
   const actionWrapperRef = useRef(null)
+  const theme = useTheme()
 
   const handleClickOutside = (e) => {
     if (!isShowActions) return
@@ -168,7 +184,8 @@ export const PaymentCard = (props) => {
   const handleChangeDefaultCard = (e) => {
     if (actionWrapperRef.current?.contains(e.target)) return
     handleCardClick(card)
-    onSelectCard({
+    onSelectCard && onSelectCard({
+      ...cardSelected,
       id: card.id,
       type: 'card',
       card: {
@@ -178,6 +195,19 @@ export const PaymentCard = (props) => {
     })
   }
 
+  useEffect(() => {
+    if (!cardSelected) return
+    onSelectCard && onSelectCard({
+      ...cardSelected,
+      id: cardSelected?.id,
+      type: 'card',
+      card: {
+        brand: cardSelected?.brand,
+        last4: cardSelected?.last4
+      }
+    })
+  }, [cardSelected])
+
   useEffect(() => {
     window.addEventListener('click', handleClickOutside)
     return () => window.removeEventListener('click', handleClickOutside)
@@ -186,25 +216,21 @@ export const PaymentCard = (props) => {
   return (
     <CardItem onClick={handleChangeDefaultCard} isCursor>
       <CardItemContent>
+        <span className='checks'>
+          {active ? <IosRadioButtonOn /> : <IosRadioButtonOff />}
+        </span>
         <div>
           <img src={getIconCard(card?.brand)} alt={card?.brand} />
         </div>
         <span>
-          {card?.brand} {card.last4}
+          XXXX-XXXX-XXXX-{card?.last4}
         </span>
       </CardItemContent>
       <CardItemActions>
         <CardItemActionsWrapper ref={actionWrapperRef}>
           <span ref={cardActionsRef}>
-            <FiMoreVertical onClick={() => setIsShowActions(true)} />
+            <Trash color={theme.colors.lightGray} onClick={() => handleDeleteCard()} />
           </span>
-          {
-            isShowActions && (
-              <ActionsContent>
-                <div className='delete' onClick={handleDeleteCard}>{t('DELETE', 'Delete')}</div>
-              </ActionsContent>
-            )
-          }
         </CardItemActionsWrapper>
       </CardItemActions>
     </CardItem>

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

@@ -35,11 +35,16 @@ export const CardItem = styled.div`
 export const CardItemContent = styled.div`
   display: flex;
   align-items: center;
+  
+  .checks svg {
+    color: ${props => props.theme.colors.primary};
+    font-size: 22px;
+  }
 
   > div {
     display: flex;
     align-items: center;
-    margin-right: 13px;
+    margin: 0 13px 0 5px;
     ${props => props.theme?.rtl && css`
       margin-left: 13px;
       margin-right: 0;

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import IosRadioButtonOn from '@meronex/icons/ios/IosRadioButtonOn'
+import BilStripe from '@meronex/icons/bi/BilStripe'
 import FaCcStripe from '@meronex/icons/fa/FaCcStripe'
 import FaStripeS from '@meronex/icons/fa/FaStripeS'
 import GrStripe from '@meronex/icons/gr/GrStripe'
@@ -19,6 +20,7 @@ import { Alert } from '../Confirm'
 import { PaymentOptionCash } from '../PaymentOptionCash'
 import { PaymentOptionStripe } from '../PaymentOptionStripe'
 import { PaymentOptionPaypal } from '../../../../../components/PaymentOptionPaypal'
+import { PaymentOptionCard } from '../PaymentOptionCard'
 import { StripeElementsForm } from '../StripeElementsForm'
 import { StripeRedirectForm } from '../StripeRedirectForm'
 import { NotFoundSource } from '../NotFoundSource'
@@ -42,6 +44,8 @@ const stripeRedirectOptions = [
   { name: 'iDEAL', value: 'ideal' }
 ]
 
+const cardsPaymethods = ['credomatic']
+
 const getPayIcon = (method) => {
   switch (method) {
     case 1:
@@ -97,7 +101,8 @@ const PaymentOptionsUI = (props) => {
     setCreateOrder,
     onPlaceOrderClick,
     handlePlaceOrder,
-    paymethods
+    paymethods,
+    setCardList
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
@@ -246,19 +251,38 @@ const PaymentOptionsUI = (props) => {
             setErrorCash={props.setErrorCash}
           />
         )}
-        {isOpenMethod?.paymethod?.gateway === 'stripe' && isOpenMethod.paymethod?.gateway === 'stripe' && (
+        {(isOpenMethod?.paymethod?.gateway === 'stripe' || paymethodSelected?.gateway === 'stripe') && (
           <PaymentOptionStripe
+            setCardList={setCardList}
+            paymethod={isOpenMethod?.paymethod}
+            businessId={props.businessId}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            onPaymentChange={onPaymentChange}
+            payType={isOpenMethod?.paymethod?.name}
+            onSelectCard={handlePaymethodDataChange}
+            onCancel={() => handlePaymethodClick(null)}
+            paymethodSelected={paymethodSelected?.data?.id}
+            handlePaymentMethodClick={handlePaymentMethodClick}
+          />
+        )}
+
+        {(cardsPaymethods.includes(isOpenMethod?.paymethod?.gateway) || cardsPaymethods.includes(paymethodSelected?.gateway)) && (
+          <PaymentOptionCard
+            setCardList={setCardList}
             paymethod={isOpenMethod?.paymethod}
             businessId={props.businessId}
             publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            gateway={isOpenMethod?.paymethod?.gateway || paymethodSelected?.gateway}
             onPaymentChange={onPaymentChange}
             payType={isOpenMethod?.paymethod?.name}
             onSelectCard={handlePaymethodDataChange}
             onCancel={() => handlePaymethodClick(null)}
+            paymethodSelected={paymethodSelected?.data?.id}
+            handlePaymentMethodClick={handlePaymentMethodClick}
           />
         )}
 
-        {stripeOptions.includes(paymethodSelected?.gateway) && paymethodData?.card && !isCustomerMode && (
+        {stripeOptions.includes(paymethodSelected?.gateway) && paymethodData?.card && !isCustomerMode && paymethodSelected?.gateway !== 'stripe' && (
           <PayCardSelected>
             <CardItemContent>
               <span className='checks'>
@@ -317,6 +341,7 @@ const PaymentOptionsUI = (props) => {
               payType={paymethodsList?.name}
               onSelectCard={handlePaymethodDataChange}
               onCancel={() => handlePaymethodClick(null)}
+              paymethodSelected={paymethodSelected}
             />
           )}
         </Modal>

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

@@ -345,7 +345,6 @@ const ProductOptionsUI = (props) => {
       setIsHaveWeight(true)
       setPricePerWeightUnit(product?.price / product?.weight)
     }
-
   }, [product])
 
   useEffect(() => {

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

@@ -398,7 +398,7 @@ export const ProductActions = styled.div`
     }
 
     div.incdec-control {
-      padding-right: 18%;
+      margin-right: 18%;
       &.show-weight-unit{
         width: 30%;
       }

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

@@ -160,7 +160,7 @@ export const RenderProductsLayout = (props) => {
     <>
       {!isLoading && business?.id && (
         <WrappLayout isCartOnProductsList={isCartOnProductsList}>
-          {((!hideBusinessNearCity && !useKioskApp) || props.forceShowNearBusiness) && (
+          {((!hideBusinessNearCity && !useKioskApp) || props.forceShowNearBusiness) && !isCustomLayout && (
             <NearBusiness>
               <BusinessesListing
                 logosLayout
@@ -172,7 +172,7 @@ export const RenderProductsLayout = (props) => {
             </NearBusiness>
           )}
           <div className='bp-list'>
-            {!isCustomLayout && !useKioskApp && (
+            {!useKioskApp && (
               <BusinessBasicInformationComponent
                 {...props}
                 businessState={businessState}

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

@@ -6,7 +6,7 @@ export const Container = styled.div`
   top: 0px;
   width: 100vw;
   height: 100vh;
-  z-index: 2000;
+  z-index: 10002;
 `
 export const BackDropContainer = styled.div`
   background: rgba(0,0,0,0.3);

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

@@ -190,7 +190,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (
-                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
+                        <PhoneInput onChange={() => { }} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone.replace(`+${userData?.country_phone_code}`, '')}`)?.country} />
                       )
                     }
                   </CountryFlag>

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

@@ -44,7 +44,7 @@ export const PopoverBody = styled.div`
   border-radius: 10px;
   max-width: 500px;
   min-width: 300px !important;
-  z-index: 1001;
+  z-index: 10002;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
 `
 

package/src/themes/five/src/styles/Select/index.js

@@ -21,7 +21,8 @@ export const Select = (props) => {
     notReload,
     CustomArrow,
     isHomeStyle,
-    disableOneOption
+    disableOneOption,
+    zIndex
   } = props
 
   const isHome = window.location.pathname === '/' || window.location.pathname === '/home' || isHomeStyle
@@ -105,7 +106,7 @@ export const Select = (props) => {
           </Selected>
         )}
         {open && options && (
-          <Options id='list' position='right' ref={dropdownReference} isHome={isHome}>
+          <Options id='list' position='right' ref={dropdownReference} isHome={isHome} zIndex={zIndex}>
             {
               options.map((option, i) => (
                 <Option

package/src/themes/five/src/styles/Selects/index.js

@@ -37,7 +37,7 @@ export const Options = styled.div`
   position: absolute;
   background-color: #CCC;
   margin-top: 7px;
-  z-index: 10000;
+  z-index: ${({ zIndex }) => zIndex || 10002};
   border-width: 1px;
   border-style: solid;
   border-color: #CCC;

package/src/themes/pwa/src/components/MomentPopover/styles.js

@@ -32,11 +32,14 @@ export const PopoverBody = styled.div`
   padding-top: 30px;
   border-radius: 10px;
   max-width: 500px;
-  z-index: 1001;
+  z-index: 10002;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
   #moment_control h1{
     margin-bottom: 30px;
   }
+  @media (min-width: 576px) {
+    z-index: 1001;
+  }
 `
 
 export const PopoverArrow = styled.div`