ordering-ui-admin-external 1.13.3 → 1.14.0

package/src/components/Stores/BusinessSalesGoogle/index.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { IconButton, Input } from '../../../styles'
+import { XLg, Files } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import {
+  Container,
+  Header,
+  LeftHeader,
+  Step,
+  LinkText,
+  CopyInputWrapper
+} from './styles'
+
+export const BusinessSalesGoogle = (props) => {
+  const { onClose, socialItem, businessSlug } = props
+
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      onClose && onClose()
+    }
+    setIsMenuOpen(value)
+    document.getElementById('businessSocial').style.width = value
+      ? width > 1000 ? '500px' : '100%'
+      : '0'
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%'
+      } else {
+        document.getElementById('businessSocial').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  return (
+    <Container id='businessSocial'>
+      <Header>
+        <LeftHeader>
+          <img src={socialItem.icon} alt='' />
+          <h2>{socialItem.name}</h2>
+        </LeftHeader>
+        <IconButton onClick={onClose} color='black'>
+          <XLg />
+        </IconButton>
+      </Header>
+      <p>{t('BUSINESS_GOOGLE_DESC', 'Lorem ipsum dolor sit amet consectetur. Vitae odio aliquam adipiscing vitae. Nulla sed integer congue gravida lobortis tristique condimentum fusce tincidunt.')}</p>
+      <LinkText>
+        <a href='https://www.google.com/intl/es/business/sign-up' target='_blank' rel='noopener noreferrer'>https://www.google.com/intl/es/business/sign-up</a>
+      </LinkText>
+      <Step>
+        <h3>{t('STEP', 'Step')} 1</h3>
+        <p>{t('BUSINESS_GOOGLE_STEP1_DESC', 'On Google My Business, access your Locations page.')}</p>
+        <img src={theme.images.salesChannels.googleStep1} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p>{t('BUSINESS_GOOGLE_STEP2_DESC', 'Then click on info section on the sidebar inside your location.')}</p>
+        <img src={theme.images.salesChannels.googleStep2} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 3</h3>
+        <p>{t('BUSINESS_GOOGLE_STEP3_DESC', 'Scroll down and find Order ahead links and Menu link fields. Paste the link below.')}</p>
+        <CopyInputWrapper isBottom>
+          <Input
+            defaultValue='https://yourbusinessname.com/store/storename'
+            disabled
+          />
+        </CopyInputWrapper>
+        <img src={theme.images.salesChannels.googleStep3} alt='' />
+      </Step>
+    </Container>
+  )
+}

package/src/components/Stores/BusinessSalesGoogle/styles.js

@@ -0,0 +1,119 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.lightGray};
+    margin-bottom: 15px;
+    margin-top: 0;
+  }
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  }
+`
+
+export const LinkText = styled.div`
+  margin-bottom: 23px;
+  a {
+    color: ${props => props.theme.colors.primary};
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+`
+
+export const LeftHeader = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    margin-right: 18px;
+    ${props => props.theme.rtl && css`
+      margin-left: 18px;
+      margin-right: 0;
+    `}
+  }
+
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin: 0;
+  }
+`
+
+export const Step = styled.div`
+  margin-bottom: 27px;
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+  img {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    img {
+      display: block;
+      width: 90%;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 24px;
+    }
+  }
+`
+
+export const CopyInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  input {
+    flex: 1;
+    height: 44px;
+  }
+  button {
+    margin-left: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0;
+      margin-right: 15px;
+    `}
+  }
+  ${({ isBottom }) => isBottom && css`
+    margin-bottom: 24px;
+  `}
+`

package/src/components/Stores/BusinessSalesInstagram/AdvancedInstagram.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Input } from '../../../styles'
+import {
+  InstagramAdvancedContainer,
+  Step,
+  CopyInputWrapper,
+  ImageWrapper
+} from './styles'
+
+export const AdvancedInstagram = (props) => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <InstagramAdvancedContainer>
+      <p>{t('BUSINESS_INSTAGRAM_ADVANCED_DESC', 'This setting is if your Instagram account has 10K followers or you are already an Instagram partner.')}</p>
+      <Step>
+        <h3>{t('STEP', 'Step')} 1</h3>
+        <p
+          dangerouslySetInnerHTML={{ __html: t('BUSINESS_INSTAGRAM_GENERAL_STEP2_DESC', 'Open your Instagram profile and tap on <strong>Edit Profile.</strong>') }}
+        />
+        <img src={theme.images.salesChannels.instagramGeneralStep2} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p
+          dangerouslySetInnerHTML={{ __html: t('BUSINESS_INSTAGRAM_ADVANCED_STEP3_DESC', 'Click on <strong>Action buttons</strong> and then select the button you need.') }}
+        />
+        <ImageWrapper>
+          <img src={theme.images.salesChannels.instagramAdvancedStep31} alt='' />
+          <img src={theme.images.salesChannels.instagramAdvancedStep32} alt='' />
+        </ImageWrapper>
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 3</h3>
+        <p
+          dangerouslySetInnerHTML={{ __html: t('BUSINESS_INSTAGRAM_ADVANCED_STEP4_DESC', 'Now, select <strong>Your business</strong>, and paste the following link. Then, tap on <strong>Done</strong>') }}
+        />
+        <CopyInputWrapper isBottom>
+          <Input
+            defaultValue='https://yourbusinessname.com/store/storename'
+            disabled
+          />
+        </CopyInputWrapper>
+        <ImageWrapper>
+          <img src={theme.images.salesChannels.instagramAdvancedStep41} alt='' />
+          <img src={theme.images.salesChannels.instagramAdvancedStep42} alt='' />
+        </ImageWrapper>
+      </Step>
+    </InstagramAdvancedContainer>
+  )
+}

