ordering-ui-admin-external 1.25.1 → 1.26.1

package/src/components/Home/HomePage/index.js

@@ -8,6 +8,8 @@ import Skeleton from 'react-loading-skeleton'
 import { useWindowSize } from '../../../hooks/useWindowSize'
 import { useTheme } from 'styled-components'
 import { getCurrentDiffDays } from '../../../utils'
+import { Modal } from '../../Shared'
+import HubspotForm from 'react-hubspot-form'
 import {
   List as MenuIcon,
   Basket as OrdersIcon,
@@ -39,7 +41,11 @@ import {
   GreetingText,
   ProjectStatusDescription,
   ProjectCurrentStatus,
-  ProjectStatusWrapper
+  ProjectStatusWrapper,
+  OrderingButtonWrapper,
+  OrderingButtonBlock,
+  CloseButtonWrapper,
+  HubspotFormWrapper
 } from './styles'
 
 const HomeUI = (props) => {
@@ -59,6 +65,8 @@ const HomeUI = (props) => {
   const { width } = useWindowSize()
   const [{ parsePrice }] = useUtils()
   const [sessionState] = useSession()
+  const [showForm, setShowForm] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
   const [ordering] = useApi()
 
   const project = {
@@ -205,154 +213,219 @@ const HomeUI = (props) => {
     updateTimeAxes()
   }, [])
 
+  const FormLoading = () => {
+    return (
+      <div>
+        {[...Array(4).keys()].map(key => (
+          <React.Fragment key={key}>
+            <Skeleton height={15} width={300} style={{ marginBottom: 10 }} />
+            <Skeleton height={35} style={{ marginBottom: 30 }} />
+          </React.Fragment>
+        ))}
+      </div>
+    )
+  }
+
   return (
-    <HomeContainer>
-      <Breadcrumb>
-        {isCollapse && (
-          <IconButton
-            color='black'
-            onClick={() => handleMenuCollapse(false)}
-          >
-            <MenuIcon />
-          </IconButton>
+    <>
+      <HomeContainer>
+        {width > 997 && (
+          <OrderingButtonWrapper>
+            <span>{t('WHAT_DO_YOU_WANT_SEE_ORDERING', 'What do you want to see in ordering?')}</span>
+            <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+          </OrderingButtonWrapper>
         )}
-        <h1>{t('HOME', 'Home')}</h1>
-      </Breadcrumb>
+        <Breadcrumb>
+          {isCollapse && (
+            <IconButton
+              color='black'
+              onClick={() => handleMenuCollapse(false)}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <h1>{t('HOME', 'Home')}</h1>
+        </Breadcrumb>
 
-      {projectStatus?.loading && (
-        <HeaderContainer>
-          <Skeleton height={150} />
-        </HeaderContainer>
-      )}
+        {projectStatus?.loading && (
+          <HeaderContainer>
+            <Skeleton height={150} />
+          </HeaderContainer>
+        )}
 
-      {!projectStatus?.loading && (
-        <>
-          {!projectStatus?.project?.current_status ? (
-            <HeaderContainer>
-              <WelcomeMsg>{t('WELCOME_TO_ORDERING', 'Welcome to Ordering')}!</WelcomeMsg>
-              <GuideMsg>{t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.')}</GuideMsg>
-            </HeaderContainer>
-          ) : (
-            <ProjectStatusContainer>
-              <ProjectInfoWrapper>
-                <GreetingText>{t('WELCOME', 'Welcome')} {sessionState?.user?.name}!</GreetingText>
-                <ProjectStatusDescription>
-                  {
-                    (projectStatus.project?.current_status_until && projectStatus.project?.current_status === 'past_due')
-                      ? project[projectStatus.project?.current_status]?.description.replace('_days_', getCurrentDiffDays(projectStatus.project?.current_status_until))
-                      : project[projectStatus.project?.current_status]?.description
-                  }
-                </ProjectStatusDescription>
-                <ProjectStatusWrapper>
-                  <ProjectCurrentStatus
-                    isActive={projectStatus.project?.current_status === 'active'}
-                  >
-                    {project[projectStatus.project?.current_status]?.status}
-                  </ProjectCurrentStatus>
-                  <Button
-                    color='primary'
-                    borderRadius='8px'
-                    onClick={() => window.open(`https://${ordering?.project}.tryordering.com`, '_blank')}
-                  >
-                    {t('VISIT_MY_WEBSITE', 'Visit my Website')}
-                  </Button>
-                </ProjectStatusWrapper>
-              </ProjectInfoWrapper>
-              <img src={project[projectStatus.project?.current_status]?.image} alt='' />
-            </ProjectStatusContainer>
-          )}
-        </>
-      )}
+        {!projectStatus?.loading && (
+          <>
+            {!projectStatus?.project?.current_status ? (
+              <HeaderContainer>
+                <WelcomeMsg>{t('WELCOME_TO_ORDERING', 'Welcome to Ordering')}!</WelcomeMsg>
+                <GuideMsg>{t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.')}</GuideMsg>
+              </HeaderContainer>
+            ) : (
+              <ProjectStatusContainer>
+                <ProjectInfoWrapper>
+                  <GreetingText>{t('WELCOME', 'Welcome')} {sessionState?.user?.name}!</GreetingText>
+                  <ProjectStatusDescription>
+                    {
+                      (projectStatus.project?.current_status_until && projectStatus.project?.current_status === 'past_due')
+                        ? project[projectStatus.project?.current_status]?.description.replace('_days_', getCurrentDiffDays(projectStatus.project?.current_status_until))
+                        : project[projectStatus.project?.current_status]?.description
+                    }
+                  </ProjectStatusDescription>
+                  <ProjectStatusWrapper>
+                    <ProjectCurrentStatus
+                      isActive={projectStatus.project?.current_status === 'active'}
+                    >
+                      {project[projectStatus.project?.current_status]?.status}
+                    </ProjectCurrentStatus>
+                    <Button
+                      color='primary'
+                      borderRadius='8px'
+                      onClick={() => window.open(`https://${ordering?.project}.tryordering.com`, '_blank')}
+                    >
+                      {t('VISIT_MY_WEBSITE', 'Visit my Website')}
+                    </Button>
+                  </ProjectStatusWrapper>
+                </ProjectInfoWrapper>
+                <img src={project[projectStatus.project?.current_status]?.image} alt='' />
+              </ProjectStatusContainer>
+            )}
+          </>
+        )}
 
-      <ParagraphHeaders>
-        <p>{t('REPORTS', 'Reports')}</p>
-        <Button
-          color='lightPrimary'
-          onClick={() => handleGoToPage({ page: 'business_analytics' })}
-        >
-          {t('SEE_MORE_REPORTS', 'See more reports')}
-        </Button>
-      </ParagraphHeaders>
-      <Reports>
-        <SalesGraphContainer>
-          <ChartHeaderContainer>
-            <p>{t('THIS_MONTH_SALES', 'This month sales')}</p>
-            {
-              monthSalesList?.loading ? <Skeleton width={70} height={30} /> : <h3>{getTotalSales()}</h3>
-            }
-          </ChartHeaderContainer>
-          {
-            monthSalesList?.loading ? <Skeleton height={150} /> : <Line data={defaultData} options={options} height={width > 1400 ? '106px' : ''} />
-          }
-        </SalesGraphContainer>
-        <OrdersAndSalesWrapper>
-          <OrdersOrSalesContainer>
-            <DetailsContent>
-              <p>{t('TODAY_ORDERS', 'Today Orders')}</p>
-              {
-                ordersList?.loading ? <Skeleton width={70} height={30} /> : <h2>{ordersList?.orders}</h2>
-              }
-            </DetailsContent>
-            <BoxIconContainer>
-              <OrdersIcon />
-            </BoxIconContainer>
-          </OrdersOrSalesContainer>
-          <OrdersOrSalesContainer>
-            <DetailsContent>
-              <p>{t('TODAY_SALES', 'Today Sales')}</p>
+        {width < 997 && (
+          <OrderingButtonBlock>
+            <h2>
+              {t('WHAT_DO_YOU_WANT', 'What do you want to')}
+              <span>{` ${t('SEE_IN_ORDERING', 'see in ordering')}`}?</span>
+            </h2>
+            <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+          </OrderingButtonBlock>
+        )}
+
+        <ParagraphHeaders>
+          <p>{t('REPORTS', 'Reports')}</p>
+          <Button
+            color='lightPrimary'
+            onClick={() => handleGoToPage({ page: 'business_analytics' })}
+          >
+            {t('SEE_MORE_REPORTS', 'See more reports')}
+          </Button>
+        </ParagraphHeaders>
+        <Reports>
+          <SalesGraphContainer>
+            <ChartHeaderContainer>
+              <p>{t('THIS_MONTH_SALES', 'This month sales')}</p>
               {
-                todaySalelsList?.loading ? <Skeleton width={70} height={30} /> : <h2>{parsePrice(todaySalelsList?.sales, { separator: '.' })}</h2>
+                monthSalesList?.loading ? <Skeleton width={70} height={30} /> : <h3>{getTotalSales()}</h3>
               }
-            </DetailsContent>
-            <BoxIconContainer isSales>
-              <SalesIcon />
-            </BoxIconContainer>
-          </OrdersOrSalesContainer>
-        </OrdersAndSalesWrapper>
-      </Reports>
-      {sessionState?.user?.level !== 2 && (
-        <>
-          <ParagraphHeaders>
-            <p>{t('SUPPORT', 'Support')}</p>
-          </ParagraphHeaders>
-          <AssistanceWidgets>
-            <AssistanceTitle>
-              <h1>{t('SUPPORT_TITLE_START', 'Which kind of')}{' '}
-                <span>{t('SUPPORT_TITLE_END', 'assistance do you need?')}</span>
-              </h1>
-              <p>{t('ASSIST_SUB_TITILE', 'Choose the asistance you are looking for in the buttons below.')}</p>
-            </AssistanceTitle>
-            <AssistanceBody>
-              <WidgeBlock>
-                <h3>{t('CONTACT_SALES_TEAM', 'Contact our Sales Team')}</h3>
-                <p>{t('CONTACT_SALES_SUB_TITLE', 'Ask about pricing, custom work, budget and more money talk')}</p>
-                <Button outline color='primary' onClick={() => goToLink('sales')}>{t('SALES_CONTACT', 'Sales Contact')}</Button>
-              </WidgeBlock>
-              <WidgeBlock>
-                <h3>{t('CONTACT_SUPPORT_TEAM', 'Contact our Support Team')}</h3>
-                <p>{t('CONTACT_SUPPORT_SUB_TITLE', 'Ask about your ordering installation, products and features')}</p>
-                <Button outline color='primary' onClick={() => goToLink('tech')}>{t('TECH_SUPPORT', 'Tech Support')}</Button>
-              </WidgeBlock>
-            </AssistanceBody>
-          </AssistanceWidgets>
-        </>
-      )}
-      {sessionState?.user?.level === 0 && (
-        <FeedbackWidgets>
-          <ParagraphHeaders>
-            <p>{t('FEEDBACK', 'Feedback')}</p>
-          </ParagraphHeaders>
-          <FeedbackContainer>
-            <h2>{t('SHARE_WITH_US_YOUR_IDEAS', 'Share with us your ideas')}</h2>
-            <p className='center'>{t('FEEDBACK_DESCRIPTION', 'Do you think our functionalities can be improved or do you want to see a new feature?')}</p>
-            <p>{t('SHARE_US_YOUR_COMMENTS', 'Share us your comments')}</p>
-            <ButtonWrapper>
-              <Button outline color='primary' onClick={() => goToLink('canny')}>{t('REQUESTS', 'Requests')}</Button>
-            </ButtonWrapper>
-          </FeedbackContainer>
-        </FeedbackWidgets>
-      )}
-    </HomeContainer>
+            </ChartHeaderContainer>
+            {
+              monthSalesList?.loading ? <Skeleton height={150} /> : <Line data={defaultData} options={options} height={width > 1400 ? '106px' : ''} />
+            }
+          </SalesGraphContainer>
+          <OrdersAndSalesWrapper>
+            <OrdersOrSalesContainer>
+              <DetailsContent>
+                <p>{t('TODAY_ORDERS', 'Today Orders')}</p>
+                {
+                  ordersList?.loading ? <Skeleton width={70} height={30} /> : <h2>{ordersList?.orders}</h2>
+                }
+              </DetailsContent>
+              <BoxIconContainer>
+                <OrdersIcon />
+              </BoxIconContainer>
+            </OrdersOrSalesContainer>
+            <OrdersOrSalesContainer>
+              <DetailsContent>
+                <p>{t('TODAY_SALES', 'Today Sales')}</p>
+                {
+                  todaySalelsList?.loading ? <Skeleton width={70} height={30} /> : <h2>{parsePrice(todaySalelsList?.sales, { separator: '.' })}</h2>
+                }
+              </DetailsContent>
+              <BoxIconContainer isSales>
+                <SalesIcon />
+              </BoxIconContainer>
+            </OrdersOrSalesContainer>
+          </OrdersAndSalesWrapper>
+        </Reports>
+        {sessionState?.user?.level !== 2 && (
+          <>
+            <ParagraphHeaders>
+              <p>{t('SUPPORT', 'Support')}</p>
+            </ParagraphHeaders>
+            <AssistanceWidgets>
+              <AssistanceTitle>
+                <h1>{t('SUPPORT_TITLE_START', 'Which kind of')}{' '}
+                  <span>{t('SUPPORT_TITLE_END', 'assistance do you need?')}</span>
+                </h1>
+                <p>{t('ASSIST_SUB_TITILE', 'Choose the asistance you are looking for in the buttons below.')}</p>
+              </AssistanceTitle>
+              <AssistanceBody>
+                <WidgeBlock>
+                  <h3>{t('CONTACT_SALES_TEAM', 'Contact our Sales Team')}</h3>
+                  <p>{t('CONTACT_SALES_SUB_TITLE', 'Ask about pricing, custom work, budget and more money talk')}</p>
+                  <Button outline color='primary' onClick={() => goToLink('sales')}>{t('SALES_CONTACT', 'Sales Contact')}</Button>
+                </WidgeBlock>
+                <WidgeBlock>
+                  <h3>{t('CONTACT_SUPPORT_TEAM', 'Contact our Support Team')}</h3>
+                  <p>{t('CONTACT_SUPPORT_SUB_TITLE', 'Ask about your ordering installation, products and features')}</p>
+                  <Button outline color='primary' onClick={() => goToLink('tech')}>{t('TECH_SUPPORT', 'Tech Support')}</Button>
+                </WidgeBlock>
+              </AssistanceBody>
+            </AssistanceWidgets>
+          </>
+        )}
+        {sessionState?.user?.level === 0 && (
+          <FeedbackWidgets>
+            <ParagraphHeaders>
+              <p>{t('FEEDBACK', 'Feedback')}</p>
+            </ParagraphHeaders>
+            <FeedbackContainer>
+              <h2>{t('SHARE_WITH_US_YOUR_IDEAS', 'Share with us your ideas')}</h2>
+              <p className='center'>{t('FEEDBACK_DESCRIPTION', 'Do you think our functionalities can be improved or do you want to see a new feature?')}</p>
+              <p>{t('SHARE_US_YOUR_COMMENTS', 'Share us your comments')}</p>
+              <ButtonWrapper>
+                <Button outline color='primary' onClick={() => goToLink('canny')}>{t('REQUESTS', 'Requests')}</Button>
+              </ButtonWrapper>
+            </FeedbackContainer>
+          </FeedbackWidgets>
+        )}
+      </HomeContainer>
+      <Modal
+        width='769px'
+        padding='30px'
+        title={t('ORDERING', 'Ordering')}
+        open={showForm}
+        onClose={() => {
+          setIsSubmitted(false)
+          setShowForm(false)
+        }}
+      >
+        <HubspotFormWrapper>
+          <HubspotForm
+            region='na1'
+            portalId='6130635'
+            formId='a307934c-a5da-4b85-845e-f6d616351814'
+            onFormSubmitted={() => setIsSubmitted(true)}
+            onReady={(form) => console.log('Form ready!')}
+            loading={<FormLoading />}
+          />
+          {isSubmitted && (
+            <CloseButtonWrapper>
+              <Button
+                color='primary'
+                onClick={() => {
+                  setIsSubmitted(false)
+                  setShowForm(false)
+                }}
+              >
+                {t('CLOSE', 'Close')}
+              </Button>
+            </CloseButtonWrapper>
+          )}
+        </HubspotFormWrapper>
+      </Modal>
+    </>
   )
 }
 

package/src/components/Home/HomePage/styles.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components'
 import { lighten } from 'polished'
 
 export const HomeContainer = styled.div`
+  position: relative;
   flex: 1;
   padding: 20px;
   box-sizing: border-box;
@@ -32,7 +33,7 @@ export const Breadcrumb = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
-  margin: 10px 0 30px 0;
+  margin: 10px 0 50px 0;
   h1 {
     font-weight: bold;
     font-size: 20px;
@@ -483,3 +484,106 @@ export const ProjectStatusWrapper = styled.div`
     `}
   }
 `
+
+export const OrderingButtonWrapper = styled.div`
+  position: absolute;
+  width: calc(100% - 125px);
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${props => props.theme.colors.lightPrimary};
+  padding: 14px 24px;
+  border: 2px solid ${props => props.theme.colors.primary};
+  border-radius: 8px;
+  margin-left: 30px;
+  ${props => props.theme.rtl && css`
+    left: 0;
+    right: initial;
+  `}
+
+  span {
+    color: ${props => props.theme.colors.primary};
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  button {
+    height: 44px;
+    width: 180px;
+    margin: 0;
+    border-radius: 8px;
+  }
+
+  @media (min-width: 800px) {
+    button {
+      margin-right: 76px;
+      ${props => props.theme.rtl && css`
+        margin-right: 0;
+        margin-left: 76px;
+      `}
+    }
+  }
+
+  @media (min-width: 1200px) {
+    width: calc(100% - 130px);
+    button {
+      width: 216px;
+    }
+  }
+
+  @media (min-width: 1440px) {
+    button {
+      margin-right: 156px;
+      ${props => props.theme.rtl && css`
+        margin-right: 0;
+        margin-left: 156px;
+      `}
+    }
+  }
+`
+
+export const OrderingButtonBlock = styled.div`
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  padding: 42px 20px;
+  margin-bottom: 42px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  h2 {
+    font-weight: 700;
+    font-size: 24px;
+    margin: 0;
+    text-align: center;
+    span {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+  button {
+    margin-top: 22px;
+    width: 214px;
+    height: 44px;
+    border-radius: 8px;
+  }
+`
+
+export const CloseButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+
+  button {
+    height: 44px;
+    border-radius: 8px;
+    width: 100%;
+  }
+`
+
+export const HubspotFormWrapper = styled.div`
+  min-height: 445px;
+  position: relative;
+`

package/src/components/Login/LoginForm/index.js

@@ -235,13 +235,6 @@ const LoginFormUI = (props) => {
     }
   }, [configs])
 
-  useEffect(() => {
-    setConfigFile({
-      ...configFile,
-      project: window.localStorage.getItem('project') || null
-    })
-  }, [])
-
   return (
     <LoginContainer isPopup={isPopup}>
       <LoginHeroContainer bgimage={configs?.dashboard_login_background?.value || theme.images?.general?.loginHero}>

package/src/components/MyProducts/AdvancedLayouts/LayoutStyleGroup.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import {
+  FormControl,
+  FontWeightListWrapper,
+  FontWeightItem
+} from '../AdvancedSettings/styles'
+
+export const LayoutStyleGroup = (props) => {
+  const { layoutList, layouts, path, handleUpdateThemeValue } = props
+
+  const [layoutType, setLayoutType] = useState([])
+
+  const handleChangeWeights = (value) => {
+    handleUpdateThemeValue(value, [path, 'type'].join('.'))
+    setLayoutType(value)
+  }
+
+  useEffect(() => {
+    setLayoutType(layouts?.type)
+  }, [JSON.stringify(layouts)])
+
+  return (
+    <>
+      <FormControl>
+        <FontWeightListWrapper>
+          {layoutList.map(_layoutType => (
+            <FontWeightItem key={_layoutType.value} onClick={() => handleChangeWeights(_layoutType?.value)}>
+              {layoutType === _layoutType.value ? <RecordCircleFill className='active' /> : <Circle />}
+              <span>{_layoutType.name}</span>
+            </FontWeightItem>
+          ))}
+        </FontWeightListWrapper>
+      </FormControl>
+    </>
+  )
+}