ordering-ui-admin-external 1.23.3 → 1.23.5

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

@@ -10,12 +10,16 @@ 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 {
   Container,
@@ -44,10 +48,12 @@ import {
   HeaderInfoWrapper,
   InfoContent,
   RadioItem,
-  SlugWrapper
+  SlugWrapper,
+  CustomeDomainDesc,
+  TitleWrapper,
+  CustomDomainInfo,
+  CustomDomainInfoContent
 } from './styles'
-import Skeleton from 'react-loading-skeleton'
-import { AdvancedSettings } from '../AdvancedSettings'
 
 const OrderingWebsiteUI = (props) => {
   const {
@@ -57,7 +63,9 @@ const OrderingWebsiteUI = (props) => {
     handleUpdateSiteTheme,
     advancedValues,
     setAdvancedValues,
-    themesList
+    themesList,
+    site,
+    setSite
   } = props
 
   const [, t] = useLanguage()
@@ -75,6 +83,7 @@ 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') },
@@ -221,7 +230,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 +318,47 @@ 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>
@@ -547,14 +603,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 +662,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>
     </>
   )
 }
@@ -617,4 +684,4 @@ export const OrderingWebsite = (props) => {
     appId: 'website'
   }
   return <OrderingWebsiteController {...orderingWebsiteProps} />
-}
+}

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`
@@ -429,6 +441,10 @@ export const InfoContent = styled.div`
     right: initial;
   `}
 
+  span {
+    display: block;
+  }
+
   > a {
     color: ${props => props.theme.colors.primary};
     margin: 0 5px;
@@ -472,16 +488,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;
+    }
   }
 `

package/src/components/Shared/InputPhoneNumber/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import parsePhoneNumber from 'libphonenumber-js'
 import PhoneInput from 'react-phone-number-input'
 import { useLanguage, useConfig, useSession } from 'ordering-components-admin-external'
-
+import { findExitingCode } from '../../../utils'
 import { Container, ErrorMsg } from './styles'
 
 export const InputPhoneNumber = (props) => {
@@ -42,7 +42,7 @@ export const InputPhoneNumber = (props) => {
         <PhoneInput
           disabled={disabled}
           placeholder={t('PHONE_NUMBER', 'Phone number')}
-          defaultCountry={configs?.default_country_code?.value}
+          defaultCountry={findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
           value={value}
           displayInitialValueAsLocalNumber
           onChange={(val) => setValue && setValue(val, isValidPhoneNumber(val))}

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

@@ -51,7 +51,8 @@ export const BusinessDetailsUI = (props) => {
     actionStatus,
     handleUpdatePreorderConfigs,
     handleUpdateSpoonityKey,
-    spoonityKeyState
+    spoonityKeyState,
+    siteState
   } = props
 
   const history = useHistory()
@@ -185,6 +186,7 @@ export const BusinessDetailsUI = (props) => {
           handleDeleteBusiness={handleDeleteBusiness}
           extraOpen={extraOpen}
           spoonityConfig={spoonityConfig}
+          siteState={siteState}
         />
       )}
       {extraOpen && (

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

@@ -74,7 +74,8 @@ const BusinessProductsListingUI = (props) => {
     setFees,
     getBusiness,
     businessTypes,
-    setBusinessTypes
+    setBusinessTypes,
+    siteState
   } = props
 
   const history = useHistory()
@@ -210,7 +211,10 @@ const BusinessProductsListingUI = (props) => {
   }
 
   const handleOpenSite = () => {
-    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
+      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+      : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
+    window.open(url, '_blank')
   }
 
   const handleOpenAddBusiness = () => {

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

@@ -38,7 +38,8 @@ export const BusinessSummary = (props) => {
     handleDuplicateBusiness,
     handleDeleteBusiness,
     extraOpen,
-    spoonityConfig
+    spoonityConfig,
+    siteState
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -56,7 +57,10 @@ export const BusinessSummary = (props) => {
   }
 
   const handleOpenSite = () => {
-    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+    const url = siteState?.site?.domain && siteState?.site?.ssl_process_status === 'ended'
+      ? `https://${siteState?.site?.domain}/store/${businessState?.business?.slug}`
+      : `https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`
+    window.open(url, '_blank')
   }
 
   const itemsExcluded = !!spoonityConfig ? ['publishing', 'personalization'] : ['publishing', 'spoonity_key', 'personalization']
@@ -110,10 +114,10 @@ export const BusinessSummary = (props) => {
       key: 'ordering_channels',
       value: t('ORDERING_CHANNELS', 'Ordering channels')
     },
-    // {
-    //   key: 'publishing',
-    //   value: t('PUBLISHING', 'Publishing')
-    // },
+    {
+      key: 'publishing',
+      value: t('PUBLISHING', 'Publishing')
+    },
     {
       key: 'sales_channels',
       value: t('SALES_CHANNELS', 'Sales channels')

package/src/utils/index.js

@@ -3,7 +3,7 @@ import FaCcMastercard from '@meronex/icons/fa/FaCcMastercard'
 import FaCcVisa from '@meronex/icons/fa/FaCcVisa'
 import FaCreditCard from '@meronex/icons/fa/FaCreditCard'
 import moment from 'moment'
-import { useLanguage } from 'ordering-components-admin-external'
+import { useLanguage, CODES } from 'ordering-components-admin-external'
 
 export const optimizeImage = (url, params, fallback) => {
   if (!url && fallback) return fallback
@@ -194,6 +194,11 @@ export const getSeconds = (seconds) => {
   return Math.floor(remain - Math.floor(remain / 60) * 60)
 }
 
+export const findExitingCode = (countryCode) => {
+  const code = CODES.find(code => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not