ordering-ui-external 14.0.6 → 14.0.8

package/src/themes/five/src/components/OrderDetails/layouts/Starbucks/HeaderContent.js

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-external'
+import { useTheme } from 'styled-components'
+
+import {
+  Container,
+  StatusBarContainer,
+  Icon,
+  OrderTitle,
+  DelayedTime,
+  ReviewedText,
+  MapWrapper,
+  Map
+} from './styles'
+import { PoweredByOrdering } from '../../styles'
+import moment from 'moment'
+import { ReviewOrder } from '../../../ReviewOrder/layouts/Simple'
+import { ReviewDriver } from '../../../ReviewDriver/layouts/Simple'
+
+export const HeaderContent = (props) => {
+  const {
+    order,
+    hashKey,
+    orderId,
+    showReview,
+    changeIdToExternalId,
+    enabledPoweredByOrdering,
+    orderStatus,
+    percentage,
+    googleMapsUrl
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+
+  const [reviewState, setReviewState] = useState({ order: false, driver: false })
+
+  const getDelayMinutes = (order) => {
+    const defaultDate = order?.fechaHoraAmasTardar ?? order?.delivery_datetime
+    const offset = 300
+    const cdtToutc = moment(defaultDate).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
+    const _delivery = order?.delivery_datetime_utc && !order?.fechaHoraAmasTardar
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD HH:mm:ss' })
+    const _eta = order?.eta_time
+    const diffTimeAsSeconds = moment(_delivery).add(_eta, 'minutes').diff(moment().utc(), 'seconds')
+    return Math.ceil(diffTimeAsSeconds / 60)
+  }
+
+  const displayDelayedTime = (order) => {
+    let tagetedMin = getDelayMinutes(order)
+    // get day, hour and minutes
+    const sign = tagetedMin >= 0 ? '' : '- '
+    tagetedMin = Math.abs(tagetedMin)
+    let day = Math.floor(tagetedMin / 1440)
+    const restMinOfTargetedMin = tagetedMin - 1440 * day
+    let restHours = Math.floor(restMinOfTargetedMin / 60)
+    let restMins = restMinOfTargetedMin - 60 * restHours
+    // make standard time format
+    day = day === 0 ? '' : `${day + ' ' + t('DAY', 'day') + ' '}`
+    restHours = restHours < 10 ? '0' + restHours : restHours
+    restMins = restMins < 10 ? '0' + restMins : restMins
+
+    const finalTaget = sign + day + restHours + ':' + restMins
+    return finalTaget
+  }
+
+  useEffect(() => {
+    setReviewState({
+      order: !!order?.review,
+      driver: !!(order?.driver && order?.user_review)
+    })
+  }, [order])
+
+  return (
+    <Container>
+      <OrderTitle>
+        <div className='left'>
+          <h1>
+            {t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')}
+            {(changeIdToExternalId && orderId.external_id) || `#${orderId.id}`}
+          </h1>
+          {enabledPoweredByOrdering && (
+            <PoweredByOrdering>
+              {t('POWERED_BY', 'Powered by')}
+              <a href='https://www.ordering.co'>
+                {t('ORDERING_CO', 'Ordering.co')}
+              </a>
+            </PoweredByOrdering>
+          )}
+        </div>
+        <DelayedTime className='center'>
+          <div className='ring1'>
+            <div className='ring2'>
+              <div className='time'>
+                <p>{t('DELAYED_TIME_MESSAGE', 'Arriving in')}</p>
+                <span>{displayDelayedTime(order)}</span>
+              </div>
+            </div>
+          </div>
+        </DelayedTime>
+      </OrderTitle>
+      <p className='order-status'>{orderStatus}</p>
+      <StatusBarContainer percentage={percentage}>
+        <Icon
+          position={0}
+          bgColor={percentage >= 0 && theme.colors.primary}
+        >
+          <img src={theme.images.icons.store} />
+        </Icon>
+        <Icon
+          position={33.33}
+          bgColor={percentage >= 33.33 && theme.colors.primary}
+        >
+          <img src={theme.images.icons.driver} />
+        </Icon>
+        <Icon
+          position={66.66}
+          bgColor={percentage >= 66.66 && theme.colors.primary}
+        >
+          <img src={theme.images.icons.home} />
+        </Icon>
+        <Icon
+          position={100}
+          bgColor={percentage === 100 && theme.colors.primary}
+        >
+          <img src={theme.images.icons.delivered} />
+        </Icon>
+      </StatusBarContainer>
+      {showReview && !reviewState.order && !order?.review && (
+        <ReviewOrder
+          order={order}
+          hashKey={hashKey}
+          defaultStar={5}
+          setIsReviewed={() => setReviewState({ ...reviewState, order: true })}
+        />
+      )}
+      {reviewState.order && !reviewState.driver && order?.driver && !order?.user_review && (
+        <ReviewDriver
+          order={order}
+          hashKey={hashKey}
+          defaultStar={5}
+          setIsReviewed={() => setReviewState({ ...reviewState, driver: true })}
+        />
+      )}
+      {(order?.review || reviewState.order) && ((order?.driver && (order?.user_review || reviewState.driver)) || !order?.driver) && (
+        <ReviewedText>
+          <p>{t('ORDER_ALREADY_REVIEWED_MESSAGE', 'This order has already been attended to, thank you for your preference.')}</p>
+        </ReviewedText>
+      )}
+      {googleMapsUrl && (
+        <MapWrapper>
+          <Map style={{ width: '100%' }}>
+            <img
+              src={googleMapsUrl}
+              id='google-maps-image'
+              alt='google-maps-location'
+              width='100%'
+              height='100%'
+              loading='lazy'
+            />
+          </Map>
+        </MapWrapper>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,7 @@
+import {
+  HeaderContent
+} from './HeaderContent'
+
+export {
+  HeaderContent
+}

package/src/themes/five/src/components/OrderDetails/layouts/Starbucks/styles.js

@@ -0,0 +1,148 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-bottom: 40px;
+
+  p.order-status {
+    text-align: center;
+    color: ${props => props.theme.colors.primary || 'black'};
+    font-size: 1.3rem;
+    margin: 0;
+    padding: 0;
+  }
+`
+
+export const OrderTitle = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  div.left {
+    grid-column: 1;
+  }
+  div.center {
+    grid-column: 2;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    padding: 0;
+    margin: 0;
+  }
+
+  p {
+    justify-content: left;
+
+    a {
+      text-decoration: underline !important;
+      color: #0000EE !important;
+    }
+  }
+`
+
+export const StatusBarContainer = styled.div`
+  position: relative;
+  height: 12px;
+  margin: 18px 0px 8px;
+  background: ${props => `linear-gradient(to right, ${props.theme.colors.primary} ${props.percentage}%, ${props.theme.colors.disabled} ${props.percentage}%)`};
+  ${props => props.theme?.rtl && css`
+    background: linear-gradient(to left, ${props.theme.colors.primary} ${props.percentage}%, ${props.theme.colors.disabled} ${props.percentage}%);
+  `}
+`
+
+export const Icon = styled.span`
+  position: absolute;
+  top: 50%;
+  font-size: 35px;
+  transform: translateY(-50%);
+  color: #FFFFFF;
+  left: calc(${props => props.position}% - 25px);
+
+  img {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+  }
+
+  width: 50px;
+  height: 50px;
+  background-color: ${props => props.bgColor || props.theme.colors.disabled};
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const DelayedTime = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+
+  div.ring1 {
+    border: 6px solid ${props => props.theme.colors.primary};
+    padding: 5px;
+    border-radius: 50%;
+  }
+  div.ring2 {
+    border: 9px solid ${props => props.theme.colors.primary};
+    padding: 5px;
+    border-radius: 50%;
+  }
+  div.time {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: ${props => props.theme.colors.primary};
+    padding: 10px;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    color: #FFF;
+    text-align: center;
+
+    p {
+      margin: 0;
+      padding: 0;
+      font-size: 14px;
+    }
+
+    span {
+      font-size: 18px;
+    }
+  }
+`
+
+export const ReviewedText = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 7.6px;
+  padding: 20px;
+  box-shadow: 0px 4px 10px 0px #0000001F;
+  margin: 55px 0 30px;
+
+  p {
+    font-weight: bold;
+    text-align: center;
+  }
+`
+
+export const MapWrapper = styled.div`
+  width: 100%;
+  margin-top: 30px;
+`
+
+export const Map = styled.div`
+  margin-bottom: 10px;
+  width: 100%;
+  > div {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  img {
+    object-fit: cover;
+  }
+`

package/src/themes/five/src/components/ReviewDriver/layouts/Simple/index.js

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { useLanguage, ReviewDriver as ReviewDriverController } from 'ordering-components-external'
+import MdClose from '@meronex/icons/md/MdClose'
+import IfillStar from '@meronex/icons/ai/AiFillStar'
+import IUnfillStar from '@meronex/icons/ai/AiOutlineStar'
+
+import {
+  Container,
+  ReviewDriverContainer,
+  Comments,
+  ReviewsProgressWrapper,
+  ReviewsProgressContent,
+  LogoAndReviewWrapper,
+  CommentsList,
+  CommentButton,
+  Send
+} from './styles'
+
+import { reviewCommentList } from '../../../../../../../utils'
+import { Alert } from '../../../Confirm'
+import { TextArea } from '../../../../styles/Inputs'
+import { Button } from '../../../../styles/Buttons'
+
+const ReviewDriverUI = (props) => {
+  const {
+    dirverReviews,
+    formState,
+    setDriverReviews,
+    setIsReviewed,
+    handleSendDriverReview
+  } = props
+
+  const [, t] = useLanguage()
+  const { handleSubmit, errors } = useForm()
+  const [comments, setComments] = useState([])
+  const [extraComment, setExtraComment] = useState('')
+  const [alertState, setAlertState] = useState({ open: false, content: [], success: false })
+
+  const commentsList = reviewCommentList('driver')
+
+  const qualificationList = [
+    { key: 1, text: t('TERRIBLE', 'Terrible'), middleNode: false, left: 0, right: 'initial' },
+    { key: 2, text: t('BAD', 'Bad'), middleNode: true, left: '25%', right: '75%' },
+    { key: 3, text: t('OKAY', 'Okay'), middleNode: true, left: '50%', right: '50%' },
+    { key: 4, text: t('GOOD', 'Good'), middleNode: true, left: '75%', right: '25%' },
+    { key: 5, text: t('GREAT', 'Great'), middleNode: false, left: 'initial', right: 0 }
+  ]
+
+  const handleChangeReviews = (index) => {
+    if (index) setDriverReviews({ ...dirverReviews, qualification: index, comment: '' })
+    setComments([])
+  }
+
+  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(() => {
+    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) {
+      setIsReviewed && setIsReviewed()
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  const onSubmit = values => {
+    if (dirverReviews?.qualification === 0) {
+      setAlertState({
+        open: true,
+        content: [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`]
+      })
+      return
+    }
+    setAlertState({ ...alertState, success: true })
+    handleSendDriverReview()
+  }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setDriverReviews({ ...dirverReviews, comment: _comment })
+  }, [comments, extraComment])
+
+  return (
+    <Container>
+      <LogoAndReviewWrapper>
+        <ReviewsProgressWrapper>
+          <p style={{ fontWeight: 'bold' }}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</p>
+          <ReviewsProgressContent>
+            {
+              qualificationList?.map(qualification => (
+                <div
+                  key={qualification?.key}
+                >
+                  {qualification?.key <= dirverReviews?.qualification
+                    ? <IfillStar onClick={() => handleChangeReviews(qualification?.key)} />
+                    : <IUnfillStar onClick={() => handleChangeReviews(qualification?.key)} />}
+                </div>
+              ))
+            }
+          </ReviewsProgressContent>
+        </ReviewsProgressWrapper>
+        {dirverReviews?.qualification <= 3 && (
+          <CommentsList>
+            <p>{commentsList[dirverReviews?.qualification || 1]?.title}</p>
+            {
+              commentsList[dirverReviews?.qualification || 1]?.list?.map((commentItem, i) => (
+                <CommentButton
+                  key={i}
+                  active={isSelectedComment(commentItem.key)}
+                  onClick={() => handleChangeComment(commentItem)}
+                  initialIcon
+                >
+                  {commentItem.content}
+                  {isSelectedComment(commentItem.key) && <MdClose />}
+                </CommentButton>
+              ))
+            }
+          </CommentsList>
+        )}
+      </LogoAndReviewWrapper>
+      <ReviewDriverContainer onSubmit={handleSubmit(onSubmit)}>
+        <Comments>
+          <p>{t('DO_YOU_WANT_TO_ADD_SOMETHING', 'Do you want to add something?')}</p>
+          <TextArea
+            name='comment'
+            value={extraComment}
+            onChange={(e) => setExtraComment(e.target.value)}
+            autoComplete='off'
+          />
+        </Comments>
+        <Send>
+          <Button
+            color={!formState.loading ? 'primary' : 'secondary'}
+            type='submit'
+            disabled={formState.loading}
+            className='review-sent'
+          >
+            {!formState.loading ? (
+              t('SEND_REVIEW', 'Send review')
+            ) : t('LOADING', 'Loading')}
+          </Button>
+        </Send>
+        <Alert
+          title={t('DRIVER_REVIEW', 'Driver Review')}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </ReviewDriverContainer>
+    </Container>
+  )
+}
+
+export const ReviewDriver = (props) => {
+  const reviewDriverProps = {
+    ...props,
+    UIComponent: ReviewDriverUI,
+    isToast: true
+  }
+
+  return <ReviewDriverController {...reviewDriverProps} />
+}
+
+export default ReviewDriver

