ordering-ui-admin-external 1.12.5 → 1.13.0

package/src/components/Loyalty/GiftCards/index.js

@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useUtils, PlatformProductsList as PlatformProductsListController } from 'ordering-components-admin-external'
+import { Alert, NotFoundSource, SideBar, Modal } from '../../Shared'
+// import { Switch } from '../../../styles'
+import { ChevronRight } from 'react-bootstrap-icons'
+import { useTheme } from 'styled-components'
+import Skeleton from 'react-loading-skeleton'
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { GiftCardDetail } from '../GiftCardDetail'
+
+import {
+  Container,
+  Title,
+  ProductContainer,
+  ItemContainer,
+  InfoWrapper,
+  WrapperImage,
+  ProductName,
+  Image,
+  BottomContainer,
+  NotFoundSourceWrapper,
+  PriceWrapper,
+  HeaderContainer,
+  RequireDescription
+} from './styles'
+import { Button } from '../../../styles'
+
+const GiftCardsUI = (props) => {
+  const {
+    platformProductsListState,
+    handleParentSidebarMove,
+    handleSuccessDeleteProduct,
+    handleSuccessUpdateProduct,
+    handleSuccessAddProduct
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ optimizeImage, parsePrice }] = useUtils()
+  const { width } = useWindowSize()
+
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [extraOpen, setExtraOpen] = useState(false)
+  const [selectedProduct, setSelectedProduct] = useState(null)
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: []
+    })
+  }
+
+  const handleOpenDetail = (level) => {
+    setSelectedProduct(level)
+    setExtraOpen(true)
+    if (width >= 1100) {
+      handleParentSidebarMove(550)
+    }
+  }
+
+  const handleGiftDetail = () => {
+    setExtraOpen(false)
+    setSelectedProduct(null)
+    handleParentSidebarMove(0)
+  }
+
+  useEffect(() => {
+    if (width < 1100) {
+      handleParentSidebarMove(0)
+    } else {
+      if (extraOpen) handleParentSidebarMove(550)
+    }
+  }, [width, extraOpen])
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <Title>{t('GIFT_CARD', 'Gift Card')}</Title>
+        {/* <Switch
+          defaultChecked={review?.enabled}
+          onChange={val => handleChangeEnabled(val)}
+        /> */}
+      </HeaderContainer>
+      <RequireDescription>
+        <b>{t('', 'Stripe activation is required.')}</b> <i>{t('', 'Compatible only with Wallet.')}</i>
+      </RequireDescription>
+      <ProductContainer>
+        {platformProductsListState?.loading ? (
+          <>
+            {
+              [...Array(5).keys()].map(i => (
+                <ItemContainer key={i}>
+                  <InfoWrapper>
+                    <WrapperImage>
+                      <Skeleton className='d-flex h-100' />
+                    </WrapperImage>
+                    <ProductName>
+                      <Skeleton width={100} />
+                    </ProductName>
+                  </InfoWrapper>
+                  <Skeleton width={16} height={16} />
+                </ItemContainer>
+              ))
+            }
+          </>
+        ) : (
+          <>
+            {platformProductsListState?.products?.length > 0 ? platformProductsListState?.products.map(product => (
+              <ItemContainer
+                key={product.id}
+                onClick={() => handleOpenDetail(product)}
+                active={product?.id === selectedProduct?.id}
+              >
+                <InfoWrapper>
+                  <WrapperImage>
+                    <Image bgimage={optimizeImage(product?.image || theme.images?.dummies?.product)} />
+                  </WrapperImage>
+                  <ProductName>{product?.name}</ProductName>
+                </InfoWrapper>
+                <PriceWrapper>
+                  <span>{parsePrice(product?.price)}</span>
+                  <ChevronRight />
+                </PriceWrapper>
+              </ItemContainer>
+            )) : (
+              <NotFoundSourceWrapper>
+                <NotFoundSource />
+              </NotFoundSourceWrapper>
+            )}
+          </>
+        )}
+      </ProductContainer>
+      <BottomContainer>
+        <Button
+          color='primary'
+          borderRadius='8px'
+          onClick={() => handleOpenDetail({})}
+        >
+          {t('ADD_NEW_GIFT_CARD', 'Add new gift card')}
+        </Button>
+      </BottomContainer>
+      {extraOpen && (
+        <>
+          {width >= 1100 ? (
+            <SideBar
+              isBorderShow
+              open={extraOpen}
+              defaultSideBarWidth={550}
+              sidebarId='loyaltyLevel'
+              onClose={handleGiftDetail}
+            >
+              <GiftCardDetail
+                product={selectedProduct}
+                handleSuccessDeleteProduct={handleSuccessDeleteProduct}
+                handleSuccessUpdateProduct={handleSuccessUpdateProduct}
+                handleSuccessAddProduct={handleSuccessAddProduct}
+                setSelectedProduct={setSelectedProduct}
+                onClose={handleGiftDetail}
+              />
+            </SideBar>
+          ) : (
+            <Modal
+              width='70%'
+              height='90vh'
+              padding='0px'
+              open={extraOpen}
+              onClose={handleGiftDetail}
+            >
+              <GiftCardDetail
+                product={selectedProduct}
+                handleSuccessDeleteProduct={handleSuccessDeleteProduct}
+                handleSuccessUpdateProduct={handleSuccessUpdateProduct}
+                handleSuccessAddProduct={handleSuccessAddProduct}
+                setSelectedProduct={setSelectedProduct}
+                onClose={handleGiftDetail}
+              />
+            </Modal>
+          )}
+        </>
+      )}
+      <Alert
+        title={t('LEVELS', 'Levels')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => closeAlert()}
+        onAccept={() => closeAlert()}
+        closeOnBackdrop={false}
+      />
+    </Container>
+  )
+}
+
+export const GiftCards = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: GiftCardsUI
+  }
+  return <PlatformProductsListController {...giftCardsProps} />
+}

