ordering-ui-admin-external 1.13.4 → 1.14.1

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

@@ -292,21 +292,23 @@ export const BusinessProductsCategoyInfo = (props) => {
           autoComplete='off'
         />
       </CategoryNameWrapper>
-      <CategoryNameWrapper>
-        <label>{t('EXTERNAL_ID', 'External Id')}</label>
-        <Input
-          placeholder={t('EXTERNAL_ID', 'External Id')}
-          name='external_id'
-          value={formState?.changes?.external_id || ''}
-          onChange={handleChangeInput}
-          autoComplete='off'
-          onKeyPress={(e) => {
-            if (!/^[0-9]$/.test(e.key)) {
-              e.preventDefault()
-            }
-          }}
-        />
-      </CategoryNameWrapper>
+      {!isAddMode && (
+        <CategoryNameWrapper>
+          <label>{t('EXTERNAL_ID', 'External Id')}</label>
+          <Input
+            placeholder={t('EXTERNAL_ID', 'External Id')}
+            name='external_id'
+            value={formState?.changes?.external_id || ''}
+            onChange={handleChangeInput}
+            autoComplete='off'
+            onKeyPress={(e) => {
+              if (!/^[0-9]$/.test(e.key)) {
+                e.preventDefault()
+              }
+            }}
+          />
+        </CategoryNameWrapper>
+      )}
       <CategoryNameWrapper>
         <label>{t('DESCRIPTION', 'Description')}</label>
         <TextArea
@@ -317,37 +319,6 @@ export const BusinessProductsCategoyInfo = (props) => {
           autoComplete='off'
         />
       </CategoryNameWrapper>
-      {!isAddMode && (
-        <CategoryNameWrapper>
-          <label>{t('SLUG', 'Slug')}</label>
-          <Input
-            name='slug'
-            placeholder={t('SLUG', 'Slug')}
-            onChange={handleChangeInput}
-            disabled={formState.loading}
-            autoComplete='off'
-            value={
-              formState?.changes?.slug || ''
-            }
-            onKeyPress={e => {
-              if (e.which === 32) { e.preventDefault() }
-            }}
-          />
-          {/* <GenerateButtonWrapper>
-            <Button
-              color='lightPrimary'
-              borderRadius='7.6px'
-              disabled={formState.loading || !formState.changes?.name}
-              onClick={() => setAutoGenerate({
-                ...autoGenerateCode,
-                isAutoGenerate: true
-              })}
-            >
-              {formState?.loading ? t('LOADING', 'Loading') : t('AUTOGENERATE', 'Auto Generate')}
-            </Button>
-          </GenerateButtonWrapper> */}
-        </CategoryNameWrapper>
-      )}
       <SwitchWrapper>
         <span>{t('RIBBON', 'Ribbon')}</span>
         <Switch
@@ -475,7 +446,7 @@ export const BusinessProductsCategoyInfo = (props) => {
         padding='30px'
         title={t('IMAGE_CROP', 'Image crop')}
         open={cropState?.open}
-        onClose={() => setCropState({ ...cropState, open: false })}
+        onRemove={() => setCropState({ ...cropState, open: false })}
       >
         <ImageCrop
           photo={cropState?.data}

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

@@ -317,16 +317,18 @@ const BusinessProductsListingUI = (props) => {
             </ActionsGroup>
           )}
         </HeaderContainer>
-        <ButtonWrapper>
-          <Button
-            color='primary'
-            outline
-            borderRadius='8px'
-            onClick={handleOpenSite}
-          >
-            {t('STORE_WEBSITE', 'Store website')}
-          </Button>
-        </ButtonWrapper>
+        {slug && (
+          <ButtonWrapper>
+            <Button
+              color='primary'
+              outline
+              borderRadius='8px'
+              onClick={handleOpenSite}
+            >
+              {t('STORE_WEBSITE', 'Store website')}
+            </Button>
+          </ButtonWrapper>
+        )}
         {slug && (
           <CategoryProductsContent>
             <CategoryListContainer ref={categoryListRef}>
@@ -428,6 +430,7 @@ const BusinessProductsListingUI = (props) => {
           <SideBar
             open={openSidebar === 'category_details'}
             onClose={handleCloseEdit}
+            sidebarId='editCategory'
           >
             <BusinessProductsCategoyDetails
               {...props}

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

@@ -136,7 +136,7 @@ export const AddNewPromotionText = styled.div`
   cursor: pointer;
   width: fit-content;
   margin: 15px 0;
-  color: ${props => props.theme.colors.lightGray};
+  color: ${props => props.theme.colors.primary};
   font-size: 12px;
 `
 

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

@@ -0,0 +1,165 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { useTheme } from 'styled-components'
+import { Button } from '../../../styles'
+import { Modal } from '../../Shared'
+import { BusinessSalesFacebook } from '../BusinessSalesFacebook'
+import { BusinessSalesTiktok } from '../BusinessSalesTiktok'
+import { BusinessSalesInstagram } from '../BusinessSalesInstagram'
+import { BusinessSalesGoogle } from '../BusinessSalesGoogle'
+import {
+  Container,
+  SalesContainer,
+  SocialBlock,
+  BlockHeader,
+  ConnectingContainer
+} from './styles'
+
+export const BusinessSalesChannel = (props) => {
+  const { setIsExtendExtraOpen, business } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { width } = useWindowSize()
+
+  const [selectedItem, setSelectedItem] = useState(null)
+  const [hasConnectModal, setHasConnectModal] = useState(false)
+  const [isOpenSocial, setIsOpenSocial] = useState(false)
+
+  const socialList = [
+    { key: 'facebook', name: t('FACEBOOK', 'Facebook'), icon: theme.images.icons.facebook, description: t('FACEBOOK_DESCRIPTION', 'Now you can add a “Shop now” link on your business’s Facebook page that goes straight to your ordering menu.') },
+    { key: 'tiktok', name: t('TIKTOK', 'Tiktok'), icon: theme.images.icons.tiktok, description: t('TIKTOK_DESCRIPTION', 'After they purchase we install in 24 hours. Order and pay 99 per business. They can sell at whatever price. Also. If a business manager purchases then shared revenue?') },
+    { key: 'instagram', name: t('INSTAGRAM', 'Instagram'), icon: theme.images.icons.instagram, description: t('INSTAGRAM_DESCRIPTION', 'After they purchase we install in 24 hours. Order and pay 99 per business. They can sell at whatever price. Also. If a business manager purchases then shared revenue?') },
+    { key: 'google_my_business', name: t('GOOGLE_MY_BUSINESS', 'Google My Business'), icon: theme.images.icons.businessGoogle, description: t('GOOGLE_MY_BUSINESS_DESCRIPTION', 'After they purchase we install in 24 hours. Order and pay 99 per business. They can sell at whatever price. Also. If a business manager purchases then shared revenue?') }
+  ]
+
+  const handleConnect = (item) => {
+    handleCloseDetail()
+    setSelectedItem(item)
+    setHasConnectModal(true)
+  }
+
+  const handleOpenSocial = () => {
+    setHasConnectModal(false)
+    setIsOpenSocial(true)
+    setIsExtendExtraOpen(true)
+  }
+
+  const handleCloseDetail = () => {
+    setIsOpenSocial(false)
+    setIsExtendExtraOpen(false)
+    setSelectedItem(null)
+  }
+
+  return (
+    <Container>
+      <SalesContainer>
+        <h1>{t('SALES_CHANNELS', 'Sales channels')}</h1>
+        {socialList.map((item, i) => (
+          <SocialBlock key={i}>
+            <BlockHeader>
+              <img src={item.icon} alt='' />
+              <p>{item.name}</p>
+            </BlockHeader>
+            <p>{item.description}</p>
+            <Button
+              color='primary'
+              onClick={() => handleConnect(item)}
+            >
+              {t('CONNECT', 'Connect')}
+            </Button>
+          </SocialBlock>
+        ))}
+      </SalesContainer>
+      <Modal
+        title={t('CONNECTING_SALES_CHANNELS', 'Connecting sales Channels')}
+        open={hasConnectModal}
+        onClose={() => setHasConnectModal(false)}
+        width='768px'
+      >
+        <ConnectingContainer>
+          <p>{t('CONNECTING_SALES_CHANNELS_DESC_1', 'Lorem ipsum dolor sit amet consectetur. Fringilla nulla in tincidunt id in erat et. In massa commodo imperdiet varius pharetra ultricies nunc dapibus integer. Gravida scelerisque justo hendrerit elit neque. Nunc velit vel eu velit. Faucibus turpis feugiat id nisi orci sodales.')}</p>
+          <p>{t('CONNECTING_SALES_CHANNELS_DESC_2', 'Lorem ipsum dolor sit amet consectetur. Fringilla nulla in tincidunt id in erat et. In massa commodo imperdiet varius pharetra ultricies nunc dapibus integer. Gravida scelerisque justo hendrerit elit neque. Nunc velit vel eu velit. Faucibus turpis feugiat id nisi orci sodales.')}</p>
+          <Button
+            color='primary'
+            onClick={handleOpenSocial}
+          >
+            {t('OK_I_UNDERSTAND', 'Ok, I understand')}
+          </Button>
+        </ConnectingContainer>
+      </Modal>
+      {width >= 1000 ? (
+        isOpenSocial && (
+          <>
+            {selectedItem?.key === 'facebook' && (
+              <BusinessSalesFacebook
+                businessSlug={business.slug}
+                socialItem={selectedItem}
+                onClose={handleCloseDetail}
+              />
+            )}
+            {selectedItem?.key === 'tiktok' && (
+              <BusinessSalesTiktok
+                socialItem={selectedItem}
+                onClose={handleCloseDetail}
+              />
+            )}
+            {selectedItem?.key === 'instagram' && (
+              <BusinessSalesInstagram
+                businessSlug={business.slug}
+                socialItem={selectedItem}
+                onClose={handleCloseDetail}
+              />
+            )}
+            {selectedItem?.key === 'google_my_business' && (
+              <BusinessSalesGoogle
+                businessSlug={business.slug}
+                socialItem={selectedItem}
+                onClose={handleCloseDetail}
+              />
+            )}
+          </>
+        )
+      ) : (
+        isOpenSocial && (
+          <Modal
+            width='80%'
+            open={isOpenSocial}
+            onClose={handleCloseDetail}
+          >
+            <>
+              {selectedItem?.key === 'facebook' && (
+                <BusinessSalesFacebook
+                  businessSlug={business.slug}
+                  socialItem={selectedItem}
+                  onClose={handleCloseDetail}
+                />
+              )}
+              {selectedItem?.key === 'tiktok' && (
+                <BusinessSalesTiktok
+                  socialItem={selectedItem}
+                  onClose={handleCloseDetail}
+                />
+              )}
+              {selectedItem?.key === 'instagram' && (
+                <BusinessSalesInstagram
+                  businessSlug={business.slug}
+                  socialItem={selectedItem}
+                  onClose={handleCloseDetail}
+                />
+              )}
+              {selectedItem?.key === 'google_my_business' && (
+                <BusinessSalesGoogle
+                  businessSlug={business.slug}
+                  socialItem={selectedItem}
+                  onClose={handleCloseDetail}
+                />
+              )}
+            </>
+          </Modal>
+        )
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`
+
+export const SalesContainer = styled.div`
+  height: 100%;
+  overflow-x: hidden;
+  flex: 1;
+  h1 {
+    color: ${props => props.theme.colors.headingColor};
+    font-size: 20px;
+    font-weight: 700;
+    margin-bottom: 45px;
+  }
+  @media (min-width: 576px) {
+    padding: 20px;
+  }
+`
+
+export const SocialBlock = styled.div`
+  margin-bottom: 48px;
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+  }
+  button {
+    height: 44px;
+    border-radius: 8px;
+    margin-top: 12px;
+  }
+`
+
+export const BlockHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+
+  img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    margin-right: 18px;
+    ${props => props.theme.rtl && css`
+      margin-left: 18px;
+      margin-right: 0;
+    `}
+  }
+
+  p {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0;
+  }
+`
+
+export const ConnectingContainer = styled.div`
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 40px;
+  }
+
+  > button {
+    height: 44px;
+    border-radius: 8px;
+  }
+`

package/src/components/Stores/BusinessSalesFacebook/FacebookPost.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import {
+  FacebookPostContainer,
+  Step
+} from './styles'
+
+export const FacebookPost = () => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <FacebookPostContainer>
+      <p>{t('BUSINESS_FACEBOOK_POST_DESC1', 'It’s very easy to connect Ordering with a Facebook post!')}</p>
+      <p>{t('BUSINESS_FACEBOOK_POST_DESC2', 'Lorem ipsum dolor sit amet consectetur. Platea eget blandit viverra scelerisque gravida sit tortor tellus interdum. Dolor amet quis vitae commodo nisl vestibulum ut sit.')}</p>
+      <Step>
+        <h3>{t('STEP', 'Step')} 1</h3>
+        <p>{t('BUSINESS_FACEBOOK_POST_STEP1_DESC', 'To post something on Facebook, you first need to choose the audience to which your advertising is directed.')}</p>
+        <img src={theme.images.salesChannels.facebookPostStep1} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p>{t('BUSINESS_FACEBOOK_POST_STEP2_DESC', 'Then, add what you will publish on your page, and that\'s it!')}</p>
+        <img src={theme.images.salesChannels.facebookPostStep2} alt='' />
+      </Step>
+    </FacebookPostContainer>
+  )
+}

package/src/components/Stores/BusinessSalesFacebook/FacebookProfile.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { Input } from '../../../styles'
+import {
+  FacebookProfileContainer,
+  Step,
+  CopyInputWrapper
+} from './styles'
+
+export const FacebookProfile = ({ businessSlug }) => {
+  const [, t] = useLanguage()
+  const theme = useTheme()
+
+  return (
+    <FacebookProfileContainer>
+      <p>{t('BUSINESS_FACEBOOK_PROFILE_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>{t('BUSINESS_FACEBOOK_PROFILE_STEP1_DESC', 'Copy this link below. It’s your unique Ordering link for facebook.')}</p>
+        <CopyInputWrapper>
+          <Input
+            defaultValue='https://yourbusinessname.com/store/storename'
+            disabled
+          />
+        </CopyInputWrapper>
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 2</h3>
+        <p>{t('BUSINESS_FACEBOOK_PROFILE_STEP2_DESC', 'In your business profile, click on the 3 points button on the right side of the screen and look for the option: Edit Action Button.')}</p>
+        <img src={theme.images.salesChannels.facebookProfileStep2} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 3</h3>
+        <p>{t('BUSINESS_FACEBOOK_PROFILE_STEP3_DESC', 'Please choose the option that best suits you from the following list; this time, we will select: Start Order.')}</p>
+        <img src={theme.images.salesChannels.facebookProfileStep31} alt='' />
+        <img src={theme.images.salesChannels.facebookProfileStep32} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 4</h3>
+        <p>{t('BUSINESS_FACEBOOK_PROFILE_STEP4_DESC', 'It will open a popup where you will put the link to your business where your client can place the order and click Save.')}</p>
+        <img src={theme.images.salesChannels.facebookProfileStep4} alt='' />
+      </Step>
+      <Step>
+        <h3>{t('STEP', 'Step')} 5</h3>
+        <p>{t('BUSINESS_FACEBOOK_PROFILE_STEP5_DESC', 'And voila, you will see the button you just added to your Facebook page.')}</p>
+        <img src={theme.images.salesChannels.facebookProfileStep5} alt='' />
+      </Step>
+    </FacebookProfileContainer>
+  )
+}

package/src/components/Stores/BusinessSalesFacebook/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 {
+  Container,
+  Header,
+  LeftHeader,
+  // Tabs,
+  // Tab
+} from './styles'
+import { IconButton } from '../../../styles'
+import { XLg } from 'react-bootstrap-icons'
+import { FacebookProfile } from './FacebookProfile'
+import { FacebookPost } from './FacebookPost'
+
+export const BusinessSalesFacebook = (props) => {
+  const { onClose, socialItem, businessSlug } = props
+
+  const { width } = useWindowSize()
+  // const [, t] = useLanguage()
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [selectedTab, setSelectedTab] = useState('profile')
+
+  // const tabList = [
+  //   { key: 'profile', title: t('PROFILE', 'Profile') },
+  //   { key: 'post', title: t('POST', 'Post') }
+  // ]
+
+  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 === 'profile' && <FacebookProfile businessSlug={businessSlug} />}
+      {selectedTab === 'post' && <FacebookPost />}
+    </Container>
+  )
+}

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

@@ -0,0 +1,135 @@
+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 FacebookProfileContainer = 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;
+    `}
+  }
+`
+
+export const FacebookPostContainer = styled(FacebookProfileContainer)``