package/src/components/Stores/BusinessSalesInstagram/GeneralInstagram.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Input } from '../../../styles'
+import {
+  InstagramGeneralContainer,
+  Step,
+  CopyInputWrapper
+} from './styles'
+
+export const GeneralInstagram = ({ businessSlug }) => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <InstagramGeneralContainer>
+      <p>{t('BUSINESS_INSTAGRAM_GENERAL_DESC', 'Lorem ipsum dolor sit amet consectetur. Vitae odio aliquam adipiscing vitae. Nulla sed integer congue gravida lobortis tristique condimentum fusce tincidunt.')}</p>
+      <Step>
+        <h3>{t('STEP', 'Step')} 1</h3>
+        <p
+          dangerouslySetInnerHTML={{ __html: t('BUSINESS_INSTAGRAM_GENERAL_STEP2_DESC', 'Open your Instagram profile and tap on <strong>Edit Profile.<strong>') }}
+        />
+        <img src={theme.images.salesChannels.instagramGeneralStep2} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p>{t('BUSINESS_INSTAGRAM_GENERAL_STEP3_DESC', 'On the Edit Profile screen, click on the Links option.')}</p>
+        <img src={theme.images.salesChannels.instagramGeneralStep3} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 3</h3>
+        <p>{t('BUSINESS_INSTAGRAM_GENERAL_STEP4_DESC', 'Add your business link, or if you already have a link, you can edit it; click on that option.')}</p>
+        <img src={theme.images.salesChannels.instagramGeneralStep4} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 4</h3>
+        <p>{t('BUSINESS_INSTAGRAM_GENERAL_STEP5_DESC', 'Just add this link to the website field:')}</p>
+        <CopyInputWrapper isBottom>
+          <Input
+            defaultValue='https://yourbusinessname.com/store/storename'
+            disabled
+          />
+        </CopyInputWrapper>
+        <img src={theme.images.salesChannels.instagramGeneralStep5} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 5</h3>
+        <p>{t('BUSINESS_INSTAGRAM_GENERAL_STEP6_DESC', 'Done; it will appear this way on your Instagram account.')}</p>
+        <img src={theme.images.salesChannels.instagramGeneralStep6} alt='' />
+      </Step>
+    </InstagramGeneralContainer>
+  )
+}

package/src/components/Stores/BusinessSalesInstagram/index.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { useLanguage } from 'ordering-components-admin-external'
+import { IconButton } from '../../../styles'
+import { XLg } from 'react-bootstrap-icons'
+import { GeneralInstagram } from './GeneralInstagram'
+import { AdvancedInstagram } from './AdvancedInstagram'
+import {
+  Container,
+  Header,
+  LeftHeader,
+  Tabs,
+  Tab
+} from './styles'
+
+export const BusinessSalesInstagram = (props) => {
+  const { onClose, socialItem, businessSlug } = props
+
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [selectedTab, setSelectedTab] = useState('general')
+
+  const tabList = [
+    { key: 'general', title: t('GENERAL', 'General') },
+    { key: 'advanced', title: t('ADVANCED', 'Advanced') }
+  ]
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      onClose && onClose()
+    }
+    setIsMenuOpen(value)
+    document.getElementById('businessSocial').style.width = value
+      ? width > 1000 ? '500px' : '100%'
+      : '0'
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%'
+      } else {
+        document.getElementById('businessSocial').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  return (
+    <Container id='businessSocial'>
+      <Header>
+        <LeftHeader>
+          <img src={socialItem.icon} alt='' />
+          <h2>{socialItem.name}</h2>
+        </LeftHeader>
+        <IconButton onClick={onClose} color='black'>
+          <XLg />
+        </IconButton>
+      </Header>
+      <Tabs>
+        {tabList.map(item => (
+          <Tab
+            key={item.key}
+            onClick={() => setSelectedTab(item.key)}
+            active={selectedTab === item.key}
+          >
+            {item.title}
+          </Tab>
+        ))}
+      </Tabs>
+      {selectedTab === 'general' && <GeneralInstagram businessSlug={businessSlug} />}
+      {selectedTab === 'advanced' && <AdvancedInstagram businessSlug={businessSlug} />}
+    </Container>
+  )
+}

package/src/components/Stores/BusinessSalesInstagram/styles.js

