ordering-ui-admin-external 1.23.4 → 1.24.0

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

@@ -0,0 +1,103 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  > h1 {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 36px;
+    margin-top: 0px;
+    margin-bottom: 25px;
+  }
+`
+
+export const FormControl = styled.div`
+  margin-bottom: 20px;
+
+  label {
+    display: block;
+    margin-bottom: 12px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  input {
+    width: 100%;
+  }
+`
+
+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 ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+
+  button {
+    height: 44px;
+    margin: 15px;
+    border-radius: 8px;
+  }
+`
+
+export const CheckBoxWrapper = styled.div`
+  margin-bottom: 15px;
+  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;
+  }
+`

package/src/components/MyProducts/OrderingWebsite/SelectBusiness.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { DefaultSelect as Select } from '../../../styles'
+import { SelectWrapper, Option } from './styles'
+
+export const SelectBusiness = (props) => {
+  const {
+    businessesList,
+    defaultValue,
+    onChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [businessOptions, setBusinessOptions] = useState([])
+
+  useEffect(() => {
+    if (businessesList?.loading || !businessesList?.businesses) return
+    const _businessOptions = []
+    businessesList.businesses.map(business => {
+      _businessOptions.push({
+        value: business?.slug,
+        content: (
+          <Option>
+            <img src={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} alt='' />
+            <span>{business?.name}</span>
+          </Option>
+        )
+      })
+    })
+    setBusinessOptions(_businessOptions)
+  }, [businessesList])
+
+  return (
+    <SelectWrapper>
+      <Select
+        placeholder={<Option>{t('SELECT_BUSINESS', 'Select business')}</Option>}
+        defaultValue={defaultValue}
+        options={businessOptions}
+        onChange={onChange}
+        optionInnerMaxHeight='300px'
+      />
+    </SelectWrapper>
+  )
+}

package/src/components/MyProducts/OrderingWebsite/SelectFranchise.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, useUtils } from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { DefaultSelect as Select } from '../../../styles'
+import { SelectWrapper, Option } from './styles'
+
+export const SelectFranchise = (props) => {
+  const {
+    franchisesList,
+    defaultValue,
+    onChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+  const [options, setOptions] = useState([])
+
+  useEffect(() => {
+    if (franchisesList?.loading || !franchisesList?.franchises) return
+    const _options = []
+    franchisesList.franchises.map(franchise => {
+      _options.push({
+        value: franchise?.id,
+        content: (
+          <Option>
+            <img src={optimizeImage(franchise?.logo || theme.images?.dummies?.businessLogo, 'h_50,c_limit')} alt='' />
+            <span>{franchise?.name}</span>
+          </Option>
+        )
+      })
+    })
+    setOptions(_options)
+  }, [franchisesList])
+
+  return (
+    <SelectWrapper>
+      <Select
+        placeholder={<Option>{t('SELECT_FRANCHISE', 'Select a franchise')}</Option>}
+        defaultValue={defaultValue}
+        options={options}
+        onChange={onChange}
+        optionInnerMaxHeight='300px'
+      />
+    </SelectWrapper>
+  )
+}

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

@@ -10,13 +10,19 @@ import {
   Square as UnCheckedIcon,
   InfoCircle,
   RecordCircleFill,
-  Circle
+  Circle,
+  InfoCircleFill
 } from 'react-bootstrap-icons'
 
 import { useTheme } from 'styled-components'
 import { Alert, Modal, ImageCrop, ColorPicker } from '../../Shared'
 import { ContentForm } from '../ContentForm'
+import Skeleton from 'react-loading-skeleton'
+import { AdvancedSettings } from '../AdvancedSettings'
+import { CustomDomain } from '../CustomDomain'
 import { bytesConverter } from '../../../utils'
+import { SelectBusiness } from './SelectBusiness'
+import { SelectFranchise } from './SelectFranchise'
 import {
   Container,
   HeaderTitleContainer,
@@ -44,10 +50,11 @@ import {
   HeaderInfoWrapper,
   InfoContent,
   RadioItem,
-  SlugWrapper
+  CustomeDomainDesc,
+  TitleWrapper,
+  CustomDomainInfo,
+  CustomDomainInfoContent
 } from './styles'
-import Skeleton from 'react-loading-skeleton'
-import { AdvancedSettings } from '../AdvancedSettings'
 
 const OrderingWebsiteUI = (props) => {
   const {
@@ -57,7 +64,11 @@ const OrderingWebsiteUI = (props) => {
     handleUpdateSiteTheme,
     advancedValues,
     setAdvancedValues,
-    themesList
+    themesList,
+    site,
+    setSite,
+    businessesList,
+    franchisesList
   } = props
 
   const [, t] = useLanguage()
@@ -75,10 +86,11 @@ const OrderingWebsiteUI = (props) => {
   const [homePageContent, setHomePageContent] = useState(false)
   const [footerContent, setFooterContent] = useState(false)
   const [selectedSetting, setSelectedSetting] = useState('basic')
+  const [isCustomDomain, setIsCustomDomain] = useState(false)
 
   const settingsList = [
-    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') },
-    { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
+    { key: 'basic', name: t('BASIC_SETTINGS', 'Basic Settings') }
+    // { key: 'advanced', name: t('ADVANCED_SETTINGS', 'Advanced Settings') }
   ]
 
   const handleClickImage = (type) => {
@@ -221,7 +233,21 @@ const OrderingWebsiteUI = (props) => {
           <FormWrapper>
             <InputFormWrapper>
               <InnerBlock>
-                <h4>{t('WEBSITE_SETTINGS', 'Website settings')}</h4>
+                <TitleWrapper>
+                  <h4>{t('WEBSITE_SETTINGS', 'Website settings')}</h4>
+                  <CustomDomainInfo>
+                    <IconButton
+                      color='primary'
+                    >
+                      <InfoCircleFill />
+                    </IconButton>
+                    <CustomDomainInfoContent>
+                      <span>{t('CUSTOM_DOMAIN_INFO_DESC_1', 'When creating a custom domain, add your domain or subdomain without http protocol or slashes.')}</span>
+                      <span>{t('EXAMPLE', 'Example')}: www.customerwebsite.ordering.co</span>
+                      <span>{t('CUSTOM_DOMAIN_INFO_DESC_2', 'If you have problems with the set-up, please contact our')}<a href='https://www.ordering.co/contact-ordering' rel='noopener noreferrer' target='_blank'>{t('CUSTOMER_SUPPORT_TEAM', 'customer support team')}</a></span>
+                    </CustomDomainInfoContent>
+                  </CustomDomainInfo>
+                </TitleWrapper>
                 <FormGroup>
                   <label>
                     {orderingTheme?.loading ? (
@@ -295,14 +321,48 @@ const OrderingWebsiteUI = (props) => {
                   {orderingTheme?.loading ? (
                     <Skeleton height={40} style={{ width: '100%' }} />
                   ) : (
-                    <Button
-                      color='primary'
-                      outline
-                      borderRadius='8px'
-                      onClick={() => window.open('https://www.ordering.co/custom-domain-change', '_blank')}
-                    >
-                      {t('REQUEST_CUSTOM_DOMAIN', 'Request custom domain')}
-                    </Button>
+                    <>
+                      {site?.domain && site?.ssl_status !== 'error' && (
+                        <TemporalDomail isDisabled={site?.ssl_process_status === 'pending'} marginBottom={site?.ssl_process_status === 'ended'}>
+                          {t('VISIT', 'Visit')}: <a href={`https://${site?.domain}`} rel='noopener noreferrer' target='_blank'>https://{site?.domain}</a>
+                        </TemporalDomail>
+                      )}
+                      {(site?.ssl_process_status === 'ended') && (
+                        <Button
+                          color='primary'
+                          outline
+                          borderRadius='8px'
+                          onClick={() => setIsCustomDomain(true)}
+                        >
+                          {site?.domain ? t('REQUEST_CUSTOM_DOMAIN', 'Request custom domain') : t('CHANGE_CUSTOM_DOMAIN', 'Change custom domain')}
+                        </Button>
+                      )}
+                      {site?.domain && (
+                        <>
+                          {site?.ssl_status === 'issued' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_ISSUED', 'Your domain is now added , please verify the custom domain link above.')}</CustomeDomainDesc>
+                          )}
+                          {site?.ssl_status === 'pre-issued' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_PRE_ISSUED', 'Process almost finish, please wait')}</CustomeDomainDesc>
+                          )}
+                          {site?.ssl_status === 'error' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_ERROR', 'Custom domain can\'t be created, please try again with valid data')}</CustomeDomainDesc>
+                          )}
+                          {((site?.ssl_status === 'pending_validation') || (site?.ssl_status === 'void' && site?.ssl_process_status === 'pending')) && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_PENDING_VALIDATION', 'A custom domain is being created, please wait')}</CustomeDomainDesc>
+                          )}
+                          {site?.ssl_status === 'revoked' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_REVOKED', 'Warning: Custom domain is revoked')}</CustomeDomainDesc>
+                          )}
+                          {site?.ssl_status === 'cancelled' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_CANCELLED', 'Custom domain is cancelled')}</CustomeDomainDesc>
+                          )}
+                          {site?.ssl_status === 'expired' && (
+                            <CustomeDomainDesc>{t('CUSTOM_DOMAIN_STATUS_EXPIRED', 'Custom domain is expired')}</CustomeDomainDesc>
+                          )}
+                        </>
+                      )}
+                    </>
                   )}
                 </FormGroup>
               </InnerBlock>
@@ -328,18 +388,11 @@ const OrderingWebsiteUI = (props) => {
                       <span>{t('REPORT_HEADER_FRANCHISES', 'Franchise')}</span>
                     </RadioItem>
                     {themeValues?.website_theme?.components?.type === 'franchise' && (
-                      <SlugWrapper>
-                        <label>{t('FRANCHISE_SLUG', 'Franchise slug')}</label>
-                        <Input
-                          name='name'
-                          placeholder={t('SLUG', 'Slug')}
-                          value={themeValues?.website_theme?.components?.franchise_slug || ''}
-                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'franchise_slug')}
-                          onKeyPress={e => {
-                            if (e.which === 32) { e.preventDefault() }
-                          }}
-                        />
-                      </SlugWrapper>
+                      <SelectFranchise
+                        defaultValue={themeValues?.website_theme?.components?.franchise_slug}
+                        franchisesList={franchisesList}
+                        onChange={value => handleChangeValue(value, 'website_theme', 'franchise_slug')}
+                      />
                     )}
 
                     <RadioItem
@@ -349,18 +402,11 @@ const OrderingWebsiteUI = (props) => {
                       <span>{t('SINGLE_STORE', 'Single Store')}</span>
                     </RadioItem>
                     {themeValues?.website_theme?.components?.type === 'single_store' && (
-                      <SlugWrapper>
-                        <label>{t('BUSINESS_SLUG', 'Business slug')}</label>
-                        <Input
-                          name='name'
-                          placeholder={t('SLUG', 'Slug')}
-                          value={themeValues?.website_theme?.components?.business_slug || ''}
-                          onChange={e => handleChangeValue(e.target.value, 'website_theme', 'business_slug')}
-                          onKeyPress={e => {
-                            if (e.which === 32) { e.preventDefault() }
-                          }}
-                        />
-                      </SlugWrapper>
+                      <SelectBusiness
+                        defaultValue={themeValues?.website_theme?.components?.business_slug}
+                        businessesList={businessesList}
+                        onChange={value => handleChangeValue(value, 'website_theme', 'business_slug')}
+                      />
                     )}
                   </>
                 )}
@@ -547,14 +593,14 @@ const OrderingWebsiteUI = (props) => {
             </Button>
           </FormWrapper>
         )}
-        {/* {selectedSetting === 'advanced' && !orderingTheme?.loading && (
+        {selectedSetting === 'advanced' && !orderingTheme?.loading && (
           <AdvancedSettings
             themesList={themesList}
             advancedValues={advancedValues}
             setAdvancedValues={setAdvancedValues}
             handleUpdateSiteTheme={handleUpdateSiteTheme}
           />
-        )} */}
+        )}
       </Container>
       <Alert
         title={t('ORDERING', 'Ordering')}
