ordering-ui-admin-external 1.25.1 → 1.26.1

package/src/components/Settings/IntegrationListing/PaymentGateway.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useEvent, Settings as SettingsController } from 'ordering-components-admin-external'
+import { GearFill } from 'react-bootstrap-icons'
+import { SettingsDetail } from '../SettingsDetail'
+import Skeleton from 'react-loading-skeleton'
+import { useHistory, useLocation } from 'react-router-dom'
+import {
+  CategorySection,
+  SettingList,
+  SettingItemContainer,
+  IconWrapper,
+  SettingItemContent
+} from './styles'
+
+const PaymentGatewayUI = (props) => {
+  const {
+    categoryList
+  } = props
+
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+
+  const history = useHistory()
+  const query = new URLSearchParams(useLocation().search)
+  const allowOptions = ['stripe', 'stripe_connect']
+
+  const [selectedCategory, setSelectedCategory] = useState(null)
+  const [showDetail, setShowDetail] = useState(false)
+
+  const handleBackRedirect = () => {
+    setShowDetail(false)
+    setSelectedCategory(null)
+    history.replace(`${location.pathname}`)
+  }
+
+  const onBasicSettingsRedirect = ({ category }) => {
+    if (!category) {
+      return events.emit('go_to_page', { page: 'integrations', replace: true })
+    }
+    if (category) {
+      events.emit('go_to_page', {
+        page: 'integrations',
+        search: `?category=${category}`,
+        replace: true
+      })
+    }
+  }
+
+  const handleOpenSetting = (category, initialRender) => {
+    setSelectedCategory(category)
+    setShowDetail(true)
+    if (!initialRender) {
+      history.replace(`${location.pathname}?category=${category?.id}`)
+    }
+  }
+
+  useEffect(() => {
+    if (categoryList.loading) return
+    const categoryId = query.get('category')
+    if (categoryId) {
+      const categorySelected = categoryList?.categories.find(item => item?.id === parseInt(categoryId))
+      if (categorySelected) {
+        handleOpenSetting(categorySelected, true)
+      }
+    }
+  }, [categoryList.loading])
+
+  return (
+    <CategorySection>
+      <h2>{t('PAYMENT_GETWAYS', 'Payment Gateways')}</h2>
+      {!categoryList?.loading && (
+        <SettingList>
+          {categoryList?.categories?.filter(item => allowOptions.includes(item.key)).map(setting => (
+            <SettingItemContainer
+              key={setting?.id}
+              onClick={() => handleOpenSetting(setting)}
+            >
+              <IconWrapper>
+                <GearFill />
+              </IconWrapper>
+              <SettingItemContent>
+                <h5>{setting?.name}</h5>
+                <p>{setting?.description}</p>
+              </SettingItemContent>
+            </SettingItemContainer>
+          ))}
+        </SettingList>
+      )}
+      {categoryList?.loading && (
+        <SettingList>
+          {[...Array(2).keys()].map(i => (
+            <SettingItemContainer
+              key={i}
+            >
+              <IconWrapper>
+                <Skeleton width={24} height={24} />
+              </IconWrapper>
+              <SettingItemContent>
+                <h5><Skeleton height={18} width={120} /></h5>
+                <p><Skeleton height={13} count={2} /></p>
+              </SettingItemContent>
+            </SettingItemContainer>
+          ))}
+        </SettingList>
+      )}
+      {showDetail && (
+        <SettingsDetail
+          {...props}
+          open={showDetail}
+          category={selectedCategory}
+          onClose={handleBackRedirect}
+          onBasicSettingsRedirect={onBasicSettingsRedirect}
+        />
+      )}
+    </CategorySection>
+  )
+}
+
+export const PaymentGateway = (props) => {
+  const paymentGatewayProps = {
+    ...props,
+    UIComponent: PaymentGatewayUI,
+    settingsType: 'key_basic'
+  }
+  return <SettingsController {...paymentGatewayProps} />
+}

