ordering-ui-admin-external 1.6.2 → 1.6.3

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

@@ -0,0 +1,145 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+  min-height: 100vh;
+`
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+export const ContentWrapper = styled.div`
+  padding: 20px 0;
+
+  > h1 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0;
+  }
+  > p {
+    font-size: 14px;
+    margin: 8px 0;
+  }
+  @media (min-width: 1024px) {
+    > h1 {
+      font-size: 32px;
+      line-height: 48px;
+    }
+    > p {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`
+export const BoxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`
+export const AppInfoContainer = styled.div`
+  margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 45px 25px;
+
+  h2 {
+    font-size: 24px;
+    margin-top: 0;
+    margin-bottom: 32px;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+  }
+  @media (min-width: 1024px) {
+    width: calc(50% - 23px);
+    h2 {
+      font-size: 32px;
+      line-height: 48px;
+    }
+    p {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+`
+export const ImageWrapper = styled.div`
+  flex: 1;
+  margin-bottom: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 100%;
+    max-width: 430px;
+  }
+`
+export const AppStoreLinksWrapper = styled.div`
+  margin-top: 33px;
+  display: flex;
+  > a {
+    &:not(:first-child) {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 24px;
+      ` : css`
+        margin-left: 24px;
+      `}
+    }
+  }
+`
+export const DownloadLink = styled.a`
+  flex: 1;
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
+
+  ${({ isSingle }) => isSingle ? css`
+    margin: 0 auto;
+    text-decoration: underline;
+  ` : css`
+    max-width: 200px;
+  `}
+`
+export const ButtonWRapper = styled.div`
+  margin-top: 31px;
+  button {
+    height: 44px;
+    min-width: 250px;
+  }
+`

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { AppLayout } from '../AppLayout'
+
+export const CallCenterApp = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const appInfo = {
+    title: t('ORDERING_CALL_CENTER_APP', 'Ordering Call Center App'),
+    description: t('CALL_CENTER_DESCRIPTION', 'Give this tool to your team of agents, capture orders in just a few seconds, and keep offering the best customer experience possible.'),
+    images: {
+      live: theme.images.myProducts.myCallcenterAppLive,
+      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'),
+    web_url: 'https://callcenter.tryordering.com/search',
+    web_link_title: t('CALL_CENTER', 'Call center'),
+    brand_title: t('YOUR_BRANDED_KIOSK', 'Your Branded Kiosk'),
+    brand_description: t('CALL_CENTER_BRANDED_DESCRIPTION', 'The Call Center is delivered in less than five working days, fully branded with your guidelines, and ready to be used on any tablet or device you add it to.'),
+    purchase_link: 'https://www.ordering.co/ordering-sales'
+  }
+
+  return (
+    <AppLayout appInfo={appInfo} />
+  )
+}

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

@@ -0,0 +1,230 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, ContentForm as ContentFormController } from 'ordering-components-admin-external'
+import { Button } from '../../../styles'
+
+import $ from 'jquery'
+import ReactSummernote from 'react-summernote'
+import 'react-summernote/dist/react-summernote.css'
+import 'bootstrap/js/dist/modal'
+import 'bootstrap/js/dist/dropdown'
+import 'bootstrap/js/dist/tooltip'
+import 'bootstrap/dist/css/bootstrap.css'
+
+import { Alert, Modal } from '../../Shared'
+import { InsertLink } from '../../Settings/InsertLink'
+import { InsertVideo } from '../../Settings/InsertVideo'
+import { InsertImage } from '../../Settings/InsertImage'
+
+import {
+  PageContainer,
+  Header,
+  WrapperEditor,
+  ButtonGroupWrapper
+} from './styles'
+
+const ContentFormUI = (props) => {
+  const {
+    formState,
+    imageListState,
+    insertImageState,
+    handleInsertImage,
+    handleDeleteImage,
+    handleChangeFormState,
+    handleSave,
+    selectedImageUrl,
+    setSelectedImageUrl,
+    handleDelete,
+    title,
+    content
+  } = props
+
+  const [, t] = useLanguage()
+  const [openModal, setOpenModal] = useState(null)
+  const [editorContext, setEditorContext] = useState(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [pageContent, setPageContent] = useState(null)
+
+  const insertLink = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-link"/>',
+      tooltip: 'link',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('link')
+      }
+    })
+    return button.render()
+  }
+
+  const handleRestoreEditor = () => editorContext.invoke('restoreRange')
+
+  const insertImage = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-picture"/>',
+      tooltip: 'picture',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('image')
+      }
+    })
+    return button.render()
+  }
+
+  const insertVideo = (context) => {
+    const ui = $.summernote.ui
+    const button = ui.button({
+      contents: '<i class="note-icon-video"/>',
+      tooltip: 'video',
+      class: 'note-btn',
+      click: () => {
+        setEditorContext(context)
+        context.invoke('editor.saveRange')
+        setOpenModal('video')
+      }
+    })
+    return button.render()
+  }
+
+  const handleCloseModal = () => {
+    setOpenModal(false)
+    setEditorContext(null)
+  }
+
+  useEffect(() => {
+    if (!formState?.error) return
+    setAlertState({
+      open: true,
+      content: formState?.error
+    })
+  }, [formState?.error])
+
+  useEffect(() => {
+    if (!pageContent) return
+    handleChangeFormState('body', pageContent)
+  }, [pageContent])
+
+  const onInit = (note) => {
+    note.reset()
+    const regex = /(\<\w*)((\s\/\>)|(.*\<\/\w*\>))/i
+    if (content.match(regex) !== null) {
+      note.replace(content)
+    } else {
+      note.insertText(content)
+    }
+  }
+
+  return (
+    <>
+      <PageContainer>
+        <Header>
+          <h1>{title}</h1>
+        </Header>
+        <WrapperEditor>
+          <ReactSummernote
+            onInit={onInit}
+            placeholder={t('START_NEW_PAGE')}
+            options={{
+              height: 350,
+              fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
+              toolbar: [
+                ['style', ['style']],
+                ['font', ['bold', 'italic', 'underline', 'clear']],
+                ['fontsize', ['fontsize']],
+                ['color', ['color']],
+                ['para', ['ul', 'paragraph']],
+                ['table', ['table']],
+                ['insert', ['insertLink', 'insertImage', 'insertVideo']],
+                ['codeview', ['codeview']]
+              ],
+              buttons: {
+                insertLink: insertLink,
+                insertImage: insertImage,
+                insertVideo: insertVideo
+              }
+            }}
+            onChange={content => setPageContent(content)}
+          />
+        </WrapperEditor>
+        <ButtonGroupWrapper>
+          <Button
+            borderRadius='8px'
+            color='primary'
+            disabled={Object.keys(formState.changes).length === 0}
+            onClick={() => handleSave()}
+          >
+            {t('ACCEPT', 'Accept')}
+          </Button>
+          <Button
+            borderRadius='8px'
+            color='secundaryDark'
+            onClick={() => handleDelete()}
+          >
+            {t('DELETE', 'Delete')}
+          </Button>
+        </ButtonGroupWrapper>
+      </PageContainer>
+      <Modal
+        width='60%'
+        open={openModal === 'link'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertLink
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+        />
+      </Modal>
+      <Modal
+        width='60%'
+        open={openModal === 'video'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertVideo
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+        />
+      </Modal>
+      <Modal
+        width='60%'
+        open={openModal === 'image'}
+        onClose={() => setOpenModal(null)}
+      >
+        <InsertImage
+          imageListState={imageListState}
+          editorContext={editorContext}
+          handleRestoreEditor={handleRestoreEditor}
+          onClose={() => handleCloseModal()}
+          insertImageState={insertImageState}
+          handleInsertImage={handleInsertImage}
+          handleDeleteImage={handleDeleteImage}
+          selectedImageUrl={selectedImageUrl}
+          setSelectedImageUrl={setSelectedImageUrl}
+        />
+      </Modal>
+      <Alert
+        title={t('BUSINESS', 'Business')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}
+
+export const ContentForm = (props) => {
+  const contentFormProps = {
+    ...props,
+    UIComponent: ContentFormUI
+  }
+  return <ContentFormController {...contentFormProps} />
+}

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

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components'
+
+export const PageContainer = styled.div`
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 0px;
+
+    ${props => props.theme?.rtl ? css`
+      margin-left: 20px;
+    ` : css`
+      margin-right: 20px;
+    `}
+  }
+`
+
+export const WrapperEditor = styled.div`
+  margin-top: 40px;
+
+  .note-editor {
+    border-radius: 8px;
+    border: 1px solid ${props => props.theme.colors.borderColor};
+
+    .note-toolbar {
+      border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    }
+
+    .note-btn {
+      &:hover,
+      &:focus {
+        background-color: ${props => props.theme.colors.secundaryDarkContrast};
+        box-shadow: none;
+      }
+    }
+
+    .note-dropdown-menu {
+      a {
+        color: #000;
+      }
+
+      h1 {
+        font-size: 36px;
+      }
+    }
+  }
+`
+
+export const ButtonGroupWrapper = styled.div`
+  margin-top: 25px;
+  display: flex;
+  align-items: center;
+  > button {
+    height: 44px;
+    &:last-child {
+      ${props => props.theme?.rtl ? css`
+        margin-right: 14px;
+      ` : css`
+        margin-left: 14px;
+      `}
+    }
+  }
+`

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

@@ -1,52 +1,28 @@
 import React from 'react'
 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 { useTheme } from 'styled-components'
-import {
-  Container,
-  HeaderTitleContainer,
-  ContentWrapper,
-  ButtonWrapper
-} from './styles'
-import { BoxLayout } from '../BoxLayout'
+import { AppLayout } from '../AppLayout'
 
 export const CustomerApp = () => {
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+
+  const appInfo = {
+    title: t('CUSTOMER_APP', 'Customer App'),
+    description: t('CUSTOMER_APP_DESCRIPTION', 'Give your business owners or managers a tool to manage their whole business\'s incoming orders on the go by installing this app on any mobile device they have.'),
+    images: {
+      live: theme.images.myProducts.multiStoreCustomerApp,
+      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_purchase_link: 'https://www.ordering.co/ordering-sales',
+    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.'),
+    purchase_link: 'https://www.ordering.co/ordering-sales'
+  }
 
   return (
-    <Container>
-      <HeaderTitleContainer>
-        {isCollapse && (
-          <IconButton
-            color='black'
-            onClick={() => handleMenuCollapse(false)}
-          >
-            <MenuIcon />
-          </IconButton>
-        )}
-        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
-      </HeaderTitleContainer>
-      <ContentWrapper>
-        <BoxLayout
-          title={t('CUSTOMER_APP', 'Customer app')}
-          photo={theme.images.myProducts.customerApp}
-          description={t('CUSTOMER_APP_DESC', 'Give your customers the chance to order from their mobile devices wherever they are, receive push notifications, offers, and much more.')}
-        >
-          <ButtonWrapper>
-            <Button
-              color='primary'
-              borderRadius='8px'
-              onClick={() => window.open('https://www.ordering.co/ordering-sales', '_blank')}
-            >
-              {t('REQUEST_APP_NOW', 'Request app now')}
-            </Button>
-          </ButtonWrapper>
-        </BoxLayout>
-      </ContentWrapper>
-    </Container>
+    <AppLayout appInfo={appInfo} />
   )
 }

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

@@ -1,83 +1,29 @@
 import React from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
-import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { Button, IconButton } from '../../../styles'
-import { List as MenuIcon } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
-import { BoxLayout } from '../BoxLayout'
-import {
-  Container,
-  HeaderTitleContainer,
-  ContentWrapper,
-  FreeBtnWrapper,
-  BrandedBtnWrapper
-} from './styles'
+import { AppLayout } from '../AppLayout'
 
 export const DriverApp = () => {
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
 
-  const handleOpenURL = (url) => {
-    window.open(url, '_blank')
+  const appInfo = {
+    title: t('DRIVER_APP', 'Driver App'),
+    description: t('DRIVER_APP_DESCRIPTION', 'Your fleet\'s best companion gives drivers a tool to receive orders, follow optimal routes, add delivery evidence, set orders\' timing, and control their busy times.'),
+    images: {
+      live: theme.images.myProducts.driverAppFree,
+      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.'),
+    apple_store_link: 'https://apps.apple.com/us/app/driver-app-2-0/id1606257815',
+    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.deliveryv5',
+    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.'),
+    purchase_link: 'https://www.ordering.co/ordering-sales'
   }
 
   return (
-    <Container>
-      <HeaderTitleContainer>
-        {isCollapse && (
-          <IconButton
-            color='black'
-            onClick={() => handleMenuCollapse(false)}
-          >
-            <MenuIcon />
-          </IconButton>
-        )}
-        <h1>{t('MY_PRODUCTS', 'My products')}</h1>
-      </HeaderTitleContainer>
-      <ContentWrapper>
-        <h1>{t('DRIVER_APP', 'Driver app')}</h1>
-        <p>{t('DRIVER_APP_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')}</p>
-        <BoxLayout
-          title={t('FREE_TO_USE', 'Free to use')}
-          description={t('FREE_TO_USE_DESC', 'This app can be used by your fleet with the ordering.co logo.')}
-          photo={theme.images.myProducts.driverApp}
-        >
-          <FreeBtnWrapper>
-            <Button
-              color='primary'
-              borderRadius='8px'
-              outline
-              onClick={() => handleOpenURL('https://apps.apple.com/us/app/driver-app-2-0/id1606257815')}
-            >
-              {t('DOWNLOAD_APPLE', 'Download apple')}
-            </Button>
-            <Button
-              color='primary'
-              borderRadius='8px'
-              outline
-              onClick={() => handleOpenURL('https://play.google.com/store/apps/details?id=com.ordering.deliveryv5')}
-            >
-              {t('DOWNLOAD_GOOGLE', 'Download google')}
-            </Button>
-          </FreeBtnWrapper>
-        </BoxLayout>
-        <BoxLayout
-          title={t('BRANDED_BY_YOU', 'Branded by you')}
-          description={t('BRANDED_BY_YOU_DESC', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id mi quam aenean in faucibus ac integer libero. Eu egestas sit imperdiet at sit adipiscing ullamcorper sed sit.')}
-          photo={theme.images.myProducts.driverApp}
-        >
-          <BrandedBtnWrapper>
-            <Button
-              color='primary'
-              borderRadius='8px'
-              onClick={() => handleOpenURL('https://www.ordering.co/ordering-sales')}
-            >
-              {t('REQUEST_APP_NOW', 'Request app now')}
-            </Button>
-          </BrandedBtnWrapper>
-        </BoxLayout>
-      </ContentWrapper>
-    </Container>
+    <AppLayout appInfo={appInfo} />
   )
 }

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { AppLayout } from '../AppLayout'
+
+export const KioskApp = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const appInfo = {
+    title: t('ORDERING_SELF_KIOSK', 'Ordering Self Ordering Kiosk'),
+    description: t('KIOS_DESCRIPTION', 'This tool will help your store complete that final step on each sale with innovative and intuitive software and hardware inside your locations.'),
+    images: {
+      live: theme.images.myProducts.myKioskAppLive,
+      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'),
+    apple_store_link: 'https://apps.apple.com/us/app/ordering-kiosk-2-0/id1609314960',
+    google_play_link: 'https://play.google.com/store/apps/details?id=com.ordering.orderingkioskv5&hl=en&gl=US',
+    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.'),
+    purchase_link: 'https://www.ordering.co/ordering-sales'
+  }
+
+  return (
+    <AppLayout appInfo={appInfo} />
+  )
+}