ordering-ui-admin-external 1.26.1 → 1.27.0

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

@@ -0,0 +1,344 @@
+import styled, { css } from 'styled-components'
+
+export const DoordashConnectContainer = styled.div`
+  padding: 26px 20px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+
+  button.all-setting {
+    height: 44px;
+    user-select: none;
+    margin-top: 36px;
+    span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    svg {
+      margin-left: 5px;
+      transition: 0.2s linear;
+      ${props => props.theme.rtl && css`
+        margin-right: 5px;
+        margin-left: 0px;
+      `}
+    }
+    &:hover {
+      svg {
+        transform: translateX(3px);
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    padding: 26px 40px;
+  }
+`
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0px;
+  }
+
+  button {
+    height: 42px;
+  }
+`
+
+export const ApiKeysListTable = styled.table`
+  width: 100%;
+  margin-top: 25px;
+
+  thead {
+    border-bottom: 1px solid ${props => props.theme.colors.secundaryLight};
+    th {
+      padding: 10px 0;
+      &:last-child {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+    }
+  }
+  tr {
+    width: 100%;
+    th,
+    td {
+      font-size: 12px;
+      word-break: break-all;
+
+      &:last-child {
+        width: 100px;
+        > div {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+  }
+
+  tbody {
+    border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+    td {
+      padding-top: 9px;
+      padding-bottom: 9px;
+
+      &:last-child {
+        > div {
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+`
+
+export const DropdownButtonWrapper = styled.div`
+  ${props => props?.theme?.rtl ? css`
+    border-right: 1px solid ${props => props.theme.colors.borderColor};
+  ` : css`
+    border-left: 1px solid ${props => props.theme.colors.borderColor};
+  `}
+  padding: 5px 20px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => props.theme.colors.secundary} !important;
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`
+export const AddNewButton = styled.div`
+  cursor: pointer;
+  font-size: 12px;
+  color: ${props => props.theme.colors.lightGray};
+  margin: 20px 0;
+  width: fit-content;
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`
+
+export const AllSetting = styled.div`
+  user-select: none;
+  cursor: pointer;
+  margin-top: 36px;
+  cursor: pointer;
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    color: ${props => props.theme.colors.primary};
+  }
+  svg {
+    color: ${props => props.theme.colors.primary};
+    margin-left: 5px;
+    transition: 0.2s linear;
+    ${props => props.theme.rtl && css`
+      margin-right: 5px;
+      margin-left: 0px;
+    `}
+  }
+  &:hover {
+    svg {
+      transform: translateX(3px);
+    }
+  }
+`
+
+export const Description = styled.p`
+  margin-top: 40px;
+  font-size: 14px;
+  margin-bottom: 0px;
+  text-align: justify;
+
+  @media (min-width: 768px) {
+    text-align: initial;
+  }
+`
+
+export const CategoryExtraContent = styled.div`
+  position: relative;
+  padding: 26px 26px 60px 26px;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+
+  ${props => props.theme?.rtl ? css`
+    border-right: 1px solid #E9ECEF;
+  ` : css`
+    border-left: 1px solid #E9ECEF;
+  `}
+
+  > button {
+    z-index: 100;
+    position: absolute;
+    top: 25px;
+    ${props => props.theme?.rtl ? css`
+      left: 20px;
+    ` : css`
+      right: 20px;
+    `}
+  }
+`
+
+export const Container = styled.div`
+  display: flex;
+  width: 0;
+  position: fixed;
+  box-shadow: -4px 0px 7px #ccc;
+
+  ${({ isDriverOrders }) => isDriverOrders && css`
+    position: absolute;
+    box-shadow: none;
+
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #CCC;
+    ` : css`
+      border-left: 1px solid #CCC;
+    `}
+  `}
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  height: calc(var(--vh, 1vh) * 100);
+  top: 0px;
+  z-index: 1001;
+  overflow-x: hidden;
+  transition: 0.3s;
+
+  ${props => props.theme?.rtl ? css`
+    left: 0px;
+    ` : css`
+    right: 0px;
+  `}
+  @media print {
+    box-shadow: none;
+  }
+`
+
+export const DescriptionHeader = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`
+
+export const HeaderIcons = styled.div`
+  display: flex;
+  position: absolute;
+  top: 25px;
+  right: 20px;
+
+  > button:first-child {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+    ` : css`
+      margin-right: 8px;
+    `}
+  }
+`
+
+export const SettingListConatiner = styled.div`
+  width: 100%;
+  margin: 20px 0;
+  border-bottom: 1px solid #E9ECEF;
+`
+
+export const Tab = styled.div`
+  user-select: none;
+  padding: 10px 0px;
+  cursor: pointer;
+  color: ${props => props.theme.colors?.headingColor};
+  font-size: 14px;
+  white-space: nowrap;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+
+  ${({ active }) => active && css`
+    border-bottom: 2px solid;
+    font-weight: 500;
+  `}
+
+  ${({ active }) => !active && css`
+    color: #909BA9;
+  `}
+`
+
+export const Paragraph = styled.div`
+  margin-top: 20px;
+  h3{
+    font-size: 16px;
+  }
+  p{
+    white-space: pre-line;
+    font-size: 12px;
+    margin: 0;
+  }
+  span {
+    font-size: 12px;
+  }
+  a {
+    text-decoration: underline !important;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${props => props.theme.colors.primary} !important;
+  }
+  .bold {
+    font-weight: 600;
+  }
+`
+
+export const PurchaseWrapper = styled.div`
+  button {
+    border-radius: 5px;
+  }
+  margin-top: 15px;
+`

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

@@ -14,7 +14,9 @@ import {
 
 const AnalyticsUI = (props) => {
   const {
-    categoryList
+    categoryList,
+    showOption,
+    setShowOption
   } = props
 
   const [, t] = useLanguage()
@@ -49,6 +51,7 @@ const AnalyticsUI = (props) => {
 
   const handleOpenSetting = (category, initialRender) => {
     setSelectedCategory(category)
+    setShowOption('analytics')
     setShowDetail(true)
     if (!initialRender) {
       history.replace(`${location.pathname}?category=${category?.id}`)
@@ -104,7 +107,7 @@ const AnalyticsUI = (props) => {
           ))}
         </SettingList>
       )}
-      {showDetail && (
+      {showDetail && showOption === 'analytics' && (
         <SettingsDetail
           {...props}
           open={showDetail}

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

@@ -11,10 +11,15 @@ import {
   IconWrapper,
   SettingItemContent
 } from './styles'
+import { BacCredomatic } from '../BacCredomatic'
 
 const PaymentGatewayUI = (props) => {
   const {
-    categoryList
+    categoryList,
+    showOption,
+    setShowOption,
+    handleCloseSettings,
+    handleOpenBasicSetting
   } = props
 
   const [, t] = useLanguage()
@@ -48,6 +53,7 @@ const PaymentGatewayUI = (props) => {
 
   const handleOpenSetting = (category, initialRender) => {
     setSelectedCategory(category)
+    setShowOption('payment-gateway')
     setShowDetail(true)
     if (!initialRender) {
       history.replace(`${location.pathname}?category=${category?.id}`)
@@ -84,6 +90,17 @@ const PaymentGatewayUI = (props) => {
               </SettingItemContent>
             </SettingItemContainer>
           ))}
+          <SettingItemContainer
+            onClick={() => handleOpenBasicSetting('bac_credomatic')}
+          >
+            <IconWrapper>
+              <GearFill />
+            </IconWrapper>
+            <SettingItemContent>
+              <h5>{t('BAC_CREDOMATIC', 'BAC Credomatic')}</h5>
+              <p dangerouslySetInnerHTML={{ __html: t('BAC_CREDOMATIC_DESCRIPTION', 'Accept payments in Central America') }} />
+            </SettingItemContent>
+          </SettingItemContainer>
         </SettingList>
       )}
       {categoryList?.loading && (
@@ -103,7 +120,7 @@ const PaymentGatewayUI = (props) => {
           ))}
         </SettingList>
       )}
-      {showDetail && (
+      {showDetail && showOption === 'payment-gateway' && (
         <SettingsDetail
           {...props}
           open={showDetail}
@@ -112,6 +129,7 @@ const PaymentGatewayUI = (props) => {
           onBasicSettingsRedirect={onBasicSettingsRedirect}
         />
       )}
+      {showOption === 'bac_credomatic' && <BacCredomatic onClose={() => handleCloseSettings()} />}
     </CategorySection>
   )
 }

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

@@ -227,10 +227,18 @@ export const IntegrationListing = (props) => {
             </SettingList>
           </CategorySection>
           <div style={{ order: selectedTab === 5 ? 1 : selectedTab }}>
-            <PaymentGateway />
+            <PaymentGateway
+              showOption={showOption}
+              setShowOption={setShowOption}
+              handleCloseSettings={handleCloseSettings}
+              handleOpenBasicSetting={handleOpenSetting}
+            />
           </div>
           <div style={{ order: selectedTab === 6 ? 1 : selectedTab }}>
-            <Analytics />
+            <Analytics
+              showOption={showOption}
+              setShowOption={setShowOption}
+            />
           </div>
         </CategorGroup>
       </IntegrationsContainer>

package/src/components/Settings/index.js

@@ -15,6 +15,7 @@ import { NotificationSetting } from './NotificationSetting'
 import { SettingsSelectUI } from './SettingsSelectUI'
 import { SettingsCountryFilter } from './SettingsCountryFilter'
 import { ApiKeysList } from './ApiKeysList'
+import { BacCredomatic } from './BacCredomatic'
 import { WebhookList } from './WebhookList'
 import { PluginList } from './PluginList'
 import { WebhookDelaySelector } from './WebhookDelaySelector'
@@ -49,6 +50,7 @@ export {
   SettingsSelectUI,
   SettingsCountryFilter,
   ApiKeysList,
+  BacCredomatic,
   WebhookList,
   PluginList,
   WebhookDelaySelector,

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

@@ -13,6 +13,8 @@ import {
   ActionContentWrapper,
   ButtonWrapper
 } from './styles'
+import { Checkbox } from '../../../styles/Checkbox'
+import Skeleton from 'react-loading-skeleton'
 
 export const ImageCrop = (props) => {
   const {
@@ -99,9 +101,13 @@ export const ImageCrop = (props) => {
 
   return (
     <Container>
-      <ImageCropWrapper>
-        <img ref={cropperRef} src={photo} />
-      </ImageCropWrapper>
+      {loading
+        ? <Skeleton style={{ height: 400 }} />
+        : (
+          <ImageCropWrapper>
+            <img ref={cropperRef} src={photo} />
+          </ImageCropWrapper>
+        )}
       <ImageCropActionWrapper>
         <RangeWrapper>
           <span className='title'>{t('RESIZE_IMAGE', 'Resize image')}</span>

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

@@ -12,7 +12,8 @@ import {
   Header,
   CloseButton,
   FormControl,
-  QRCodeLayout
+  QRCodeLayout,
+  TableNumberHintText
 } from './styles'
 
 export const BusinessQRCodeOption = (props) => {
@@ -62,8 +63,8 @@ export const BusinessQRCodeOption = (props) => {
       : `https://${ordering.project}.tryordering.com/store/${business?.slug}`
     const tsNumber = item?.key !== 'pick_up'
       ? (item?.key === 'eat_in'
-        ? `&table_numer=${numberRef?.current?.value}`
-        : `&spot_numer=${numberRef?.current?.value}`)
+        ? `&table_number=${numberRef?.current?.value}`
+        : `&spot_number=${numberRef?.current?.value}`)
       : ''
     const compltedUrl = `${storeUrl}?order_type=${item.value}${tsNumber}`
     setCode(compltedUrl)
@@ -109,6 +110,7 @@ export const BusinessQRCodeOption = (props) => {
           <Close onClick={() => onClose && onClose()} />
         </CloseButton>
       </Header>
+
       {code && (
         <QRCodeLayout ref={printerRef}>
           <QRCode
@@ -119,17 +121,31 @@ export const BusinessQRCodeOption = (props) => {
           />
         </QRCodeLayout>
       )}
+
       {item?.key === 'pick_up' ? (
-        <p>{t('GENERATE_QR_CODE', 'Generate QR Code')}</p>
+        <h4>{t('GENERATE_QR_CODE', 'Generate QR Code')}</h4>
       ) : (
-        <FormControl>
-          <label>{item?.key === 'eat_in' ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')}</label>
-          <Input
-            placeholder='0'
-            ref={numberRef}
-          />
-        </FormControl>
+        <>
+          {item?.key === 'eat_in' && code && (
+            <TableNumberHintText>
+              {t('TO_GENERATE_NEW_QR_CODE_UPDATE_TABLE_NUMBER', 'To generate new QR codes, update the table number and regenerate the code.')}
+            </TableNumberHintText>
+          )}
+          <FormControl>
+            <label>{item?.key === 'eat_in' ? t('TABLE_NUMBER', 'Table number') : t('SPOT_NUMBER', 'Spot number')}</label>
+            <Input
+              placeholder='0'
+              ref={numberRef}
+              onKeyPress={(e) => {
+                if (!/^[0-9.]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+            />
+          </FormControl>
+        </>
       )}
+
       <ButtonGroup>
         <Button color='primary' outline onClick={generateQRCode}>
           {t('GENERATE_CODE', 'Generate Code')}
@@ -147,6 +163,7 @@ export const BusinessQRCodeOption = (props) => {
           removeAfterPrint
         />
       </ButtonGroup>
+
       <Alert
         title={t('ORDERING', 'Ordering')}
         content={alertState.content}

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

@@ -25,7 +25,7 @@ export const Container = styled.div`
       border-left: 1px solid #E9ECEF;
     `}
   }
-  > p {
+  > h4 {
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;
@@ -111,3 +111,11 @@ export const FormControl = styled.div`
 export const QRCodeLayout = styled.div`
   margin-bottom: 20px;
 `
+
+export const TableNumberHintText = styled.span`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  margin-bottom: 15px;
+  color: ${props => props.theme.colors.lightGray};
+`