ordering-ui-external 1.0.1 → 1.1.0

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

@@ -0,0 +1,251 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, ReviewProduct as ReviewProductController } from 'ordering-components-external'
+import { useForm } from 'react-hook-form'
+
+import {
+  ReviewProductContainer,
+  ActionBlock,
+  ButtonCustomized,
+  SingleProductReviewContainer,
+  HandReviewWrapper,
+  HandReviewContent,
+  HandIconWrapper,
+  AdditionCommentsWrapper,
+  AddCommentHideShow,
+  Comments,
+  CommentsList
+} from './styles'
+import AiOutlineLike from '@meronex/icons/ai/AiOutlineLike'
+import AiOutlineDislike from '@meronex/icons/ai/AiOutlineDislike'
+import MdClose from '@meronex/icons/md/MdClose'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { TextArea } from '../../styles/Inputs'
+import { Button } from '../../styles/Buttons'
+import { Alert } from '../Confirm'
+import { reviewCommentList } from '../../../../../utils'
+
+const SingleProductReview = (props) => {
+  const {
+    product,
+    handleChangeFormState,
+    formState
+  } = props
+
+  const [, t] = useLanguage()
+  const [isLike, setIsLike] = useState(true)
+  const [isExtraComment, setIsExtraComment] = useState(false)
+  const [comments, setComments] = useState([])
+  const [extraComment, setExtraComment] = useState('')
+  const [currentValue, setCurrentValue] = useState(5)
+
+  const commentsList = reviewCommentList('product')
+
+  const handleChangeComment = (commentItem) => {
+    const found = comments.find((comment) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  const isSelectedComment = (commentKey) => {
+    const found = comments.find((comment) => comment?.key === commentKey)
+    return found
+  }
+
+  useEffect(() => {
+    const value = isLike ? 5 : 1
+    setCurrentValue(value)
+    if (value !== currentValue) setComments([])
+    if (comments?.length === 0 && !extraComment && formState.changes?.length === 0 && isLike) return
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    let found = false
+    const _changes = formState.changes.map(item => {
+      if (item?.product_id === product?.product_id) {
+        found = true
+        return {
+          product_id: product?.product_id,
+          comment: _comment,
+          qualification: isLike ? 5 : 1
+        }
+      }
+      return item
+    })
+    if (!found) {
+      _changes.push({
+        product_id: product?.product_id,
+        comment: _comment,
+        qualification: isLike ? 5 : 1
+      })
+    }
+    handleChangeFormState && handleChangeFormState(_changes)
+  }, [comments, extraComment, isLike])
+
+  return (
+    <SingleProductReviewContainer>
+      <HandReviewWrapper>
+        <p>{product?.name}</p>
+        <HandReviewContent>
+          <HandIconWrapper onClick={() => setIsLike(true)} active={isLike}>
+            <AiOutlineLike />
+          </HandIconWrapper>
+          <HandIconWrapper onClick={() => setIsLike(false)} active={!isLike}>
+            <AiOutlineDislike />
+          </HandIconWrapper>
+        </HandReviewContent>
+      </HandReviewWrapper>
+      <CommentsList>
+        {
+          commentsList[isLike ? 'like' : 'dislike']?.map((commentItem, i) => (
+            <ButtonCustomized
+              key={i}
+              type='button'
+              active={isSelectedComment(commentItem.key)}
+              onClick={() => handleChangeComment(commentItem)}
+              initialIcon
+            >
+              {commentItem.content}
+              {
+                isSelectedComment(commentItem.key) && <MdClose />
+              }
+            </ButtonCustomized>
+          ))
+        }
+      </CommentsList>
+      <AdditionCommentsWrapper>
+        <AddCommentHideShow
+          onClick={() => setIsExtraComment(!isExtraComment)}
+          active={isExtraComment}
+        >
+          {t('ADDITIONAL_COMMENTS', 'Additional comments')}
+        </AddCommentHideShow>
+        {
+          isExtraComment && (
+            <Comments>
+              <p>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</p>
+              <TextArea
+                name='comments'
+                value={extraComment || ''}
+                onChange={(e) => setExtraComment(e.target.value)}
+                autoComplete='off'
+              />
+            </Comments>
+          )
+        }
+      </AdditionCommentsWrapper>
+    </SingleProductReviewContainer>
+  )
+}
+
+const ReviewProductUI = (props) => {
+  const {
+    order,
+    closeReviewProduct,
+    formState,
+    handleSendProductReview,
+    setIsProductReviewed
+  } = props
+
+  const [, t] = useLanguage()
+  const { handleSubmit, errors } = useForm()
+  const [alertState, setAlertState] = useState({ open: false, content: [], success: false })
+
+  const onSubmit = values => {
+    setAlertState({ ...alertState, success: true })
+    handleSendProductReview()
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setIsProductReviewed && setIsProductReviewed(true)
+      closeReviewProduct && closeReviewProduct()
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <ReviewProductContainer onSubmit={handleSubmit(onSubmit)}>
+        {order?.products && order.products.length > 0 && order.products.map((product, i) => (
+          <SingleProductReview
+            {...props}
+            key={i}
+            product={product}
+          />
+        ))}
+        <ActionBlock>
+          <span onClick={closeReviewProduct}>{t('SKIP', 'Skip')}</span>
+          <Button
+            color={!formState.loading ? 'primary' : 'secondary'}
+            type='submit'
+            disabled={formState.loading || formState?.changes?.length === 0}
+            className='review-sent'
+          >
+            {!formState.loading ? (
+              <>{t('CONTINUE', 'Continue')}<BsArrowRight /></>
+            ) : t('LOADING', 'Loading')}
+          </Button>
+        </ActionBlock>
+        <Alert
+          title={t('PRODUCT_REVIEW', 'Product Review')}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </ReviewProductContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const ReviewProduct = (props) => {
+  const reviewProductProps = {
+    ...props,
+    UIComponent: ReviewProductUI,
+    isToast: true
+  }
+  return <ReviewProductController {...reviewProductProps} />
+}

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

@@ -0,0 +1,158 @@
+import styled, { css } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+
+export const ReviewProductContainer = styled.form``
+
+export const ActionBlock = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 30px;
+  width: 100%;
+
+  span {
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 16px;
+    user-select: none;
+  }
+
+  button {
+    font-size: 14px;
+    padding: 6px 20px;
+
+    svg {
+      color: white;
+      font-size: 21px;
+      vertical-align: middle;
+      margin-left: 8px;
+      ${props => props.theme?.rtl && css`
+        margin-left: 0;
+        margin-right: 8px;
+        transform: rotateZ(180deg);
+      `}
+    }
+  }
+`
+
+export const SingleProductReviewContainer = styled.div`
+  margin-bottom: 30px;
+`
+
+export const HandReviewWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  p {
+    font-size: 15px;
+    color: ${props => props.theme?.colors.headingColor};
+    margin: 0;
+    color: #344050;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+
+export const HandReviewContent = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const HandIconWrapper = styled.span`
+  margin-left: 15px;
+
+  ${props => props.theme?.rtl && css`
+    margin-right: 15px;
+    margin-left: 0;
+  `}
+
+  svg {
+    font-size: 24px;
+    color: #B1BCCC;
+    cursor: pointer;
+    transition: all 0.3s linear;
+  }
+
+  ${({ active }) => active && css`
+    svg {
+      color: ${props => props.theme?.colors.primary};
+    }
+  `}
+`
+
+export const AdditionCommentsWrapper = styled.div``
+
+export const AddCommentHideShow = styled.p`
+  text-decoration: underline;
+  text-align: center;
+  user-select: none;
+  cursor: pointer;
+  margin: 0;
+  transition: all 0.3s linear;
+  color: #909BA9;
+  font-size: 13px;
+
+  &:hover {
+    color: ${props => props.theme?.colors.primary};
+  }
+  
+  ${({ active }) => active && css`
+    color: ${props => props.theme?.colors.primary};
+  `}
+`
+
+export const Comments = styled.div`
+  margin-top: 50px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #344050;
+  }
+
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 7.6px;
+    min-height: 100px;
+  }
+`
+
+export const CommentsList = styled.div`
+  margin-top: 20px;
+`
+
+export const ButtonCustomized = styled(Button)`
+  border-radius: 50px;
+  margin-bottom: 18px;
+  margin-right: 18px;
+  font-size: 13px;
+  color: #414954;
+  background: #E9ECEF;
+  border: 1px solid #E9ECEF;
+  transition: all 0.3s linear;
+
+  ${props => props.theme?.rtl && css`
+    margin-left: 18px;
+    margin-right: 0;
+  `}
+
+  svg {
+    vertical-align: middle;
+    margin-left: 5px;
+
+    ${props => props.theme?.rtl && css`
+      margin-right: 5px;
+      margin-left: 0;
+    `}
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme?.colors.primary};
+    border: 1px solid ${props => props.theme?.colors.primary};
+    color: white;
+  `}
+`

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

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { Star, StarFill } from 'react-bootstrap-icons'
+import {
+  ReviewOrderContainer,
+  StarWrapper,
+  PlacedDate,
+  Send,
+  BusinessLogo,
+  BusinessName,
+  WrapperBusinessLogo,
+  ReviewsProgressWrapper,
+  LogoAndReviewWrapper,
+  ContinueContainer
+} from './styles'
+
+import { Button } from '../../styles/Buttons'
+import { useTheme } from 'styled-components'
+
+export const ReviewTrigger = (props) => {
+  const { order, handleOpenOrderReview } = props
+  const [star, setStar] = useState(5)
+  const [, t] = useLanguage()
+  const [{ optimizeImage, parseDate }] = useUtils()
+  const theme = useTheme()
+  const placedOnDate = parseDate(order?.delivery_datetime, { outputFormat: 'dddd MMMM DD, YYYY' })
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <>
+        <LogoAndReviewWrapper>
+          <WrapperBusinessLogo>
+            {(order?.business?.logo || theme.images?.dummies?.businessLogo) && (
+              <BusinessLogo bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+            )}
+          </WrapperBusinessLogo>
+          {order?.business?.name && <BusinessName>{order?.business?.name}</BusinessName>}
+          <ReviewsProgressWrapper>
+            <StarWrapper>
+              {[...Array(5).keys()].map((index) => (
+                index <= (star - 1)) ? <StarFill size={40} key={`star-symbol-${index}`} onClick={() => setStar(index + 1)} color={theme?.colors?.primary} />
+                : <Star size={40} key={`star-symbol-${index}`} onClick={() => setStar(index + 1)} />
+              )}
+            </StarWrapper>
+          </ReviewsProgressWrapper>
+          <PlacedDate>{t('DONOT_FORGET_RATE_YOUR_ORDER', 'Do not forget to rate your order placed on ')} <strong>{placedOnDate}</strong></PlacedDate>
+        </LogoAndReviewWrapper>
+        <ReviewOrderContainer>
+          {
+            props.afterMidElements?.map((MidElement, i) => (
+              <React.Fragment key={i}>
+                {MidElement}
+              </React.Fragment>))
+          }
+          {
+            props.afterMidComponents?.map((MidComponent, i) => (
+              <MidComponent key={i} {...props} />))
+          }
+          <Send>
+            <Button
+              color='primary'
+              type='button'
+              className='review-sent'
+              onClick={() => handleOpenOrderReview(star)}
+            >
+              <ContinueContainer><p>{t('GOTO_REVIEW', 'Go to review')}</p><BsArrowRight /></ContinueContainer>
+            </Button>
+          </Send>
+        </ReviewOrderContainer>
+      </>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}

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

@@ -0,0 +1,121 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const ReviewOrderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`
+export const StarWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  > svg {
+    cursor: pointer
+  }
+`
+export const PlacedDate = styled.p`
+  text-align: center;
+`
+export const Send = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  width: 100%;
+
+  button {
+    font-size: 14px;
+    padding: 6px 20px;
+    width: 300px;
+    height: 45px;
+    line-height: 0;
+    svg {
+      color: white;
+      font-size: 21px;
+      vertical-align: middle;
+      margin-left: 8px;
+      ${props => props.theme?.rtl && css`
+        margin-left: 0;
+        margin-right: 8px;
+        transform: rotateZ(180deg);
+      `}
+    }
+  }
+`
+
+const BusinessLogoStyled = styled.div`
+  display: flex;
+  width: 124px;
+  height: 124px;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  min-height: 124px;
+  border-radius: 7.6px;
+  @media (min-width: 481px){
+    width: 100%;
+    height: 100%;
+    min-height: 124px;
+  }
+`
+
+export const BusinessLogo = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+
+  return (
+    <BusinessLogoStyled {...props} style={style}>
+      {props.children}
+    </BusinessLogoStyled>
+  )
+}
+
+export const BusinessName = styled.p`
+  text-align: center;
+  font-weight: 600;
+  font-size: 17px;
+`
+export const WrapperBusinessLogo = styled.div`
+  align-self: center;
+  width: 124px;
+  height: 124px;
+  min-height: 124px;
+  max-width: 124px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+`
+
+export const ReviewsProgressWrapper = styled.div`
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 0 10px;
+  p {
+    margin-top: 0;
+    margin-bottom: 17px;
+    font-size: 15px;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+`
+
+export const LogoAndReviewWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const ContinueContainer = styled.div`
+  display: flex;
+  align-items: center;
+  p{
+    flex: 1
+  }
+`

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

@@ -99,6 +99,7 @@ export const SearchBar = (props) => {
           maxLength='500'
           style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
           defaultValue={search}
+          onClick={() => handleCustomEnter && handleCustomEnter()}
         />
         <DeleteContent className='clear'>
           {el.current?.value && <span onClick={handleClear}>{t('CLEAR', 'Clear')}</span>}

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

@@ -31,8 +31,10 @@ export const SearchProducts = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const searchRef = useRef()
+
   const handleGoToPage = (data) => {
     events.emit('go_to_page', data)
+    document.body.style.overflowY = 'auto'
   }
 
   useEffect(() => {