ordering-ui-external 2.6.7 → 2.6.8

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/RenderProductsLayout/index.js

@@ -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`

package/template/theme.json

@@ -123,7 +123,9 @@
     "NOT_FOUND_ORDER": "Sorry, we couldn't find the requested order.",
     "ORDERS_REDIRECT": "Go to Orders",
     "WRITE_A_REVIEW": "Write a Review",
-    "ADD": "Add"
+    "ADD": "Add",
+    "MOBILE_APPNAME": "Ordering app",
+    "MOBILE_APPNAME_AUTHOR": "Ordering, Inc."
   },
   "layouts": {
     "general": {