ordering-ui-external 1.2.3 → 1.3.0

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

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { useLanguage, useUtils, ReviewDriver } from 'ordering-components-external'
+import MdClose from '@meronex/icons/md/MdClose'
+import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
+
+import { Alert } from '../Confirm'
+import { TextArea } from '../../styles/Inputs'
+import { Button } from '../../styles/Buttons'
+import { useTheme } from 'styled-components'
+
+import {
+  ReviewProfessionalContainer,
+  Comments,
+  ActionBtnWrapper,
+  DriverPhoto,
+  WrapperDriverPhoto,
+  ReviewsProgressWrapper,
+  ReviewsProgressContent,
+  ReviewsProgressBar,
+  ReviewsMarkPoint,
+  LogoAndReviewWrapper,
+  CommentsList,
+  DriverInfoBlock,
+  CommentButton
+} from './styles'
+import { reviewCommentList } from '../../../../../utils'
+
+const ReviewProfessionalUI = (props) => {
+  const {
+    dirverReviews,
+    order,
+    formState,
+    setDriverReviews,
+    closeReviewProfessional,
+    setIsProfessionalReviewed,
+    handleSendDriverReview
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const { handleSubmit, errors } = useForm()
+  const [comments, setComments] = useState([])
+  const [extraComment, setExtraComment] = useState('')
+  const [alertState, setAlertState] = useState({ open: false, content: [], success: false })
+
+  const commentsList = reviewCommentList('professional')
+
+  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 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 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 closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  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) {
+      setIsProfessionalReviewed && setIsProfessionalReviewed(true)
+      closeReviewProfessional && closeReviewProfessional()
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map(comment => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setDriverReviews({ ...dirverReviews, comment: _comment })
+  }, [comments, extraComment])
+
+  return (
+    <>
+      <LogoAndReviewWrapper>
+        <WrapperDriverPhoto>
+          {(order?.products[0]?.calendar_event?.professional?.photo) ? (
+            <DriverPhoto bgimage={optimizeImage(order?.products[0]?.calendar_event?.professional?.photo, 'h_200,c_limit')} />
+          ) : <FaUserAlt />}
+        </WrapperDriverPhoto>
+        {
+          order?.products[0]?.calendar_event?.professional?.name && (
+            <DriverInfoBlock>{order?.products[0]?.calendar_event?.professional?.name}</DriverInfoBlock>
+          )
+        }
+        <ReviewsProgressWrapper>
+          <p>{t('HOW_WAS_YOUR_SERVICE', 'How was your service?')}</p>
+          <ReviewsProgressContent>
+            <ReviewsProgressBar style={{ width: `${(dirverReviews?.qualification === 0 ? 0 : (dirverReviews?.qualification - 1) / 4) * 100}%` }} />
+            {
+              qualificationList?.map(qualification => (
+                <ReviewsMarkPoint
+                  key={qualification?.key}
+                  style={{
+                    left: theme.rtl ? (qualification?.middleNode ? 'initial' : qualification?.right) : qualification?.left,
+                    right: theme?.rtl ? qualification?.left : (qualification?.middleNode ? 'initial' : qualification?.right)
+                  }}
+                  active={dirverReviews?.qualification === qualification?.key}
+                  pass={dirverReviews?.qualification >= qualification?.key}
+                  className={qualification?.middleNode ? 'mark-point' : ''}
+                  onClick={() => handleChangeReviews(qualification?.key)}
+                >
+                  <span>{qualification?.text}<span /></span>
+                </ReviewsMarkPoint>
+              ))
+            }
+          </ReviewsProgressContent>
+        </ReviewsProgressWrapper>
+        <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>
+      <ReviewProfessionalContainer 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>
+        {
+          props.afterMidElements?.map((MidElement, i) => (
+            <React.Fragment key={i}>
+              {MidElement}
+            </React.Fragment>))
+        }
+        {
+          props.afterMidComponents?.map((MidComponent, i) => (
+            <MidComponent key={i} {...props} />))
+        }
+        <ActionBtnWrapper>
+          <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>
+        </ActionBtnWrapper>
+        <Alert
+          title={t('DRIVER_REVIEW', 'Driver Review')}
+          content={alertState.content}
+          acceptText={t('ACCEPT', 'Accept')}
+          open={alertState.open}
+          onClose={() => closeAlert()}
+          onAccept={() => closeAlert()}
+          closeOnBackdrop={false}
+        />
+      </ReviewProfessionalContainer>
+    </>
+  )
+}
+
+export const ReviewProfessional = (props) => {
+  const reviewDriverProps = {
+    ...props,
+    UIComponent: ReviewProfessionalUI,
+    isToast: true
+  }
+
+  return <ReviewDriver {...reviewDriverProps} />
+}

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