@@ -606,6 +652,17 @@ const OrderingWebsiteUI = (props) => {
           type='footer_content'
         />
       </Modal>
+      <Modal
+        width='70%'
+        open={isCustomDomain}
+        onClose={() => setIsCustomDomain(false)}
+      >
+        <CustomDomain
+          site={site}
+          onClose={() => setIsCustomDomain(false)}
+          setSite={setSite}
+        />
+      </Modal>
     </>
   )
 }

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

@@ -178,6 +178,18 @@ export const TemporalDomail = styled.div`
   > a {
     color: ${props => props.theme.colors.primary};
   }
+
+  ${({ isDisabled }) => isDisabled && css`
+    pointer-events: none;
+    color: ${props => props.theme.colors.disabled};
+    > a {
+      color: ${props => props.theme.colors.disabled};
+    }
+  `}
+
+  ${({ marginBottom }) => marginBottom && css`
+    margin-bottom: 10px;
+  `}
 `
 
 export const ImageFormGroup = styled.div`
@@ -472,16 +484,123 @@ export const RadioItem = styled.div`
     line-height: 24px;
   }
 `
-export const SlugWrapper = styled.div`
-  margin-bottom: 20px;
-  label {
+
+export const CustomeDomainDesc = styled.p`
+  margin-top: 5px;
+  margin-bottom: 0px;
+  font-weight: 400;
+  font-size: 12px;
+`
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const CustomDomainInfo = styled.div`
+  position: relative;
+
+  > button {
+    height: 21px;
+    svg {
+      width: 13px;
+      height: 13px;
+      color: ${props => props.theme.colors.headingColor};
+    }
+  }
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`
+
+export const CustomDomainInfoContent = styled.div`
+  position: absolute;
+  top: 100%;
+  z-index: 999;
+  background: ${props => props.theme.colors.backgroundInfo};
+  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: -100px;
+  ${props => props.theme.rtl && css`
+    left: 0px;s
+    right: initial;
+  `}
+
+  span {
     display: block;
-    margin-bottom: 12px;
-    font-weight: 400;
+  }
+
+  a {
+    color: ${props => props.theme.colors.primary};
+    padding-left: 5px;
+  }
+
+  @media (min-width: 576px) {
+    min-width: 350px;
+    padding: 10px 16px;
+    left: 0px;
+    ${props => props.theme.rtl && css`
+      right: 0px;
+      left: initial;
+    `}
+  }
+`
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 7.6px;
+  img {
+    min-height: 38px;
+    min-width: 38px;
+    height: 38px;
+    width: 38px;
+    border-radius: 8px;
+    object-fit: cover;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+  > span {
+    max-width: 200px;
     font-size: 14px;
-    line-height: 24px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
-  > input, textarea {
+
+  @media (min-width: 768px) {
+    > span {
+      max-width: 560px;
+    }
+  }
+`
+export const SelectWrapper = styled.div`
+  margin-bottom: 20px;
+
+  .select {
     width: 100%;
+    background: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+
+    > div:first-child {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
   }
 `