ordering-ui-external 14.1.20 → 14.1.21

package/src/themes/franchise/src/components/BusinessReviews/index.js

@@ -1,134 +1,134 @@
-import React from 'react'
-import Skeleton from 'react-loading-skeleton'
-import { BusinessReviews as BusinessReviewController, useLanguage } from 'ordering-components-external'
-import { useTheme } from '../../../../../contexts/ThemeContext'
-import moment from 'moment'
-
-import {
-  BusinessReviewsContainer,
-  ReviewOf,
-  Content,
-  Review,
-  ReviewsNotFound,
-  SkeletonContainer,
-  ReviewsHeaderWrapper,
-  ReviewsProgressWrapper,
-  ReviewsProgressContent,
-  ReviewsProgressBar,
-  ReviewsMarkPoint,
-  ReviewTime,
-  ReviewItemHeader,
-  ReviewItemContent,
-  SearchContainer
-} from './styles'
-
-import BsFillStarFill from '@meronex/icons/bs/BsFillStarFill'
-
-export const BusinessReviewsUI = (props) => {
-  const { stars, reviewsList, handleClickOption } = props
-  const [, t] = useLanguage()
-  const [theme] = useTheme()
-
-  const handleOnChange = (evt) => {
-    if (evt.target.value === '') handleClickOption('all')
-    else handleClickOption(evt.target.value)
-  }
-
-  return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <BusinessReviewsContainer>
-        {reviewsList.error ? <h2>{t('ERROR_UNKNOWN', 'An error has ocurred')}</h2> : (
-          <>
-            <ReviewsHeaderWrapper noReviews={reviewsList?.reviews.length === 0}>
-              {
-                !reviewsList.loading ? (
-                  <>
-                    <BsFillStarFill />
-                    <h2>{`${stars} (${reviewsList?.reviews.length} ${t('REVIEWS', 'Reviews')})`}</h2>
-                  </>
-                ) : (
-                  <Skeleton width={100} height={30} />
-                )
-              }
-            </ReviewsHeaderWrapper>
-            <ReviewOf>
-              {!reviewsList.loading
-                ? (
-                  <SearchContainer>
-                    <input
-                      type='number'
-                      min='1'
-                      max='5'
-                      onChange={handleOnChange}
-                      placeholder={t('SEARCH', 'Search')}
-                      style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
-                    />
-                  </SearchContainer>
-                )
-                : <Skeleton width={200} height={30} />}
-            </ReviewOf>
-            <ReviewsProgressWrapper>
-              <p>{t('REVIEW_ORDER', 'Review order')}</p>
-              <ReviewsProgressContent>
-                <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '0', right: theme?.rtl ? '0' : 'initial' }}>{t('TERRIBLE', 'Terrible')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '25%', right: theme?.rtl ? '25%' : 'initial' }}>{t('BAD', 'Bad')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '50%', right: theme?.rtl ? '50%' : 'initial' }}>{t('OKAY', 'Okay')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '75%', right: theme?.rtl ? '75%' : 'initial' }}>{t('GOOD', 'Good')}</ReviewsMarkPoint>
-                <ReviewsMarkPoint style={{ left: theme.rtl ? '0' : 'initial', right: theme?.rtl ? 'initial' : '0' }}>{t('GREAT', 'Great')}</ReviewsMarkPoint>
-              </ReviewsProgressContent>
-            </ReviewsProgressWrapper>
-            <Content id='content'>
-              {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
-                <Review key={review.id} id='review'>
-                  <ReviewItemHeader>
-                    <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
-                  </ReviewItemHeader>
-                  <ReviewItemContent>{review?.comment}</ReviewItemContent>
-                </Review>
-              )) : (
-                <>
-                  {[...Array(2)].map((item, i) => (
-                    <SkeletonContainer key={i}>
-                      <div>
-                        <Skeleton width={100} height={30} />
-                        <Skeleton width={100} />
-                      </div>
-                      <div>
-                        <Skeleton width={150} height={50} />
-                      </div>
-                    </SkeletonContainer>
-                  ))}
-
-                </>
-              )}
-              {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-                <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
-              )}
-            </Content>
-          </>
-        )}
-      </BusinessReviewsContainer>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
-  )
-}
-
-export const BusinessReviews = (props) => {
-  const BusinessReviewProps = {
-    ...props,
-    UIComponent: BusinessReviewsUI
-  }
-  return <BusinessReviewController {...BusinessReviewProps} />
-}
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { BusinessReviews as BusinessReviewController, useLanguage } from 'ordering-components-external'
+import { useTheme } from '../../../../../contexts/ThemeContext'
+import moment from 'moment'
+
+import {
+  BusinessReviewsContainer,
+  ReviewOf,
+  Content,
+  Review,
+  ReviewsNotFound,
+  SkeletonContainer,
+  ReviewsHeaderWrapper,
+  ReviewsProgressWrapper,
+  ReviewsProgressContent,
+  ReviewsProgressBar,
+  ReviewsMarkPoint,
+  ReviewTime,
+  ReviewItemHeader,
+  ReviewItemContent,
+  SearchContainer
+} from './styles'
+
+import BsFillStarFill from '@meronex/icons/bs/BsFillStarFill'
+
+export const BusinessReviewsUI = (props) => {
+  const { stars, reviewsList, handleClickOption } = props
+  const [, t] = useLanguage()
+  const [theme] = useTheme()
+
+  const handleOnChange = (evt) => {
+    if (evt.target.value === '') handleClickOption('all')
+    else handleClickOption(evt.target.value)
+  }
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <BusinessReviewsContainer>
+        {reviewsList.error ? <h2>{t('ERROR_UNKNOWN', 'An error has ocurred')}</h2> : (
+          <>
+            <ReviewsHeaderWrapper noReviews={reviewsList?.reviews.length === 0}>
+              {
+                !reviewsList.loading ? (
+                  <>
+                    <BsFillStarFill />
+                    <h2>{`${stars} (${reviewsList?.reviews.length} ${t('REVIEWS', 'Reviews')})`}</h2>
+                  </>
+                ) : (
+                  <Skeleton width={100} height={30} />
+                )
+              }
+            </ReviewsHeaderWrapper>
+            <ReviewOf>
+              {!reviewsList.loading
+                ? (
+                  <SearchContainer>
+                    <input
+                      type='number'
+                      min='1'
+                      max='5'
+                      onChange={handleOnChange}
+                      placeholder={t('SEARCH', 'Search')}
+                      style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
+                    />
+                  </SearchContainer>
+                )
+                : <Skeleton width={200} height={30} />}
+            </ReviewOf>
+            <ReviewsProgressWrapper>
+              <p>{t('REVIEW_ORDER', 'Review order')}</p>
+              <ReviewsProgressContent>
+                <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
+                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '0', right: theme?.rtl ? '0' : 'initial' }}>{t('TERRIBLE', 'Terrible')}</ReviewsMarkPoint>
+                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '25%', right: theme?.rtl ? '25%' : 'initial' }}>{t('BAD', 'Bad')}</ReviewsMarkPoint>
+                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '50%', right: theme?.rtl ? '50%' : 'initial' }}>{t('OKAY', 'Okay')}</ReviewsMarkPoint>
+                <ReviewsMarkPoint style={{ left: theme.rtl ? 'initial' : '75%', right: theme?.rtl ? '75%' : 'initial' }}>{t('GOOD', 'Good')}</ReviewsMarkPoint>
+                <ReviewsMarkPoint style={{ left: theme.rtl ? '0' : 'initial', right: theme?.rtl ? 'initial' : '0' }}>{t('GREAT', 'Great')}</ReviewsMarkPoint>
+              </ReviewsProgressContent>
+            </ReviewsProgressWrapper>
+            <Content id='content'>
+              {!reviewsList.loading ? reviewsList?.reviews.map((review) => (
+                <Review key={review.id} id='review'>
+                  <ReviewItemHeader>
+                    <ReviewTime>{moment(review?.created_at).format('LLL')}</ReviewTime>
+                  </ReviewItemHeader>
+                  <ReviewItemContent>{review?.comment}</ReviewItemContent>
+                </Review>
+              )) : (
+                <>
+                  {[...Array(2)].map((item, i) => (
+                    <SkeletonContainer key={i}>
+                      <div>
+                        <Skeleton width={100} height={30} />
+                        <Skeleton width={100} />
+                      </div>
+                      <div>
+                        <Skeleton width={150} height={50} />
+                      </div>
+                    </SkeletonContainer>
+                  ))}
+
+                </>
+              )}
+              {!reviewsList.loading && reviewsList?.reviews.length === 0 && (
+                <ReviewsNotFound>{t('NO_REVIEWS', 'No reviews')}</ReviewsNotFound>
+              )}
+            </Content>
+          </>
+        )}
+      </BusinessReviewsContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const BusinessReviews = (props) => {
+  const BusinessReviewProps = {
+    ...props,
+    UIComponent: BusinessReviewsUI
+  }
+  return <BusinessReviewController {...BusinessReviewProps} />
+}