package/src/components/Loyalty/GiftCards/styles.js

@@ -0,0 +1,147 @@
+import styled, { css } from 'styled-components'
+import React from 'react'
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+`
+
+export const Title = styled.h1`
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 30px;
+  margin: 0;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 30px;
+  ` : css`
+    margin-right: 30px;
+  `}
+`
+export const ProductContainer = styled.div`
+  border-top: 1px solid ${props => props.theme.colors.borderColor};
+`
+
+export const ItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  justify-content: space-between;
+  transition: all 0.3s linear;
+  cursor: pointer;
+
+  &:hover {
+    background: ${props => props.theme.colors.secundary};
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.backgroundInfo};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  > svg {
+    font-size: 18px;
+    color: ${props => props.theme.colors.secundaryLight};
+  }
+`
+
+export const InfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const WrapperImage = styled.div`
+  max-width: 38px;
+  max-height: 38px;
+  height: 38px;
+  width: 38px;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  `}
+  border-radius: 7.6px;
+
+  ${props => props.theme?.rtl ? css`
+    margin-right: 1px;
+  ` : css`
+    margin-left: 1px;
+  `}
+`
+
+const ImageStyled = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  object-fit: cover;
+  background-position: center;
+  border-radius: 7.6px;
+`
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}
+
+export const ProductName = styled.span`
+  font-size: 14px;
+  font-weight: 500;
+  ${props => props.theme?.rtl ? css`
+    margin-right: 25px;
+  ` : css`
+    margin-left: 25px;
+  `}
+`
+
+export const BottomContainer = styled.div`
+  width: calc(100% - 10px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 20px 0;
+
+  button {
+    height: 44px;
+  }
+`
+
+export const NotFoundSourceWrapper = styled.div`
+  > div {
+    height: initial;
+    padding: 20px;
+  }
+`
+export const PriceWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  span {
+    margin: 0 10px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+`
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${props => props.theme?.rtl ? css`
+    margin-left: 40px;
+  ` : css`
+    margin-right: 40px;
+  `}
+`
+export const RequireDescription = styled.p`
+  margin-top: 2px;
+  line-height: 21px;
+  font-size: 14px;
+  margin-bottom: 30px;
+`

package/src/components/Loyalty/PointsWalletLevels/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, useUtils, PointsWalletLevels as PointsWalletLevelsController } from 'ordering-components-admin-external'
-import { Alert, NotFoundSource, SideBar, Modal } from '../../Shared'
+import { Alert, SideBar, Modal } from '../../Shared'
 import { ChevronRight } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
@@ -15,11 +15,10 @@ import {
   WrapperImage,
   LevelName,
   Image,
-  AddNewLevelButton,
-  LevelBottomContainer,
-  NotFoundSourceWrapper
+  LevelBottomContainer
 } from './styles'
 import { LoyaltyLevelDetail } from '../LoyaltyLevelDetail'
+import { Button } from '../../../styles'
 
 const PointsWalletLevelsUI = (props) => {
   const {
@@ -92,7 +91,7 @@ const PointsWalletLevelsUI = (props) => {
           </>
         ) : (
           <>
-            {levelList?.levels?.length > 0 ? levelList?.levels.map((level, i) => (
+            {levelList?.levels?.length > 0 && levelList?.levels.map((level, i) => (
               <LevelItemContainer
                 key={i}
                 onClick={() => handleOpenDetail(level)}
@@ -106,20 +105,18 @@ const PointsWalletLevelsUI = (props) => {
                 </InfoWrapper>
                 <ChevronRight />
               </LevelItemContainer>
-            )) : (
-              <NotFoundSourceWrapper>
-                <NotFoundSource />
-              </NotFoundSourceWrapper>
-            )}
+            ))}
           </>
         )}
       </LevelContainer>
       <LevelBottomContainer>
-        <AddNewLevelButton
+        <Button
+          color='primary'
+          borderRadius='8px'
           onClick={() => handleOpenDetail({})}
         >
           {t('ADD_NEW_LEVEL', 'Add new level')}
-        </AddNewLevelButton>
+        </Button>
       </LevelBottomContainer>
       {extraOpen && (
         <>

package/src/components/Marketing/PageBanner/index.js

@@ -14,7 +14,6 @@ import {
   BannerTitleConatiner,
   BannerActionsWrapper,
   EnableWrapper,
-  AddNewBanner,
   InfoWrapper,
   InfoContent,
   SearchBarWrapper
@@ -149,11 +148,13 @@ const PageBannersUI = (props) => {
           )}
         </BannersListWrapper>
         {!bannersListState.loading && (
-          <AddNewBanner
+          <Button
+            color='primary'
+            borderRadius='8px'
             onClick={e => handleOpenBannerItemsDetail(e, {})}
           >
             {t('ADD_BANNER', 'Add banner')}
-          </AddNewBanner>
+          </Button>
         )}
       </Container>
 

package/src/components/Marketing/PageBanner/styles.js

@@ -4,6 +4,11 @@ export const Container = styled.div`
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
+
+  > button {
+    height: 44px;
+    margin-top: 20px;
+  }
 `
 export const HeaderContainer = styled.div`
   display: flex;

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-admin-external'
+import { Button, IconButton } from '../../../styles'
+import { useInfoShare } from '../../../contexts/InfoShareContext'
+import { useTheme } from 'styled-components'
+import { List as MenuIcon } from 'react-bootstrap-icons'
+import {
+  Container,
+  HeaderTitleContainer,
+  ContentLayout,
+  TextWrapper,
+  ImageBlock
+} from './styles'
+
+export const CustomProject = () => {
+  const [, t] = useLanguage()
+  const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
+  const theme = useTheme()
+
+  const showMessage = (message) => {
+    window.Intercom && window.Intercom('showNewMessage', message)
+  }
+
+  return (
+    <Container>
+      <HeaderTitleContainer>
+        {isCollapse && (
+          <IconButton
+            color='black'
+            onClick={() => handleMenuCollapse(false)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        <h1>{t('CUSTOM_PROJECT', 'Custom Project')}</h1>
+      </HeaderTitleContainer>
+      <ContentLayout>
+        <TextWrapper>
+          <h2>{t('CUSTOM_PROJECT', 'Custom Project')}</h2>
+          <h4>{t('CREATE_TAILOR_MODE', 'Create the tailor-made solution your business requires.')}</h4>
+          <p>{t('CUSTOM_PROJECT_DESC', 'Change the design of your Ordering Products, improve current functionality, or even create new software for your business, it\'s your call.')}</p>
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => showMessage('I\'m interested in a custom project, can you please provide more information?')}
+          >
+            {t('CONTACT_US', 'Contact us')}
+          </Button>
+        </TextWrapper>
+        <ImageBlock>
+          <img src={theme.images.myProducts.customProject} alt='' />
+        </ImageBlock>
+      </ContentLayout>
+    </Container>
+  )
+}

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

@@ -0,0 +1,108 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  flex: 1;
+  padding: 25px 20px;
+  box-sizing: border-box;
+  transition: all 0.5s;
+  max-height: 100vh;
+  overflow: auto;
+`
+
+export const HeaderTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+
+  > h1 {
+    font-weight: 700;
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    margin: 0px;
+    line-height: 32px;
+  }
+
+  > button {
+    ${props => props.theme?.rtl ? css`
+      margin-left: 8px;
+      margin-right: -8px;
+    ` : css`
+      margin-right: 8px;
+      margin-left: -8px;
+    `}
+
+    svg {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`
+
+export const ContentLayout = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 7.6px;
+  padding: 20px 25px;
+
+  @media (min-width: 576px) {
+    padding: 38px 40px;
+  }
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+`
+
+export const TextWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 35px;
+
+  > h2 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 48px;
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+  > h4 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+  > p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0;
+  }
+  button {
+    height: 44px;
+    margin-top: 45px;
+    width: fit-content;
+  }
+
+  @media (min-width: 768px) {
+    width: 50%;
+    margin-bottom: 0;
+  }
+`
+
+export const ImageBlock = styled.div`
+  width: 100%;
+  display: flex;
+  img {
+    width: 100%;
+  }
+  @media (min-width: 768px) {
+    width: 50%;
+    justify-content: flex-end;
+    img {
+      max-width: 650px;
+    }
+  }
+`

package/src/components/MyProducts/index.js

@@ -5,6 +5,7 @@ import { DriverApp } from './DriverApp'
 import { PosApp } from './PosApp'
 import { CallCenterApp } from './CallCenterApp'
 import { KioskApp } from './KioskApp'
+import { CustomProject } from './CustomProject'
 
 export {
   OrderingWebsite,
@@ -13,5 +14,6 @@ export {
   DriverApp,
   PosApp,
   CallCenterApp,
-  KioskApp
+  KioskApp,
+  CustomProject
 }

package/src/components/Orders/OrderDetailsHeader/index.js

@@ -118,10 +118,10 @@ export const OrderDetailsHeader = (props) => {
                   ? walletName[event?.wallet_event?.wallet?.type]?.name
                   : event?.paymethod?.name}
               </span>
-              {stripePaymethods.includes(event?.data?.gateway) && (
+              {stripePaymethods.includes(event?.data?.gateway || event?.paymethod?.gateway) && (
                 <>
                   <span> (</span>
-                  <StripeLink href={`https://dashboard.stripe.com/payments/${event?.data?.result?.pay_data}`} target='_blank'>{event?.data?.result?.pay_data}</StripeLink>
+                  <StripeLink href={`https://dashboard.stripe.com/payments/${event?.data?.result?.pay_data || event?.data?.extra?.pay_data}`} target='_blank'>{event?.data?.result?.pay_data || event?.data?.extra?.pay_data}</StripeLink>
                   <span>) </span>
                   <span> ({order?.refund_data ? t('REFUNDED', 'Refunded') : t('MOBILE_SUCCESS', 'Success')}) </span>
                 </>

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

@@ -11,8 +11,7 @@ import {
   ApiKeysListContainer,
   Header,
   ApiKeysListTable,
-  DropdownButtonWrapper,
-  AddNewButton
+  DropdownButtonWrapper
 } from './styles'
 
 const ApiKeysListUI = (props) => {
@@ -106,11 +105,13 @@ const ApiKeysListUI = (props) => {
             ))
           )}
         </ApiKeysListTable>
-        <AddNewButton
+        <Button
+          color='primary'
+          borderRadius='8px'
           onClick={() => handleAddApiKey()}
         >
           {t('ADD_API_KEY', 'Add API Key')}
-        </AddNewButton>
+        </Button>
       </ApiKeysListContainer>
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}

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

@@ -4,6 +4,11 @@ export const ApiKeysListContainer = styled.div`
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
+
+  > button {
+    height: 44px;
+    margin: 20px 0;
+  }
 `
 
 export const Header = styled.div`
@@ -126,14 +131,3 @@ export const DropdownButtonWrapper = styled.div`
     }
   }
 `
-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};
-  }
-`