@@ -0,0 +1,157 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid ${props => props.theme.colors.borderColor};
+    ` : css`
+      border-left: 1px solid ${props => props.theme.colors.borderColor};
+    `}
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+`
+
+export const LeftHeader = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    margin-right: 18px;
+    ${props => props.theme.rtl && css`
+      margin-left: 18px;
+      margin-right: 0;
+    `}
+  }
+
+  h2 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    margin: 0;
+  }
+`
+
+export const Tabs = styled.div`
+  display: flex;
+  margin-bottom: 24px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  padding-bottom: 13px;
+  margin-right: 30px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 21px;
+  color: ${props => props.theme.colors.lightGray};
+  cursor: pointer;
+  ${props => props.theme.rtl && css`
+    margin-left: 30px;
+    margin-right: 0;
+  `}
+
+  ${({ active }) => active && css`
+    font-weight: 600;
+    color: ${props => props.theme.colors.headingColor};
+    border-bottom: 1px solid ${props => props.theme.colors.headingColor};
+  `}
+`
+
+export const InstagramGeneralContainer = styled.div`
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.lightGray};
+    margin-bottom: 23px;
+    margin-top: 0;
+  }
+`
+
+export const Step = styled.div`
+  margin-bottom: 27px;
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+  > img {
+    width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    > img {
+      display: block;
+      width: 90%;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 24px;
+    }
+  }
+`
+
+export const CopyInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  input {
+    flex: 1;
+    height: 44px;
+  }
+  button {
+    margin-left: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 0;
+      margin-right: 15px;
+    `}
+  }
+  ${({ isBottom }) => isBottom && css`
+    margin-bottom: 24px;
+  `}
+`
+
+export const InstagramAdvancedContainer = styled(InstagramGeneralContainer)``
+
+export const ImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  img {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+    img {
+      width: 48%;
+      margin-bottom: 0px;
+    }
+  }
+`

package/src/components/Stores/BusinessSalesTiktok/index.js

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { IconButton } from '../../../styles'
+import { XLg } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import {
+  Container,
+  Header,
+  LeftHeader,
+  Step,
+  LinkText
+} from './styles'
+
+export const BusinessSalesTiktok = (props) => {
+  const { onClose, socialItem } = props
+
+  const { width } = useWindowSize()
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const actionSidebar = (value) => {
+    if (!value) {
+      onClose && onClose()
+    }
+    setIsMenuOpen(value)
+    document.getElementById('businessSocial').style.width = value
+      ? width > 1000 ? '500px' : '100%'
+      : '0'
+  }
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      if (width < 1000) {
+        document.getElementById('businessSocial').style.width = '100%'
+      } else {
+        document.getElementById('businessSocial').style.width = '500px'
+      }
+    }
+  }, [width])
+
+  useEffect(() => {
+    if (!open) return
+    actionSidebar(true)
+  }, [open])
+
+  return (
+    <Container id='businessSocial'>
+      <Header>
+        <LeftHeader>
+          <img src={socialItem.icon} alt='' />
+          <h2>{socialItem.name}</h2>
+        </LeftHeader>
+        <IconButton onClick={onClose} color='black'>
+          <XLg />
+        </IconButton>
+      </Header>
+      <p>{t('BUSINESS_TIKTOK_DESC', 'On TikTok, we must create a catalog; for this, we will click on the button: Add Catalog. A pop-up will appear that we will fill in with the information you request.')}</p>
+      <LinkText>
+        <a href='https://ads.tiktok.com/i18n/home' target='_blank' rel='noopener noreferrer'>https://ads.tiktok.com/i18n/home</a>
+      </LinkText>
+      <Step>
+        <h3>{t('STEP', 'Step')} 1</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP1_DESC', 'Please put the name of the Catalog that we are creating.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep1} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP2_DESC', 'Then click on the Business Center account. If you already have one created, select the one you need; if not, click Create.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep2} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 3</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP3_DESC', 'Write the name of your Business Center, select the Time Zone, and click the Create button.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep3} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 4</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP4_DESC', 'Then click again on the Business Center field, and the one you just created will appear, select it.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep4} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 5</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP5_DESC', 'Click on the Industry field and select the option that appears, in this case, E-commerce.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep5} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 6</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP6_DESC', 'Select the Default location and Default Currency according to your need, and click the Create button.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep6} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 7</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP7_DESC', 'TikTok will show you a brief tour of your Dashboard so you can get to know it.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep7} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 8</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP8_DESC', 'After watching the tutorial, TikTok will enable your Dashboard to start uploading the things you need, and the first thing you\'ll do is add products. Just click on the Products option in the Sidebar and click on the Add Products button.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep8} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 9</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP9_DESC', 'Select the option you like the most to upload your products; when you choose it, click Next.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep9} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 10</h3>
+        <p>{t('BUSINESS_TIKTOK_STEP10_DESC', 'Fill in the requested fields; click on the Import button when ready.')}</p>
+        <img src={theme.images.salesChannels.tiktokStep10} alt='' />
+      </Step>
+    </Container>
+  )
+}