package/src/components/Settings/IntegrationListing/index.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useEvent } from 'ordering-components-admin-external'
-import { IconButton } from '../../../styles'
+import { Button, IconButton } from '../../../styles'
 import { useLocation } from 'react-router-dom'
 import { List as MenuIcon, PuzzleFill, Display, KeyFill } from 'react-bootstrap-icons'
 import { useInfoShare } from '../../../contexts/InfoShareContext'
-import { SideBar } from '../../Shared'
+import { SideBar, Modal } from '../../Shared'
 import { PluginList } from '../PluginList'
 import { WebhookList } from '../WebhookList'
 import { ApiKeysList } from '../ApiKeysList'
@@ -13,24 +13,60 @@ import { useTheme } from 'styled-components'
 import { LalaMoveConnect } from '../LalaMoveConnect'
 import { Deliverect } from '../Deliverect'
 import { ItsaCheckmate } from '../ItsaCheckmate'
-
+import HubspotForm from 'react-hubspot-form'
+import Skeleton from 'react-loading-skeleton'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { PickerExpress } from '../PickerExpress'
+import { PaymentGateway } from './PaymentGateway'
+import { Analytics } from './Analytics'
 import {
   IntegrationsContainer,
   Header,
-  SettingListContainer,
   SettingItemContainer,
   IconWrapper,
-  SettingItemContent
+  SettingItemContent,
+  CategorySection,
+  CategorGroup,
+  SettingList,
+  SpecialPartnerWrapper,
+  CloseButtonWrapper,
+  HubspotFormWrapper,
+  TabWrapper,
+  Tabs,
+  Tab
 } from './styles'
-import { PickerExpress } from '../PickerExpress'
 
 export const IntegrationListing = (props) => {
   const [, t] = useLanguage()
   const { search } = useLocation()
   const [events] = useEvent()
   const theme = useTheme()
+  const { width } = useWindowSize()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [showOption, setShowOption] = useState(null)
+  const [showForm, setShowForm] = useState(false)
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [selectedTab, setSelectedTab] = useState(2)
+
+  const deliveryPlatformList = [
+    { key: 'doordash', title: t('CONNECT_WITH_DOORDASH', 'Connect with Doordash'), icon: <img src={theme.images.general.doordash} />, description: t('CONNECT_DOORDASH_DESCRIPTION', 'Send orders directly to your driver in Doordash and keep customers happy with their deliveries.') },
+    { key: 'lalamove', title: t('CONNECT_WITH_LALAMOVE', 'Connect with Lalamove'), icon: <img src={theme.images.general.lalamove} />, description: t('CONNECT_LALAMOVE_DESCRIPTION', 'Send orders directly to your drivers in LalaMove and keep customers happy with their deliveries.') },
+    { key: 'picker_express', title: t('CONNECT_WITH_PICKER_EXPRESS', 'Connect with Picker Express'), icon: <img src={theme.images.general.pickerExpress} />, description: t('CONNECT_PICKER_EXPRESS_DESCRIPTION', 'Picker express connect you with +200 hundred thousand driver from +10 delivery companies from your city.') }
+  ]
+
+  const orderingDevelopers = [
+    { key: 'plugins', title: t('PLUGINS', 'Plugins'), icon: <PuzzleFill />, description: t('PLUGIN_DESCRIPTION', 'This functionality serves to extend the Ordering API functionalities to anything you want without any restriction.') },
+    { key: 'webhooks', title: t('WEBHOOKS', 'Webhooks'), icon: <Display />, description: t('WEBHOOK_DESCRIPTION', 'Unlike business webhooks, global webhooks listen to the events of the entire project.') },
+    { key: 'apiKeys', title: t('KEYS', 'Api Keys'), icon: <KeyFill />, description: t('APIKEYS_DESCRIPTION', 'These keys serve to obtain a direct connection to the API without the need for authentication.') }
+  ]
+
+  const tabList = [
+    { key: 2, name: t('ORDERING_DEVELOPERS', 'Ordering developers') },
+    { key: 3, name: t('DELIVERY_PLATFORM', 'Delivery Platform') },
+    { key: 4, name: t('POS_INTEGRATIONS', 'POS Integrations') },
+    { key: 5, name: t('PAYMENT_GETWAYS', 'Payment Gateways') },
+    { key: 6, name: t('ANALYTICS', 'Analytics') }
+  ]
 
   let settingParams
 
@@ -71,6 +107,22 @@ export const IntegrationListing = (props) => {
     }
   }, [])
 