package/src/themes/five/src/components/ReviewDriver/layouts/Simple/styles.js

@@ -0,0 +1,163 @@
+import styled, { css } from 'styled-components'
+import { Button } from '../../../../styles/Buttons'
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 7.6px;
+  padding: 20px;
+  box-shadow: 0px 4px 10px 0px #0000001F;
+  margin: 55px 0 30px;
+`
+
+export const ReviewDriverContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`
+
+export const Comments = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  margin-top: 10px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 15px;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+
+  textarea {
+    min-height: 104px;
+  }
+`
+
+export const ReviewsProgressWrapper = styled.div`
+  width: 100%;
+  margin-bottom: 20px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 17px;
+    font-size: 15px;
+    color: ${props => props.theme?.colors.darkTextColor};
+    text-align: center;
+  }
+`
+
+export const ReviewsProgressContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  svg {
+    font-size: 4rem;
+    color: ${props => props.theme?.colors.primary};
+    cursor: pointer;
+  }
+`
+
+export const LogoAndReviewWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const CommentsList = styled.div`
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 15px;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+
+  button {
+    border-radius: 7.6px;
+    margin-bottom: 18px;
+    margin-right: 40px;
+
+    ${props => props.theme?.rtl && css`
+      margin-left: 40px;
+      margin-right: 0;
+    `}
+
+    svg {
+      vertical-align: middle;
+      margin-left: 5px;
+
+      ${props => props.theme?.rtl && css`
+        margin-right: 5px;
+        margin-left: 0;
+      `}
+    }
+  }
+`
+
+export const CommentButton = styled(Button)`
+  border-radius: 7.6px;
+  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;
+  `}
+`
+
+export const Send = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 30px;
+  width: 100%;
+
+  span {
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 16px;
+    user-select: none;
+  }
+
+  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);
+      `}
+    }
+  }
+`