ordering-ui-admin-external 1.14.3 → 1.15.1

package/src/components/MyProducts/AdvancedSettings/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/AppLayout/index.js

@@ -1,8 +1,9 @@
 import React from 'react'
+import { useLocation } from 'react-router-dom'
 import { useLanguage } from 'ordering-components-admin-external'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
 import { IconButton, Button } from '../../../styles'
-import { List as MenuIcon } from 'react-bootstrap-icons'
+import { List as MenuIcon, InfoCircle } from 'react-bootstrap-icons'
 import {
   Container,
   HeaderTitleContainer,
@@ -12,13 +13,16 @@ import {
   ImageWrapper,
   DownloadLink,
   ButtonWRapper,
-  DownLoadWrapper
+  DownLoadWrapper,
+  HeaderInfoWrapper,
+  InfoContent
 } from './styles'
 
 export const AppLayout = (props) => {
   const { appInfo, isDriver } = props
   const [, t] = useLanguage()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const location = useLocation()
 
   const showMessage = (message) => {
     window.Intercom && window.Intercom('showNewMessage', message)
@@ -36,6 +40,19 @@ export const AppLayout = (props) => {
           </IconButton>
         )}
         <h1>{t('MY_PRODUCTS', 'My products')}</h1>
+        {(location.pathname === '/my-products/ordering-website' || location.pathname === '/my-products/customer-app') && (
+          <HeaderInfoWrapper>
+            <IconButton
+              color='primary'
+            >
+              <InfoCircle />
+            </IconButton>
+            <InfoContent>
+              {t('MY_PRODUCTS_INFO', 'Use the advanced configurations below to customize your products changing the images, colors, available options and others with a few clicks. If you have doubts, please contact our team here:')}
+              <a href='https://www.ordering.co/support' rel='noopener noreferrer' target='_blank'>https://www.ordering.co/support</a>
+            </InfoContent>
+          </HeaderInfoWrapper>
+        )}
       </HeaderTitleContainer>
       <ContentWrapper>
         <h1>{appInfo.title}</h1>

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

@@ -148,3 +148,68 @@ export const DownLoadWrapper = styled.div`
     }
   }
 `
+
+export const HeaderInfoWrapper = styled.div`
+  position: relative;
+  ${props => props.theme?.rtl ? css`
+    margin-left: -8px;
+    margin-right: 8px;
+  ` : css`
+    margin-right: -8px;
+    margin-left: 8px;
+  `}
+
+  > button {
+    height: 25px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const InfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  border: 1px solid ${props => props.theme.colors.primary};
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  min-width: 150px;
+  transition: all 0.3s linear;
+  visibility: hidden;
+  opacity: 0;
+  right: 0px;
+  ${props => props.theme.rtl && css`
+    left: 0px;
+    right: initial;
+  `}
+
+  > a {
+    color: ${props => props.theme.colors.primary};
+    margin: 0 5px;
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 12px 15px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+
+  @media (min-width: 993px) {
+    min-width: 535px;
+  }
+`

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

@@ -15,7 +15,7 @@ export const CallCenterApp = () => {
       brand: theme.images.myProducts.myCallcenterAppBrand
     },
     live_title: t('LIVE_DEMO', 'Live Demo'),
-    live_description: t('APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product; play with it and understand how it works'),
+    live_description: t('CALL_CENTER_APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product; play with it and understand how it works'),
     web_url: 'https://callcenter.tryordering.com/search',
     web_link_title: t('CALL_CENTER', 'Call center'),
     brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),

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

@@ -15,10 +15,10 @@ export const CustomerApp = () => {
       brand: theme.images.myProducts.singleStoreCustomerApp
     },
     live_title: t('MULTI-STORE-CUSTOMER-APP', 'Multi-store Customer App'),
-    live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
+    live_description: t('MULTI_STORE_CUSTOMER_APP_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
     demo_book_message: 'I would like to book a Demo for the customer app , can you assist me?',
     brand_title: t('SINGLE_STORE_CUSTOMER_APP', 'Single Store Customer App'),
-    brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
+    brand_description: t('SINGLE_STORE_CUSTOMER_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
     purchase_message: 'I would like to know about the customer app, can you assist me?',
     downloads: [
       { id: 1, icon: theme.images.myProducts.appStoreSmall, link: 'https://apps.apple.com/us/app/customer-app-2-0/id1607414555' },

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

@@ -15,9 +15,9 @@ export const DriverApp = () => {
       brand: theme.images.myProducts.driverAppBrand
     },
     live_title: t('FREE_TO_USE', 'Free to use'),
-    live_description: t('FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
+    live_description: t('DRIVER_APP_FREE_TO_USE_DESCRIPTION', 'This is a branded Ordering.co product. use it with your project, email, and password for free. features might be limited.'),
     brand_title: t('YOUR_BRANDED_APP', 'Your Branded App'),
-    brand_description: t('BRANDED_APP_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
+    brand_description: t('DRIVER_APP_BRANDED_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, removing all ordering.co presence to give your brand more awareness.'),
     demo_book_message: 'I would like to book a Demo about the Driver app , can you assist me?',
     purchase_message: 'I would like to know about the Driver app, can you assist me?',
     downloads: [

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

@@ -15,7 +15,7 @@ export const KioskApp = () => {
       brand: theme.images.myProducts.myKioskAppBrand
     },
     live_title: t('LIVE_DEMO', 'Live Demo'),
-    live_description: t('APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product. play with it and understand how it works'),
+    live_description: t('KIOS_APP_LIVE_DEMO_DESCRIPTION', 'This is a branded Ordering.co product. play with it and understand how it works'),
     brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),
     brand_description: t('KIOSK_BRANDED_DESCRIPTION', 'This App is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet you add it to.'),
     demo_book_message: 'I would like to book a Demo about the Kiosk app, can you assist me?',