package/src/themes/franchise/src/components/BusinessReviews/styles.js

@@ -1,161 +1,161 @@
-import styled, { css } from 'styled-components'
-
-export const BusinessReviewsContainer = styled.div`
-  width: 100%;
-  overflow-x: hidden;
-  padding: 0 10px;
-  box-sizing: border-box;
-`
-
-export const ReviewOf = styled.div``
-
-export const Content = styled.div`
-
-  display: flex;
-  flex-direction: column;
-  
-  h3{
-    display: none;
-  }
-
-  @media (min-width: 480px){
-    h3 {
-      display: block;
-      color: ${props => props.theme.colors.primary};
-      margin: 0px;
-      svg{
-        font-size: 26px;
-        vertical-align: text-top;
-      }
-    }
-  }
-`
-
-export const Review = styled.div`
-  margin: 10px 0;
-  @media (min-width: 480px){
-    margin: 20px 0;
-  }
-`
-
-export const ReviewsNotFound = styled.h2`
-  margin: 65px 0;
-  font-size: 14px;
-  color: #B1BCCC;
-  text-align: center;
-`
-
-export const SkeletonContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1;
-
-    > div{
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      align-items: center;
-    }
-`
-
-export const ReviewsHeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 30px;
-  ${props => props.theme?.rtl && css`
-    padding-right: 30px;
-    padding-left: 0;
-  `}
-
-  svg {
-    font-size: 30px;
-    color: ${props => props.theme?.colors.primary};
-    margin-right: 13px;
-    ${props => props.theme?.rtl && css`
-       margin-left: 13px;
-       margin-right: 0;
-    `}
-  }
-  h2 {
-    font-weight: 600;
-    font-size: 24px;
-    margin: 10px 0;
-    color: ${props => props.theme?.colors.darkTextColor};
-  }
-
-  ${({ noReviews }) => noReviews && css`
-    svg {
-      color: #B1BCCC;
-    }
-  `}
-`
-
-export const ReviewsProgressWrapper = styled.div`
-  p {
-    margin-top: 0;
-    font-size: 14px;
-    color: ${props => props.theme?.colors.darkTextColor};
-  }
-`
-
-export const ReviewsProgressContent = styled.div`
-  background: #E9ECEF;
-  border-radius: 50px;
-  width: 100%;
-  height: 4px;
-  position: relative;
-  margin-bottom: 30px;
-`
-
-export const ReviewsProgressBar = styled.div`
-  height: 4px;
-  border-radius: 50px;
-  background: #344050;
-`
-
-export const ReviewsMarkPoint = styled.span`
-  position: absolute;
-  top: 15px;
-  font-size: 12px;
-  color: #CED4DA;
-`
-
-export const ReviewTime = styled.p`
-  font-size: 12px;
-  color: #909BA9;
-  margin: 0;
-`
-
-export const ReviewItemHeader = styled.div`
-  margin-bottom: 17px;
-`
-
-export const ReviewItemContent = styled.div`
-  font-size: 12px;
-  color: ${props => props.theme?.colors.darkTextColor};
-`
-
-export const SearchContainer = styled.div`
-  margin: 35px 0;
-  
-  input {
-    outline: none;
-    border: none;
-    border-bottom: 1px solid #E9ECEF;
-    border-radius: 0px;
-    width: 100%;
-    background-repeat: no-repeat;
-    background-size: 20px 18px;
-    background-position: left center;
-    box-sizing: border-box;
-    padding: 7px 0 7px 30px;
-
-    ${props => props.theme?.rtl && css`
-      padding: 7px 30px 7px 0;
-      background-position: right center;
-    `}
-  }
-`
+import styled, { css } from 'styled-components'
+
+export const BusinessReviewsContainer = styled.div`
+  width: 100%;
+  overflow-x: hidden;
+  padding: 0 10px;
+  box-sizing: border-box;
+`
+
+export const ReviewOf = styled.div``
+
+export const Content = styled.div`
+
+  display: flex;
+  flex-direction: column;
+  
+  h3{
+    display: none;
+  }
+
+  @media (min-width: 480px){
+    h3 {
+      display: block;
+      color: ${props => props.theme.colors.primary};
+      margin: 0px;
+      svg{
+        font-size: 26px;
+        vertical-align: text-top;
+      }
+    }
+  }
+`
+
+export const Review = styled.div`
+  margin: 10px 0;
+  @media (min-width: 480px){
+    margin: 20px 0;
+  }
+`
+
+export const ReviewsNotFound = styled.h2`
+  margin: 65px 0;
+  font-size: 14px;
+  color: #B1BCCC;
+  text-align: center;
+`
+
+export const SkeletonContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+
+    > div{
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+    }
+`
+
+export const ReviewsHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 30px;
+  ${props => props.theme?.rtl && css`
+    padding-right: 30px;
+    padding-left: 0;
+  `}
+
+  svg {
+    font-size: 30px;
+    color: ${props => props.theme?.colors.primary};
+    margin-right: 13px;
+    ${props => props.theme?.rtl && css`
+       margin-left: 13px;
+       margin-right: 0;
+    `}
+  }
+  h2 {
+    font-weight: 600;
+    font-size: 24px;
+    margin: 10px 0;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+
+  ${({ noReviews }) => noReviews && css`
+    svg {
+      color: #B1BCCC;
+    }
+  `}
+`
+
+export const ReviewsProgressWrapper = styled.div`
+  p {
+    margin-top: 0;
+    font-size: 14px;
+    color: ${props => props.theme?.colors.darkTextColor};
+  }
+`
+
+export const ReviewsProgressContent = styled.div`
+  background: #E9ECEF;
+  border-radius: 50px;
+  width: 100%;
+  height: 4px;
+  position: relative;
+  margin-bottom: 30px;
+`
+
+export const ReviewsProgressBar = styled.div`
+  height: 4px;
+  border-radius: 50px;
+  background: #344050;
+`
+
+export const ReviewsMarkPoint = styled.span`
+  position: absolute;
+  top: 15px;
+  font-size: 12px;
+  color: #CED4DA;
+`
+
+export const ReviewTime = styled.p`
+  font-size: 12px;
+  color: #909BA9;
+  margin: 0;
+`
+
+export const ReviewItemHeader = styled.div`
+  margin-bottom: 17px;
+`
+
+export const ReviewItemContent = styled.div`
+  font-size: 12px;
+  color: ${props => props.theme?.colors.darkTextColor};
+`
+
+export const SearchContainer = styled.div`
+  margin: 35px 0;
+  
+  input {
+    outline: none;
+    border: none;
+    border-bottom: 1px solid #E9ECEF;
+    border-radius: 0px;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: 20px 18px;
+    background-position: left center;
+    box-sizing: border-box;
+    padding: 7px 0 7px 30px;
+
+    ${props => props.theme?.rtl && css`
+      padding: 7px 30px 7px 0;
+      background-position: right center;
+    `}
+  }
+`