@@ -0,0 +1,233 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+
+export const ReviewProfessionalContainer = 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 ActionBtnWrapper = styled.div`
+  margin-top: 30px;
+  width: 100%;
+
+  button {
+    font-size: 14px;
+    padding: 6px 20px;
+    width: 100%;
+  }
+`
+
+const DriverPhotoStyled = 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 DriverPhoto = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+
+  return (
+    <DriverPhotoStyled {...props} style={style}>
+      {props.children}
+    </DriverPhotoStyled>
+  )
+}
+
+export const WrapperDriverPhoto = 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;
+
+  svg {
+    width: 124px;
+    height: 124px;
+  }
+`
+
+export const ReviewsProgressWrapper = styled.div`
+  width: 100%;
+  margin-top: 50px;
+  margin-bottom: 35px;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 17px;
+    font-size: 15px;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+`
+
+export const ReviewsProgressContent = styled.div`
+  background: #E9ECEF;
+  border-radius: 50px;
+  width: 100%;
+  height: 6px;
+  position: relative;
+  margin-bottom: 30px;
+`
+
+export const ReviewsProgressBar = styled.div`
+  height: 6px;
+  border-radius: 50px;
+  background: #344050;
+  transition: all 0.2s linear;
+`
+
+export const ReviewsMarkPoint = styled.div`
+  position: absolute;
+  top: 15px;
+  font-size: 12px;
+  color: #CED4DA;
+  cursor: pointer;
+
+  ${({ active }) => active && css`
+    > span {
+      color: #344050;
+    }
+  `}
+
+  &.mark-point {
+    span {
+      position: relative;
+      margin-left: -50%;
+      ${props => props.theme?.rtl && css`
+        margin-right: -50%;
+        margin-left: 0;
+      `}
+
+      > span {
+        position: absolute;
+        height: 6px;
+        top: -15px;
+        width: 2px;
+        background: #CED4DA;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  ${({ pass }) => pass && css`
+    span {
+      > span {
+        background: transparent !important;
+      }
+    }
+  `}
+`
+
+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: 50px;
+    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 DriverInfoBlock = styled.p`
+  margin-top: 16px;
+  margin-bottom: 0;
+  font-size: 14px;
+  text-align: center;
+  color: #344050;
+`
+
+export const CommentButton = 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/SignUpApproval/index.js

@@ -0,0 +1,108 @@
+import React from 'react'
+import { useTheme } from 'styled-components'
+import { Button } from '../../styles/Buttons'
+
+import { useLanguage } from 'ordering-components-external'
+
+import {
+  Container,
+  HeaderSection,
+  Title,
+  LogoImage,
+  BodySection,
+  DescriptionContainer,
+  Description,
+  ProjectInfoContainer,
+  FooterSection,
+  ActionGroup,
+  ContactSection
+} from './styles'
+
+export const SignUpApproval = (props) => {
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const { content: { project, dashboardUrl, dashboardLoginUrl, approvalType, businessType }, onAccept, onCancel } = props
+  const contactEmail = 'support@ordering.co'
+  const showDomain = false
+
+  const logoImgUrl = businessType === '2'
+    ? approvalType === 'automatic' ? theme.images?.general?.CongratulationApproval : theme.images?.general?.CongratulationNoApproval
+    : approvalType === 'automatic' ? theme.images?.general?.driverCongratulationApproval : theme.images?.general?.driverCongratulationNoApproval
+  const userType = businessType === '2' ? 'business' : 'driver'
+  return (
+    <Container>
+      <HeaderSection>
+        {showDomain && <Title>Domain or Brand</Title>}
+        <LogoImage
+          approvalType={approvalType === 'automatic'}
+          src={logoImgUrl}
+        />
+      </HeaderSection>
+      {approvalType === 'automatic' ? (
+        <BodySection>
+          {userType === 'business' ? (
+            <DescriptionContainer>
+              <Description>{t('GET_IN_OUR_DASHBOARD_USING_OWNER_ACCOUNT', 'Get in our Dashboard using the business owner account you just created.')}</Description>
+              <Description><span className='bigger'>{t('VERY_IMPORTANT', 'Very important')}</span> {t('USE_PROJECT_TO', 'use the project')} (<span className='italic'>{project}</span>) {t('TO_SETUP_YOUR_STORE', ', to get inside and set up your store.')}</Description>
+            </DescriptionContainer>
+          ) : (
+            <DescriptionContainer>
+              <Description>{t('GET_IN_OUR_DASHBOARD_USING_DRIVER_OWNER_ACCOUNT', 'Get in our Dashboard using the driver owner account you just created.')}</Description>
+              <Description><span className='bigger'>{t('VERY_IMPORTANT', 'Very important')}</span> {t('USE_PROJECT_TO', 'use the project')} (<span className='italic'>{project}</span>) {t('TO_GET_DRIVER_APP', ', to get inside the driver app')}</Description>
+            </DescriptionContainer>
+          )}
+          <ProjectInfoContainer>
+            <tbody>
+              <tr>
+                <td className='bigger td-text-right'>{t('PROJECT', 'Project')}: </td>
+                <td className='td-text-left'>({project})</td>
+              </tr>
+              <tr>
+                <td className='bigger td-text-right'>{t('DASHBOARD_WEBPAGE', 'Dashboard webpage')}: </td>
+                <td className='td-text-left'><a className='green-text' href={dashboardLoginUrl} target='_blank' rel='noopener noreferrer'>{dashboardUrl}</a></td>
+              </tr>
+            </tbody>
+          </ProjectInfoContainer>
+        </BodySection>
+      ) : (
+        <BodySection>
+          {businessType === 'business' ? (
+            <DescriptionContainer>
+              <Description><span className='bigger'>{t('YOUR_STORE_UNDER_APPROVAL', 'Your store is under approval')}</span></Description>
+              <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></Description>
+            </DescriptionContainer>
+          ) : (
+            <DescriptionContainer>
+              <Description><span className='bigger'>{t('REQUEST_TO_START_UNDER_APPROVAL', 'Your request to start as a driver is under approval.')}</span></Description>
+              <Description>{t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')}</Description>
+              <Description>{t('FEEL_FREE_CONTACT_US', 'feel free to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></Description>
+            </DescriptionContainer>
+          )}
+        </BodySection>
+      )}
+      <FooterSection>
+        <ActionGroup>
+          <Button
+            outline
+            color='primary'
+            type='button'
+            onClick={() => onCancel()}
+          >
+            {t('CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            color='primary'
+            type='button'
+            onClick={() => onAccept()}
+          >
+            {t('ACCEPT', 'Accept')}
+          </Button>
+        </ActionGroup>
+        {(approvalType === 'automatic' && userType === 'business') && (
+          <ContactSection>{t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at ')} <a className='green-text' href={`mailto:${contactEmail}`}>{contactEmail}</a></ContactSection>
+        )}
+      </FooterSection>
+    </Container>
+  )
+}

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

@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  text-align: center;
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+`
+export const HeaderSection = styled.div`
+
+`
+export const Title = styled.p`
+  margin: 0;
+  font-size: 24px;
+  transform: translate(0px, -22px);
+`
+export const LogoImage = styled.img`
+  width: 100%;
+  object-fit: cover;
+
+  ${({ approvalType }) => css`
+    ${approvalType ? `
+      @media (min-width: 450px) {
+        width: 395px;
+      }
+    ` : `
+    @media (min-width: 600px) {
+        width: 540px;
+    }
+    `}
+  `}
+`
+export const BodySection = styled.div`
+  margin-top: 25px;
+`
+export const DescriptionContainer = styled.div`
+
+`
+export const Description = styled.p`
+  font-size: 20px;
+  margin-top: 0;
+  margin-bottom: 5px;
+  word-break: break-all;
+  > .bigger {
+    font-weight: 600;
+  }
+  > .italic {
+    font-style: italic;
+  }
+  > .green-text {
+    color: ${props => props.theme.colors.links} !important;
+  }
+`
+export const ProjectInfoContainer = styled.table`
+  margin: 35px auto 0;
+  width: 100%;
+  .bigger {
+    font-weight: 600;
+  }
+  .td-text-right {
+    text-align: right;
+    padding-right: 20px;
+  }
+  .td-text-left {
+    text-align: left;
+  }
+  .green-text {
+    color: ${props => props.theme.colors.links} !important;
+  }
+  td {
+    > a {
+      word-break: break-all;
+    }
+  }
+`
+export const FooterSection = styled.div`
+  margin: 35px auto 25px;
+`
+export const ActionGroup = styled.div`
+  width: 90%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > button {
+    width: 48.5%;
+    padding: 5px;
+  }
+`
+export const ContactSection = styled.div`
+  margin: 25px auto 0;
+  font-style: italic;
+
+  > a.green-text {
+    color: ${props => props.theme.colors.links} !important;
+  }
+`