ordering-ui-external 1.0.1 → 1.1.0

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

@@ -1,12 +1,17 @@
-import React from 'react'
-import { useLanguage, useUtils, useConfig, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
+import React, { useState } from 'react'
+import { useLanguage, useUtils, useConfig, useOrder, SingleOrderCard as SingleOrderCardController } from 'ordering-components-external'
 import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import { ReviewOrder } from '../ReviewOrder'
+import { ReviewProduct } from '../ReviewProduct'
+import { ReviewDriver } from '../ReviewDriver'
+
 import { useTheme } from 'styled-components'
 import { getGoogleMapImage } from '../../../../../utils'
 import BsDot from '@meronex/icons/bs/BsDot'
 import { Button } from '../../styles/Buttons'
 import Skeleton from 'react-loading-skeleton'
-
+import { Modal } from '../Modal'
+import { Confirm } from '../Confirm'
 import {
   Container,
   Content,
@@ -16,12 +21,14 @@ import {
   Logo,
   TitleContainer,
   Map,
-  FavoriteWrapper
+  FavoriteWrapper,
+  ReviewWrapper
 } from './styles'
 
 import {
   BusinessInformation
 } from '../OrdersOption/styles'
+import { useOrderingTheme } from 'ordering-components-external/_modules/contexts/OrderingThemeContext'
 
 const SingleOrderCardUI = (props) => {
   const {
@@ -35,16 +42,26 @@ const SingleOrderCardUI = (props) => {
     isCustomerMode,
     handleFavoriteOrder,
     isSkeleton,
-    isFavorite
+    isFavorite,
+    handleRemoveCart,
+    cartState
   } = props
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ carts }] = useOrder()
   const [{ parsePrice, parseDate, optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
+  const [orderingTheme] = useOrderingTheme()
+  const [isReviewOpen, setIsReviewOpen] = useState(false)
+  const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [isOrderReviewed, setIsOrderReviewed] = useState(false)
+  const [isProductReviewed, setIsProductReviewed] = useState(false)
+  const [isDriverReviewed, setIsDriverReviewed] = useState(false)
 
   const handleClickCard = (e, uuid) => {
-    if (e.target.closest('.favorite') || e.target.closest('.review')) return
+    if (e.target.closest('.favorite') || e.target.closest('.review') || e.target.closest('.reorder')) return
 
     if (customArray) {
       onRedirectPage({ page: 'checkout', params: { cartUuid: uuid } })
@@ -53,21 +70,66 @@ const SingleOrderCardUI = (props) => {
     }
   }
 
-  const handleClickReview = (uuid) => {
-    onRedirectPage({ page: 'order_detail', params: { orderId: uuid } })
+  const closeReviewOrder = () => {
+    if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
+    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else handleCloseReivew()
+  }
+
+  const closeReviewProduct = () => {
+    if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else {
+      setIsDriverReviewed(true)
+      handleCloseReivew()
+    }
+  }
+  const handleOpenReview = () => {
+    if (!order?.review && !isOrderReviewed) setReviewStatus({ order: true, product: false, driver: false })
+    else if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
+    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    else {
+      setIsReviewOpen(false)
+      return
+    }
+    setIsReviewOpen(true)
+  }
+
+  const handleCloseReivew = () => {
+    setReviewStatus({ order: false, product: false, driver: false })
+    setIsReviewOpen(false)
+  }
+
+  const handleClickReview = (order) => {
+    handleOpenReview && handleOpenReview()
   }
 
   const handleChangeFavorite = (order) => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
   }
 
-  const businessLogo = theme?.layouts?.orders?.components?.business_logo
-  const date = theme?.layouts?.orders?.components?.date
-  const map = theme?.layouts?.orders?.components?.map
+  const handleClickReorder = (order) => {
+    if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
+      setConfirm({
+        open: true,
+        content: t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?'),
+        handleOnAccept: async () => {
+          handleRemoveCart()
+          setConfirm({ ...confirm, open: false })
+        }
+      })
+    } else {
+      handleReorder(order.id)
+    }
+  }
 
-  const isHideBusinessLogo = businessLogo?.hidden
-  const isHideDate = date?.hidden
-  const isHideMap = map?.hidden
+  const handleOriginalReorder = () => {
+    setConfirm({ ...confirm, open: false })
+    handleReorder(order.id)
+  }
+
+  const showBusinessLogo = !orderingTheme?.theme?.orders?.components?.business_logo?.hidden
+  const showDate = !orderingTheme?.theme?.orders?.components?.date?.hidden
+  const showMap = !orderingTheme?.theme?.orders?.components?.map?.hidden
 
   return (
     <>
@@ -83,7 +145,7 @@ const SingleOrderCardUI = (props) => {
         isCustomerMode={isCustomerMode}
         onClick={(e) => handleClickCard(e, order?.uuid)}
       >
-        {(configs?.google_maps_api_key?.value || isBusinessesPage) && !isHideMap && (
+        {(configs?.google_maps_api_key?.value || isBusinessesPage) && showMap && (
           <>
             {isSkeleton ? (
               <Skeleton height={80} />
@@ -108,10 +170,10 @@ const SingleOrderCardUI = (props) => {
             <Skeleton width={60} height={60} />
           ) : (
             <>
-              {!isCustomerMode && !isHideBusinessLogo && (
+              {!isCustomerMode && showBusinessLogo && (
                 <BusinessLogoWrapper bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_400,c_limit')} />
               )}
-              {isCustomerMode && !isHideBusinessLogo && (
+              {isCustomerMode && showBusinessLogo && (
                 <>
                   {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
                     <Logo>
@@ -149,7 +211,7 @@ const SingleOrderCardUI = (props) => {
                       <p name='order_number'>{t('ORDER_NUM', 'Order No.')} {order.id}</p>
                     </>
                   )}
-                  {!isHideDate && (
+                  {showDate && (
                     <>
                       <BsDot />
                       <p>{order?.delivery_datetime_utc
@@ -177,19 +239,19 @@ const SingleOrderCardUI = (props) => {
           )}
           {pastOrders && !isCustomerMode && (
             <ButtonWrapper>
-              {!isFavorite && (!order?.review || (order.driver && !order?.user_review)) && (
+              {!isOrderReviewed && !isFavorite && (!order?.review || (order.driver && !order?.user_review)) && (
                 <Button
                   outline
                   color='primary'
                   className='review'
-                  onClick={() => handleClickReview(order.uuid)}
+                  onClick={() => handleClickReview(order)}
                 >
                   {t('REVIEW', 'Review')}
                 </Button>
               )}
               {order.cart && (
-                <Button color='primary' className='reorder' outline onClick={() => handleReorder(order.id)}>
-                  {t('REORDER', 'Reorder')}
+                <Button color='primary' className='reorder' outline onClick={() => handleClickReorder(order)}>
+                  {cartState?.loading ? t('LOADING', 'Loading...') : t('REORDER', 'Reorder')}
                 </Button>
               )}
             </ButtonWrapper>
@@ -203,6 +265,40 @@ const SingleOrderCardUI = (props) => {
           </FavoriteWrapper>
         </Content>
       </Container>
+      {isReviewOpen && (
+        <Modal
+          open={isReviewOpen}
+          onClose={handleCloseReivew}
+          title={order
+            ? (reviewStatus?.order
+              ? t('REVIEW_ORDER', 'Review order')
+              : (reviewStatus?.product
+                ? t('REVIEW_PRODUCT', 'Review Product')
+                : t('REVIEW_DRIVER', 'Review Driver')))
+            : t('LOADING', 'Loading...')}
+        >
+          <ReviewWrapper>
+            {
+              reviewStatus?.order
+                ? <ReviewOrder order={order} closeReviewOrder={closeReviewOrder} setIsReviewed={setIsOrderReviewed} />
+                : (reviewStatus?.product
+                  ? <ReviewProduct order={order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={setIsProductReviewed} />
+                  : <ReviewDriver order={order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={setIsDriverReviewed} />)
+            }
+          </ReviewWrapper>
+
+        </Modal>
+      )}
+      <Confirm
+        title={t('ORDER', 'Order')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => handleOriginalReorder()}
+        onCancel={() => handleOriginalReorder()}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -248,3 +248,8 @@ export const FavoriteWrapper = styled.div`
     font-size: 16px;
   }
 `
+export const ReviewWrapper = styled.div`
+  .review-sent {
+    border-radius: 7.6px;
+  }
+`

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

@@ -24,7 +24,7 @@ export const TaxInformation = (props) => {
         ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
         : type === 'fee'
           ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
-          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
+          : Object.keys(data?.discounts ?? {}).find(code => code.includes(product?.code))
     )
   }
 

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

@@ -1,6 +1,7 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import FcCancel from '@meronex/icons/fc/FcCancel'
 import Skeleton from 'react-loading-skeleton'
+import { VerifyCodeForm } from '../VerifyCodeForm'
 import {
   Container,
   Header,
@@ -14,13 +15,15 @@ import {
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
 import PhoneInput from 'react-phone-number-input'
+import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
 import { parsePhoneNumber } from 'libphonenumber-js'
 import {
   UserFormDetails as UserFormController,
   useLanguage,
   useSession
 } from 'ordering-components-external'
-
+import { Alert } from '../Confirm'
+import { Modal } from '../Modal'
 import { UserFormDetailsUI } from '../UserFormDetails'
 
 const UserDetailsUI = (props) => {
@@ -37,13 +40,23 @@ const UserDetailsUI = (props) => {
     isModal,
     setIsOpenUserData,
     isAddressFormOpen,
-    onClose
+    onClose,
+    handleSendVerifyCode,
+    verifyPhoneState,
+    requiredFields,
+    setFormState,
+    setIsSuccess
   } = props
 
   const [, t] = useLanguage()
   const [{ user }] = useSession()
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
   const userData = userState.result?.result || props.userData || formState.result?.result || user
 
+  const [willVerifyOtpState, setWillVerifyOtpState] = useState(false)
+  const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
+    600, willVerifyOtpState)
+
   useEffect(() => {
     if (isUserDetailsEdit) {
       !isEdit && toggleIsEdit()
@@ -54,11 +67,71 @@ const UserDetailsUI = (props) => {
     setIsOpenUserData && setIsOpenUserData(isEdit)
   }, [isEdit])
 
+  useEffect(() => {
+    if (verifyPhoneState?.result?.error) {
+      setAlertState({
+        open: true,
+        content: verifyPhoneState?.result?.result || [t('ERROR', 'Error')]
+      })
+    } else { resetOtpLeftTime() }
+  }, [verifyPhoneState?.result?.result])
+
   const toggleEditState = () => {
     toggleIsEdit()
     cleanFormState({ changes: {} })
   }
 
+  const handleSendOtp = () => {
+    if (willVerifyOtpState && formState?.changes?.cellphone && formState?.changes?.country_phone_code) {
+      const { cellphone, country_phone_code: countryPhoneCode } = formState?.changes
+
+      resetOtpLeftTime()
+
+      handleSendVerifyCode({
+        cellphone: cellphone,
+        country_phone_code: countryPhoneCode
+      })
+    }
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleSendPhoneCode = (values) => {
+    setWillVerifyOtpState(false)
+    setFormState({
+      ...formState,
+      changes: {
+        ...formState?.changes,
+        verification_code: values?.code
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        content: t('TIME_IS_UP_PLEASE_RESEND_CODE', 'Time is up. Please resend code again')
+      })
+    }
+  }, [otpLeftTime])
+
+  useEffect(() => {
+    handleSendOtp()
+  }, [willVerifyOtpState])
+
+  useEffect(() => {
+    if (!isEdit && requiredFields) {
+      setIsSuccess && setIsSuccess(true)
+      onClose && onClose()
+    }
+  }, [isEdit, requiredFields])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -79,24 +152,28 @@ const UserDetailsUI = (props) => {
         <Container>
           {isModal && (
             <TitleContainer isAddressFormOpen={isAddressFormOpen && !isEdit}>
-              <ModalIcon>
-                <MdClose onClick={() => onClose()} />
-              </ModalIcon>
+              {!requiredFields && (
+                <ModalIcon>
+                  <MdClose onClick={() => onClose()} />
+                </ModalIcon>
+              )}
               <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
             </TitleContainer>
           )}
-          <Header className='user-form'>
-            {!isModal && (
-              <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
-            )}
-            {cartStatus !== 2 && (
-              !isEdit ? (
-                <span onClick={() => toggleIsEdit()}>{t('CHANGE', 'Change')}</span>
-              ) : (
-                <FcCancel className='cancel' onClick={() => toggleEditState()} />
-              )
-            )}
-          </Header>
+          {!requiredFields && (
+            <Header className='user-form'>
+              {!isModal && (
+                <h1>{t('CUSTOMER_DETAILS', 'Customer Details')}</h1>
+              )}
+              {cartStatus !== 2 && (
+                !isEdit ? (
+                  <span onClick={() => toggleIsEdit()}>{t('CHANGE', 'Change')}</span>
+                ) : (
+                  <FcCancel className='cancel' onClick={() => toggleEditState()} />
+                )
+              )}
+            </Header>
+          )}
 
           {!isEdit ? (
             <UserData>
@@ -113,7 +190,7 @@ const UserDetailsUI = (props) => {
                   <CountryFlag>
                     {
                       userData?.country_phone_code && (
-                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code)} ${userData?.cellphone}`)?.country} />
+                        <PhoneInput onChange={() => {}} defaultCountry={parsePhoneNumber(`+${(userData?.country_phone_code?.replace('+', ''))} ${userData?.cellphone}`)?.country} />
                       )
                     }
                   </CountryFlag>
@@ -129,11 +206,37 @@ const UserDetailsUI = (props) => {
                 {...props}
                 userData={userData}
                 isCustomerMode={isCustomerMode}
+                setWillVerifyOtpState={setWillVerifyOtpState}
               />
             </SideForm>
           )}
         </Container>
       )}
+      <Alert
+        title={t('PROFILE', 'Profile')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+        open={willVerifyOtpState}
+        width='700px'
+        height='420px'
+        onClose={() => setWillVerifyOtpState(false)}
+      >
+        <VerifyCodeForm
+          otpLeftTime={otpLeftTime}
+          credentials={formState?.changes}
+          handleSendOtp={handleSendOtp}
+          handleCheckPhoneCode={handleSendPhoneCode}
+          email={(userData?.email || user?.email)}
+          isPhone
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

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

@@ -7,6 +7,7 @@ export const Header = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-bottom: 5px;
+
   h1 {
     font-weight: 500;
     font-size: 20px;
@@ -16,13 +17,16 @@ export const Header = styled.div`
       margin: 0px 0px 0px 10px;
   `}
   }
+
   svg {
     font-size: 24px;
   }
+
   svg.cancel {
     color: #D81212;
     cursor: pointer;
   }
+
   span {
     font-size: 13px;
     color: ${props => props.theme.colors.primary};
@@ -53,6 +57,7 @@ export const UserData = styled.div`
   > * {
     margin: 5px 0;
   }
+
   p {
     font-size: 14px;
     color: ${props => props.theme?.colors.darkTextColor};
@@ -67,10 +72,12 @@ export const ModalIcon = styled.span`
   font-size: 30px;
   cursor: pointer;
   z-index: 2;
+
   svg{
     /* background: rgba(255,255,255,0.5); */
     border-radius: 50%;
   }
+
 `
 
 export const TitleContainer = styled.div`