+  const FormLoading = () => {
+    return (
+      <div>
+        <div>
+          <Skeleton height={20} width={300} style={{ marginBottom: 20 }} />
+        </div>
+        {[...Array(4).keys()].map(key => (
+          <React.Fragment key={key}>
+            <Skeleton height={15} width={300} style={{ marginBottom: 10 }} />
+            <Skeleton height={35} style={{ marginBottom: 30 }} />
+          </React.Fragment>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <>
       <IntegrationsContainer>
@@ -85,96 +137,102 @@ export const IntegrationListing = (props) => {
           )}
           <h1>{t('INTEGRATIONS', 'Integrations')}</h1>
         </Header>
-        <SettingListContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('plugins')}
-          >
-            <IconWrapper>
-              <PuzzleFill />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('PLUGINS', 'Plugins')}</h5>
-              <p>{t('PLUGIN_DESCRIPTION', 'This functionality serves to extend the Ordering API functionalities to anything you want without any restriction.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('webhooks')}
-          >
-            <IconWrapper>
-              <Display />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('WEBHOOKS', 'Webhooks')}</h5>
-              <p>{t('WEBHOOK_DESCRIPTION', 'Unlike business webhooks, global webhooks listen to the events of the entire project.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('apiKeys')}
-          >
-            <IconWrapper>
-              <KeyFill />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('KEYS', 'Api Keys')}</h5>
-              <p>{t('APIKEYS_DESCRIPTION', 'These keys serve to obtain a direct connection to the API without the need for authentication.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('doordash')}
-          >
-            <IconWrapper>
-              <img src={theme.images.general.doordash} />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('CONNECT_WITH_DOORDASH', 'Connect with Doordash')}</h5>
-              <p>{t('CONNECT_DOORDASH_DESCRIPTION', 'Send orders directly to your driver in Doordash and keep customers happy with their deliveries.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('lalamove')}
-          >
-            <IconWrapper>
-              <img src={theme.images.general.lalamove} />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('CONNECT_WITH_LALAMOVE', 'Connect with Lalamove')}</h5>
-              <p>{t('CONNECT_LALAMOVE_DESCRIPTION', 'Send orders directly to your drivers in LalaMove and keep customers happy with their deliveries.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('picker_express')}
-          >
-            <IconWrapper fullWidth>
-              <img src={theme.images.general.pickerExpress} />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('CONNECT_WITH_PICKER_EXPRESS', 'Connect with Picker Express')}</h5>
-              <p>{t('CONNECT_PICKER_EXPRESS_DESCRIPTION', 'Picker express connect you with +200 hundred thousand driver from +10 delivery companies from your city.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('deliverect')}
-          >
-            <IconWrapper>
-              <img src={theme.images.general.deliverect} />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('DELIVERECT', 'Deliverect')}</h5>
-              <p>{t('SYNC_DEC_FIRST', 'The easiest way to manage all your online orders.')}</p>
-            </SettingItemContent>
-          </SettingItemContainer>
-          <SettingItemContainer
-            onClick={() => handleOpenSetting('itsacheckmate')}
-          >
-            <IconWrapper>
-              <img src={theme.images.general.ItsaCheckmateLogo} />
-            </IconWrapper>
-            <SettingItemContent>
-              <h5>{t('ITSACHECKMATE', 'ItsaCheckmate')}</h5>
-              <p dangerouslySetInnerHTML={{ __html: t('ITSACHECKMATE_SUB_HEADER', 'Take control of all your <strong>Ordering Platform Menus</strong> in one place!') }} />
-            </SettingItemContent>
-          </SettingItemContainer>
-        </SettingListContainer>
+        {width > 768 && (
+          <TabWrapper>
+            <Tabs>
+              {tabList.map(tab => (
+                <Tab
+                  key={tab.key}
+                  active={tab.key === selectedTab}
+                  onClick={() => setSelectedTab(tab.key)}
+                >
+                  {tab.name}
+                </Tab>
+              ))}
+            </Tabs>
+          </TabWrapper>
+        )}
+        <CategorGroup>
+          <CategorySection style={{ order: selectedTab === 2 ? 1 : selectedTab }}>
+            <h2>{t('ORDERING_DEVELOPERS', 'Ordering developers')}</h2>
+            <SettingList>
+              {orderingDevelopers.map((item, i) => (
+                <SettingItemContainer
+                  key={i}
+                  onClick={() => handleOpenSetting(item.key)}
+                >
+                  <IconWrapper>
+                    {item?.icon}
+                  </IconWrapper>
+                  <SettingItemContent>
+                    <h5>{item?.title}</h5>
+                    <p>{item?.description}</p>
+                  </SettingItemContent>
+                </SettingItemContainer>
+              ))}
+            </SettingList>
+          </CategorySection>
+          <CategorySection style={{ order: selectedTab === 3 ? 1 : selectedTab }}>
+            <h2>{t('DELIVERY_PLATFORM', 'Delivery Platform')}</h2>
+            <SpecialPartnerWrapper>
+              <Button
+                color='primary'
+                onClick={() => setShowForm(true)}
+              >
+                {t('LOOKING_FOR_SPECIFIC_PARTNER', 'Looking for a specific partner?')}
+              </Button>
+            </SpecialPartnerWrapper>
+            <SettingList>
+              {deliveryPlatformList.map((item, i) => (
+                <SettingItemContainer
+                  key={i}
+                  onClick={() => handleOpenSetting(item.key)}
+                >
+                  <IconWrapper>
+                    {item?.icon}
+                  </IconWrapper>
+                  <SettingItemContent>
+                    <h5>{item?.title}</h5>
+                    <p>{item?.description}</p>
+                  </SettingItemContent>
+                </SettingItemContainer>
+              ))}
+            </SettingList>
+          </CategorySection>
+          <CategorySection style={{ order: selectedTab === 4 ? 1 : selectedTab }}>
+            <h2>{t('POS_INTEGRATIONS', 'POS Integrations')}</h2>
+            <SettingList>
+              <SettingItemContainer
+                onClick={() => handleOpenSetting('deliverect')}
+              >
+                <IconWrapper>
+                  <img src={theme.images.general.deliverect} />
+                </IconWrapper>
+                <SettingItemContent>
+                  <h5>{t('DELIVERECT', 'Deliverect')}</h5>
+                  <p>{t('SYNC_DEC_FIRST', 'The easiest way to manage all your online orders.')}</p>
+                </SettingItemContent>
+              </SettingItemContainer>
+              <SettingItemContainer
+                onClick={() => handleOpenSetting('itsacheckmate')}
+              >
+                <IconWrapper>
+                  <img src={theme.images.general.ItsaCheckmateLogo} />
+                </IconWrapper>
+                <SettingItemContent>
+                  <h5>{t('ITSACHECKMATE', 'ItsaCheckmate')}</h5>
+                  <p dangerouslySetInnerHTML={{ __html: t('ITSACHECKMATE_SUB_HEADER', 'Take control of all your <strong>Ordering Platform Menus</strong> in one place!') }} />
+                </SettingItemContent>
+              </SettingItemContainer>
+            </SettingList>
+          </CategorySection>
+          <div style={{ order: selectedTab === 5 ? 1 : selectedTab }}>
+            <PaymentGateway />
+          </div>
+          <div style={{ order: selectedTab === 6 ? 1 : selectedTab }}>
+            <Analytics />
+          </div>
+        </CategorGroup>
       </IntegrationsContainer>
 
       {showOption === 'plugins' && (
@@ -222,6 +280,41 @@ export const IntegrationListing = (props) => {
       {showOption === 'deliverect' && <Deliverect onClose={() => handleCloseSettings()} />}
 
       {showOption === 'itsacheckmate' && <ItsaCheckmate onClose={() => handleCloseSettings()} />}
+
+      <Modal
+        width='769px'
+        padding='30px'
+        title={t('LOOKING_FOR_SPECIFIC_PARTNER', 'Looking for a specific partner?')}
+        open={showForm}
+        onClose={() => {
+          setIsSubmitted(false)
+          setShowForm(false)
+        }}
+      >
+        <HubspotFormWrapper>
+          <HubspotForm
+            region='na1'
+            portalId='6130635'
+            formId='cb51d3cb-f9ed-4162-9479-d4cf164c391d'
+            onFormSubmitted={() => setIsSubmitted(true)}
+            onReady={(form) => console.log('Form ready!')}
+            loading={<FormLoading />}
+          />
+          {isSubmitted && (
+            <CloseButtonWrapper>
+              <Button
+                color='primary'
+                onClick={() => {
+                  setIsSubmitted(false)
+                  setShowForm(false)
+                }}
+              >
+                {t('CLOSE', 'Close')}
+              </Button>
+            </CloseButtonWrapper>
+          )}
+        </HubspotFormWrapper>
+      </Modal>
     </>
   )
 }

package/src/components/Settings/IntegrationListing/styles.js

@@ -21,10 +21,12 @@ export const Header = styled.div`
   `}
 
   h1 {
+    flex: 1;
     font-size: 20px;
     font-weight: 700;
     margin: 0px;
     line-height: 35px;
+    text-align: center;
   }
 
   > button {
@@ -43,9 +45,36 @@ export const Header = styled.div`
   }
 `
 
-export const SettingListContainer = styled.div`
+export const CategorGroup = styled.div`
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+`
+
+export const CategorySection = styled.div`
+ h2 {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  margin-left: 20px;
+ }
+`
+
+export const SettingList = styled.div`
   display: flex;
   flex-wrap: wrap;
+  margin-top: 20px;
+  margin-bottom: 35px;
+`
+
+export const SpecialPartnerWrapper = styled.div`
+  margin-top: 14px;
+  margin-left: 20px;
+  button {
+    height: 44px;
+    border-radius: 8px;
+  }
 `
 
 export const SettingItemContainer = styled.div`
@@ -116,3 +145,63 @@ export const SettingItemContent = styled.div`
     overflow: hidden;
   }
 `
+
+export const CloseButtonWrapper = styled.div`
+  position: sticky;
+  top: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+
+  button {
+    height: 44px;
+    border-radius: 8px;
+    width: 100%;
+  }
+`
+
+export const HubspotFormWrapper = styled.div`
+  min-height: 445px;
+  position: relative;
+`
+
+export const TabWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const Tabs = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const Tab = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  padding-bottom: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  cursor: pointer;
+  &:not(:last-child) {
+    margin-right: 16px;
+    ${props => props.theme.rtl && css`
+      margin-right: 0;
+      margin-left: 16px;
+    `}
+  }
+  ${({ active }) => active && css`
+    font-weight: 600;
+    color: ${props => props.theme.colors.headingColor};
+    border-bottom: 1px solid ${props => props.theme.colors.headingColor};
+  `}
+
+  @media (min-width: 1024px) {
+    &:not(:last-child) {
+      margin-right: 32px;
+      ${props => props.theme.rtl && css`
+        margin-right: 0;
+        margin-left: 32px;
+      `}
+    }
+  }
+`