ordering-ui-admin-external 1.25.1 → 1.26.1

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

@@ -0,0 +1,240 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button } from '../../../styles'
+import { Alert } from '../../Shared'
+import { LayoutStyleGroup } from './LayoutStyleGroup'
+
+import {
+  Container,
+  BoxLayout,
+  HomePageWrapper,
+  HeadingWrapper,
+  ButtonWrapper
+} from './styles'
+
+export const AdvancedLayouts = (props) => {
+  const {
+    advancedValues,
+    handleUpdateSiteTheme,
+    isApp,
+    themesList
+  } = props
+
+  const [, t] = useLanguage()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [themeStructure, setThemeStructure] = useState({}) // Don't remove this state
+  const themeValuesRef = useRef({})
+
+  const homeLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'starbucks', name: 'Elegant' },
+    { value: 'red', name: 'Simple' }
+  ]
+
+  const businessListingLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'appointments', name: 'Appointments' },
+    { value: 'mapview', name: 'MapsView' }
+  ]
+
+  const businessViewLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'starbucks', name: 'Elegant' },
+    { value: 'red', name: 'Simple' },
+    { value: 'old', name: '2021' }
+  ]
+
+  const productFormLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'starbucks', name: 'Elegant' }
+  ]
+
+  const productSearchLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'starbucks', name: 'Elegant' },
+    { value: 'old', name: '2021' }
+  ]
+
+  const confirmationLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'old', name: '2021' }
+  ]
+
+  const profileLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'old', name: '2021' }
+  ]
+
+  const headerLayoutList = [
+    { value: 'original', name: 'Original' },
+    { value: 'starbucks', name: 'Elegant' },
+    { value: 'old', name: '2021' }
+  ]
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const updateObject = (object, newValue, path) => {
+    const stack = path.split('.')
+    while (stack.length > 1) {
+      object = object[stack.shift()]
+    }
+    object[stack.shift()] = newValue
+  }
+
+  const handleUpdateThemeValue = (value, path) => {
+    const _advancedValues = JSON.parse(JSON.stringify(themeValuesRef.current))
+    updateObject(_advancedValues, value, path)
+    themeValuesRef.current = _advancedValues
+  }
+
+  useEffect(() => {
+    themeValuesRef.current = JSON.parse(JSON.stringify(advancedValues))
+  }, [advancedValues])
+
+  useEffect(() => { // Don't remove this effect
+    if (!themesList?.loading && themesList?.themes?.[0]?.structure) {
+      setThemeStructure(JSON.parse(JSON.stringify(themesList?.themes?.[0]?.structure)))
+    }
+  }, [themesList])
+
+  return (
+    <>
+      <Container>
+        {isApp ? (
+          <BoxLayout>
+            <h1>{t('CUSTOMER_APP_ADVANCED_LAYOUTS', 'Customer App  Advanced Layouts')}</h1>
+            <h2>{t('HOMEPAGE', 'Homepage')}</h2>
+            <HeadingWrapper>
+              <LayoutStyleGroup
+                title={t('HOMEPAGE', 'Homepage')}
+                layoutList={homeLayoutList}
+                layouts={themeValuesRef?.current?.homepage_view?.components?.layout}
+                path='homepage_view.components.layout'
+                handleUpdateThemeValue={handleUpdateThemeValue}
+              />
+            </HeadingWrapper>
+          </BoxLayout>
+        ) : (
+          <BoxLayout>
+            <h1>{t('WEBSITE_ADVANCED_LAYOUTS', 'Website Advanced Layouts')}</h1>
+            <HomePageWrapper>
+              <h2>{t('HOMEPAGE', 'Homepage')}</h2>
+              <HeadingWrapper>
+                <LayoutStyleGroup
+                  title={t('HOMEPAGE', 'Homepage')}
+                  layoutList={homeLayoutList}
+                  layouts={themeValuesRef?.current?.homepage_view?.components?.layout}
+                  path='homepage_view.components.layout'
+                  handleUpdateThemeValue={handleUpdateThemeValue}
+                />
+              </HeadingWrapper>
+            </HomePageWrapper>
+          </BoxLayout>
+        )}
+        <BoxLayout>
+          <h2>{t('BUSINESS_LISTING_VIEW', 'Business Listing view')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={businessListingLayoutList}
+              layouts={themeValuesRef?.current?.business_listing_view?.components?.layout}
+              path='business_listing_view.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        <BoxLayout>
+          <h2>{t('BUSINESS_VIEW_HEADERS', 'Business View Headers')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={businessViewLayoutList}
+              layouts={themeValuesRef?.current?.business_view?.components?.header?.components?.layout}
+              path='business_view.components.header.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        <BoxLayout>
+          <h2>{t('PRODUCT_LAYOUTS', 'Product Layouts')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={productFormLayoutList}
+              layouts={themeValuesRef?.current?.business_view?.components?.products?.components?.layout}
+              path='business_view.components.products.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        <BoxLayout>
+          <h2>{t('PRODUCTS_SEARCH', 'Products Search')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={productSearchLayoutList}
+              layouts={themeValuesRef?.current?.business_view?.components?.product_search?.components?.layout}
+              path='business_view.components.product_search.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        <BoxLayout>
+          <h2>{t('CONFIRMATION', 'Confirmation')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={confirmationLayoutList}
+              layouts={themeValuesRef?.current?.confirmation?.components?.layout}
+              path='confirmation.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        <BoxLayout>
+          <h2>{t('PROFILE', 'Profile')}</h2>
+          <HeadingWrapper>
+            <LayoutStyleGroup
+              layoutList={profileLayoutList}
+              layouts={themeValuesRef?.current?.profile?.components?.layout}
+              path='profile.components.layout'
+              handleUpdateThemeValue={handleUpdateThemeValue}
+            />
+          </HeadingWrapper>
+        </BoxLayout>
+        {!isApp && (
+          <BoxLayout>
+            <h2>{t('HEADER', 'Header')}</h2>
+            <HeadingWrapper>
+              <LayoutStyleGroup
+                layoutList={headerLayoutList}
+                layouts={themeValuesRef?.current?.header?.components?.layout}
+                path='header.components.layout'
+                handleUpdateThemeValue={handleUpdateThemeValue}
+              />
+            </HeadingWrapper>
+          </BoxLayout>
+        )}
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleUpdateSiteTheme(themeValuesRef?.current)}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </ButtonWrapper>
+      </Container>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,388 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div``
+
+export const BoxLayout = styled.div`
+  margin-top: 30px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  padding: 25px 30px;
+  > div {
+    max-width: 653px;
+  }
+  h1, h2 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+  > h1 {
+    margin-bottom: 30px;
+  }
+  h3 {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    margin-top: 0px;
+    margin-bottom: 20px;
+  }
+`
+
+export const HomePageWrapper = styled.div``
+
+export const FormControlWithCheck = styled.div`
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 17px;
+  }
+`
+
+export const HideCheckWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: fit-content;
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    user-select: none;
+  }
+  ${({ isBottom }) => isBottom && css`
+    margin-bottom: 25px;
+  `}
+`
+
+export const ShadowWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
+`
+
+export const InnerShadowWrapper = styled.div``
+
+export const DropShadowWrapper = styled.div`
+  margin-top: 15px;
+  /* @media (min-width: 576px) {
+    margin-top: 0;
+    margin-left: 35px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0px;
+      margin-right: 35px;
+    `}
+  } */
+`
+
+export const ShadowInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    margin-right: 7px;
+    ${props => props.theme.rtl && css`
+      margin-left: 7px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+  }
+`
+
+export const InnerShadow = styled.div`
+  width: 27px;
+  height: 18px;
+  background: ${props => props.theme.colors.gray};
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 1px;
+  margin-right: 13px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 13px;
+  `}
+`
+
+export const DropShadow = styled.div`
+  width: 27px;
+  height: 18px;
+  border: 1px solid ${props => props.theme.colors.borderColor};
+  border-radius: 1px;
+  margin-right: 13px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 13px;
+  `}
+`
+
+export const ShadowInputGroup = styled.div`
+  display: flex;
+  margin-top: 13px;
+`
+
+export const ShadowInputControl = styled.div`
+  display: flex;
+  margin-right: 15px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 15px;
+  `}
+  span {
+    font-weight: 400;
+    font-size: 12px;
+    margin-right: 5px;
+    ${props => props.theme.rtl && css`
+      margin-right: 0px;
+      margin-left: 5px;
+    `}
+  }
+  input {
+    border: none;
+    outline: none;
+    border-bottom: 1px solid ${props => props.theme.colors.gray};
+    width: 29px;
+    font-size: 12px;
+    text-align: center;
+  }
+`
+
+export const HeadingWrapper = styled.div`
+  margin-bottom: 40px;
+`
+
+export const BodyWrapper = styled.div``
+
+export const FormControl = styled.div`
+  margin-bottom: 25px;
+  > label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+  input {
+    width: 100%;
+    height: 44px;
+  }
+`
+
+export const SelectWrapper = styled.div`
+  > div {
+    width: 100%;
+    border: none;
+
+    > div:first-child {
+      background-color: ${props => props.theme.colors.secundary};
+      height: 43px;
+      border: none;
+      border-radius: 7.6px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      color: ${props => props.theme.colors.secundaryContrast};
+    }
+    .list {
+      background-color: ${props => props.theme.colors.secundary};
+      border: none;
+
+      .list-wrapper {
+        > div {
+          padding: 6px 10px;
+          &:hover {
+            background-color: #f2f5f7;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const Option = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+`
+
+export const FontWeightListWrapper = styled.div`
+  &:last-child {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  }
+`
+
+export const FontWeightItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid ${props => props.theme.colors.borderColor};
+  cursor: pointer;
+
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    margin-right: 20px;
+    ${props => props.theme.rtl && css`
+      margin-left: 20px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+`
+
+export const ImageBoxContainer = styled.div`
+  width: 161px;
+  height: 161px;
+  ${({ isBig }) => isBig && css`
+    width: 100%;
+    height: 190px;
+  `}
+  background: ${props => props.theme.colors.borderColor};
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: contain;
+  }
+`
+
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: ${props => props.theme.colors.secundaryDarkContrast};
+  ${({ bgimage }) => bgimage && css`
+    background: transparent;
+    svg, span {
+      color: ${props => props.theme.colors.white};
+    }
+    border: 1px dashed ${props => props.theme.colors.secundaryDarkContrast};
+  `}
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: ${props => props.theme.colors.disabled};
+  span {
+    margin-top: 14px;
+    font-size: 14px;
+  }
+
+  svg {   
+    width: 52px;
+    height: 45px;
+  }
+`
+
+export const ImgInfoWrapper = styled.div`
+  margin-top: 15px;
+  margin-bottom: 25px;
+  h4 {
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
+    margin: 0px;
+  }
+  p {
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: 2px;
+    margin-bottom: 0px;
+    color: ${props => props.theme.colors.secundaryContrast};
+  }
+`
+
+export const HomeImageFullScreenWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+  cursor: pointer;
+  width: fit-content;
+  svg {
+    font-size: 16px;
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    margin-right: 20px;
+    ${props => props.theme.rtl && css`
+      margin-left: 20px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+`
+
+export const ImageGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 576px) {
+    flex-direction: row;
+    > div:first-child {
+      margin-right: 30px;
+    }
+  }
+`
+
+export const SocialShareContainer = styled.div``
+
+export const ButtonWrapper = styled.div`
+  margin: 50px 0px 30px 0;
+  button {
+    height: 44px;
+  }
+`

package/src/components/MyProducts/AdvancedSettings/index.js

@@ -80,7 +80,8 @@ export const AdvancedSettings = (props) => {
     { name: t('DUMMY_IMAGE_WHEN_NO_IMAGE', 'Dummy image when no image'), type: 'hidden', path: 'business_view.components.products.components.product.components.dummy.hidden' },
     { name: t('DESCRIPTION', 'Description'), type: 'hidden', path: 'business_view.components.products.components.product.components.description.hidden' },
     { name: t('IMAGE', 'Image'), type: 'hidden', path: 'business_view.components.products.components.product.components.image.hidden' },
-    { name: t('POSITION', 'Position'), type: 'position', path: 'business_view.components.products.components.product.components.image.position' }
+    { name: t('POSITION', 'Position'), type: 'position', path: 'business_view.components.products.components.product.components.image.position' },
+    { name: t('ADD_TO_CART_BUTTON', 'Add to cart button'), type: 'hidden', path: 'business_view.components.products.components.add_to_cart_button.hidden' }
   ]
 
   const reviewsPopups = [
@@ -91,7 +92,9 @@ export const AdvancedSettings = (props) => {
     { name: t('BUSINESS_LOGO', 'Business logo'), type: 'hidden', path: 'header.components.cart.components.business.components.logo.hidden' },
     { name: t('PRODUCT_IMAGE', 'Product image'), type: 'hidden', path: 'header.components.cart.components.products.components.image.hidden' },
     { name: t('DISCOUNT_COUPON', 'Discount coupon'), type: 'hidden', path: 'header.components.cart.components.discount_coupon.hidden' },
-    { name: t('COMMENTS', 'Comments'), type: 'hidden', path: 'header.components.cart.components.comments.hidden' }
+    { name: t('COMMENTS', 'Comments'), type: 'hidden', path: 'header.components.cart.components.comments.hidden' },
+    { name: t('OPEN_STRATEGY', 'Open strategy'), type: 'position', path: 'header.components.cart.components.open_strategy.type' },
+    { name: t('OPEN_STRATEGY_POSITION', 'Open strategy position'), type: 'position', path: 'header.components.cart.components.open_strategy.position' }
   ]
 
   const checkoutList = [