ordering-ui-admin-external 1.9.0 → 1.11.0

package/src/components/Marketing/BannerImageDetails/SelectBusinessProducts/index.js

@@ -0,0 +1,209 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+  useUtils,
+  useApi,
+  BusinessProductsListing as BusinessProductsListingController
+} from 'ordering-components-admin-external'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
+import GoTriangleDown from '@meronex/icons/go/GoTriangleDown'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+
+import {
+  Container,
+  AccordionSection,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  WrapperImage,
+  Image,
+  SkeletonWrapper,
+  RadioButton
+} from './styles'
+
+const CategoryTreeNode = (props) => {
+  const {
+    category,
+    index,
+    selectedProductId,
+    setSelectedProductId,
+    subCategoriesList,
+    selectedCategoryId,
+    setSelectedCategoryId
+  } = props
+
+  const [{ optimizeImage }] = useUtils()
+  const theme = useTheme()
+
+  const content = useRef(null)
+  const checkboxRef = useRef(null)
+  const categoryRef = useRef(null)
+
+  const [setActive, setActiveState] = useState('')
+  const [setRotate, setRotateState] = useState('accordion__icon')
+
+  const toggleAccordion = (e) => {
+    const isActionsClick = categoryRef.current?.contains(e.target) || checkboxRef.current?.contains(e.target)
+    if (isActionsClick) return
+    setActiveState(setActive === '' ? 'active' : '')
+    setRotateState(
+      setActive === 'active' ? 'accordion__icon' : 'accordion__icon rotate'
+    )
+  }
+
+  const handleClickProduct = (product) => {
+    setSelectedProductId(product.id)
+    setSelectedCategoryId(product.category_id)
+  }
+
+  return (
+    <>
+      {subCategoriesList.find(_category => _category.id === category.id)?.productIds?.length > 0 && (
+        <AccordionSection>
+          <Accordion
+            onClick={(e) => toggleAccordion(e, category.id)}
+          >
+            <AccordionItem
+              margin={20 * index}
+            >
+              <GoTriangleDown className={setRotate} />
+              <div>
+                <span>{category.name}</span>
+              </div>
+            </AccordionItem>
+          </Accordion>
+          <AccordionContent
+            ref={content}
+            style={{
+              maxHeight: !setActive && '0px'
+            }}
+          >
+            {category?.products.filter(product => product?.enabled).map(product => (
+              <AccordionItem
+                key={product.id}
+                margin={20 * (index + 1)}
+                isProduct
+              >
+                <div>
+                  <RadioButton
+                    ref={checkboxRef}
+                    onClick={() => handleClickProduct(product)}
+                  >
+                    {(selectedCategoryId === product?.category_id && selectedProductId === product?.id) ? (
+                      <RecordCircleFill color={theme.colors.primary} />
+                    ) : (
+                      <Circle color={theme.colors.secundaryLight} />
+                    )}
+                  </RadioButton>
+                  <WrapperImage>
+                    <Image bgimage={optimizeImage(product?.images || theme.images?.dummies?.product, 'h_50,c_limit')} />
+                  </WrapperImage>
+                  <span>{product.name}</span>
+                </div>
+              </AccordionItem>
+            ))}
+            {(category?.subcategories && category?.subcategories?.length > 0) && (
+              category.subcategories.map(subCategory => (
+                <CategoryTreeNode
+                  {...props}
+                  key={subCategory.id}
+                  category={subCategory}
+                  index={index + 1}
+                />
+              ))
+            )}
+          </AccordionContent>
+        </AccordionSection>
+      )}
+    </>
+  )
+}
+
+const SelectBusinessProductsUI = (props) => {
+  const {
+    businessState,
+    selectedProductId,
+    setSelectedProductId,
+    selectedCategoryId,
+    setSelectedCategoryId
+  } = props
+
+  const [subCategoriesList, setSubCategoriesList] = useState([])
+
+  useEffect(() => {
+    if (businessState.loading) return
+    const _subCategoriesList = []
+    const iterateCategories = (categories) => {
+      return (
+        categories?.length > 0 && categories?.forEach(category => {
+          let productIds = []
+          const _productIds = category.products?.reduce((ids, product) => [...ids, product.id], [])
+          productIds = [...productIds, ..._productIds]
+          if (category?.subcategories?.length) {
+            category.subcategories.forEach(function iterate (category) {
+              const _productIds = category.products?.reduce((ids, product) => [...ids, product.id], [])
+              productIds = [...productIds, ..._productIds]
+              Array.isArray(category?.subcategories) && category.subcategories.forEach(iterate)
+            })
+          }
+
+          _subCategoriesList.push({
+            id: category.id,
+            name: category.name,
+            productIds: productIds
+          })
+          iterateCategories(category.subcategories)
+        })
+      )
+    }
+    iterateCategories(businessState.business?.categories)
+    setSubCategoriesList(_subCategoriesList)
+  }, [businessState.business?.categories])
+
+  return (
+    <Container>
+      {businessState?.loading ? (
+        <>
+          {[...Array(10).keys()].map(i => (
+            <SkeletonWrapper key={i}>
+              <Skeleton width={16} height={16} />
+              <Skeleton width={120} height={20} />
+            </SkeletonWrapper>
+          ))}
+        </>
+      ) : (
+        businessState.business?.categories?.filter(category => category?.enabled).sort((a, b) => a.rank - b.rank).map(category => (
+          <CategoryTreeNode
+            subCategoriesList={subCategoriesList}
+            key={category.id}
+            index={0}
+            category={category}
+            selectedProductId={selectedProductId}
+            setSelectedProductId={setSelectedProductId}
+            selectedCategoryId={selectedCategoryId}
+            setSelectedCategoryId={setSelectedCategoryId}
+          />
+        ))
+      )}
+    </Container>
+  )
+}
+
+export const SelectBusinessProducts = (props) => {
+  const [ordering] = useApi()
+  const [isInitialRender, setIsInitialRender] = useState(false)
+
+  const businessProductslistingProps = {
+    ...props,
+    ordering,
+    UIComponent: SelectBusinessProductsUI,
+    isInitialRender,
+    isAllCategoryProducts: true,
+    isSearchByName: true,
+    isSearchByDescription: true,
+    handleUpdateInitialRender: (val) => setIsInitialRender(val)
+  }
+  return (
+    <BusinessProductsListingController {...businessProductslistingProps} />
+  )
+}

package/src/components/Marketing/BannerImageDetails/SelectBusinessProducts/styles.js

@@ -0,0 +1,130 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin: 20px 0;
+  height: calc(100% - 100px);
+  overflow-x: hidden;
+`
+
+export const AccordionSection = styled.div`
+`
+
+const AccordionStyled = styled.div`
+  cursor: pointer;
+  transition: background-color 0.6s ease;
+
+  .rotate {
+    transform: rotate(180deg);
+  }
+
+  .accordion__icon {
+    transition: transform 0.6s ease;
+    ${props => props.theme?.rtl ? css`
+      margin-left: 14px;
+    ` : css`
+      margin-right: 14px;
+    `}
+  }
+
+  @media (min-width: 411px){
+    flex-direction: row;
+  }
+`
+
+export const Accordion = (props) => {
+  const style = {}
+  return (
+    <AccordionStyled
+      {...props}
+      style={style}
+    >
+      {props.children}
+    </AccordionStyled>
+  )
+}
+
+export const AccordionItem = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+
+  > div {
+    display: flex;
+    align-items: center;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+      margin: 0 12px;
+    }
+  }
+
+  ${({ isProduct }) => isProduct && css`
+    > div {
+      span {
+        font-weight: 400;
+      }
+    }
+  `}
+
+  ${props => props.theme?.rtl ? css`
+    margin-right: ${({ margin }) => `${margin}px` || '0px'};
+  ` : css`
+    margin-left: ${({ margin }) => `${margin}px` || '0px'};
+  `}
+`
+
+export const AccordionContent = styled.div`
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+  width: 100%;
+`
+
+export const WrapperImage = styled.div`
+  max-width: 38px;
+  max-height: 38px;
+  height: 38px;
+  width: 38px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  margin: 0 10px;
+`
+
+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: 8px;
+`
+
+export const Image = (props) => {
+  return (
+    <ImageStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </ImageStyled>
+  )
+}
+export const SkeletonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  > * {
+    &:not(:first-child) {
+      margin: 0 5px;
+    }
+  }
+`
+export const RadioButton = styled.div`
+  cursor: pointer;
+`

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

@@ -0,0 +1,237 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+  useLanguage,
+  ExamineClick,
+  DragAndDrop,
+  useUtils,
+  BannerImageDetails as BannerImageDetailsController
+} from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { CardImage, ThreeDots } from 'react-bootstrap-icons'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
+import { Select } from '../../../styles/Select/FirstSelect'
+import { BusinessLink } from './BusinessLink'
+import { ProductLink } from './ProductLink'
+import { bytesConverter } from '../../../utils'
+import { Alert, Modal, ImageCrop, Confirm } from '../../Shared'
+import { Button } from '../../../styles'
+
+import {
+  Container,
+  HeaderContainer,
+  LeftHeader,
+  RightHeader,
+  DropDownWrapper,
+  BannerImage,
+  UploadImageIconContainer,
+  FormController,
+  SelectWrapper
+} from './styles'
+
+const BannerImageDetailsUI = (props) => {
+  const {
+    aspectRatio,
+    imageState,
+    changesState,
+    handleChangeItem,
+    selectedLinkType,
+    setSelectedLinkType,
+    handleDeleteBannerItem,
+    handleSaveImage,
+    businessList
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const linkOptions = [
+    { value: 'product', content: t('PRODUCT_ID', 'Product') },
+    { value: 'business', content: t('BUSINESS', 'Business') }
+  ]
+
+  const imageRef = useRef(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+
+  const handleClickImage = () => {
+    imageRef.current.click()
+  }
+
+  const handleFiles = (files) => {
+    if (files.length === 1) {
+      const type = files[0].type.split('/')[0]
+      if (type !== 'image') {
+        setAlertState({
+          open: true,
+          content: [t('ERROR_ONLY_IMAGES', 'Only images can be accepted')]
+        })
+        return
+      }
+
+      if (bytesConverter(files[0]?.size) > 2048) {
+        setAlertState({
+          open: true,
+          content: [t('IMAGE_MAXIMUM_SIZE', 'The maximum image size is 2 megabytes')]
+        })
+        return
+      }
+
+      const reader = new window.FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        setCropState({ name: 'image', data: reader.result, open: true })
+      }
+      reader.onerror = error => console.log(error)
+
+      if (imageRef.current?.value) imageRef.current.value = null
+    }
+  }
+
+  const handleChangePhoto = (croppedImg) => {
+    handleChangeItem({ [cropState?.name]: croppedImg, type: 'image' })
+    setCropState({ name: null, data: null, open: false })
+  }
+
+  const onDeleteImage = (id) => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_ITEM', 'Are you sure to delete this _item_?').replace('_item_', t('IMAGE', 'Image')),
+      handleOnAccept: async () => {
+        setConfirm({ ...confirm, open: false })
+        await handleDeleteBannerItem(imageState.image?.id)
+        props.onClose && props.onClose()
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!imageState?.error || imageState.loading) return
+    setAlertState({
+      open: true,
+      content: imageState?.error
+    })
+  }, [imageState.error])
+
+  return (
+    <Container>
+      <HeaderContainer>
+        <LeftHeader>
+          <h1>{t('IMAGE_DETAIL', 'Image detail')}</h1>
+        </LeftHeader>
+        <RightHeader>
+          <DropDownWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+            >
+              <Dropdown.Item
+                onClick={() => onDeleteImage()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </DropDownWrapper>
+        </RightHeader>
+      </HeaderContainer>
+      <BannerImage
+        isWebBanner={aspectRatio !== 1}
+        onClick={e => handleClickImage()}
+      >
+        <ExamineClick
+          onFiles={files => handleFiles(files)}
+          accept='image/png, image/jpeg, image/jpg'
+          childRef={(e) => { imageRef.current = e }}
+          disabled={changesState.loading}
+        >
+          <DragAndDrop
+            onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+            accept='image/png, image/jpeg, image/jpg'
+            disabled={changesState.loading}
+          >
+            {
+              changesState?.changes?.image
+                ? (<img src={changesState?.changes?.image} alt='item image' loading='lazy' />)
+                : imageState.image?.url && (<img src={optimizeImage(imageState.image?.url, 'h_130,c_limit')} alt='item image' loading='lazy' />)
+            }
+            <UploadImageIconContainer>
+              <CardImage />
+              <p>{t('DRAG_AND_DROP', 'Drag and drop')}</p>
+            </UploadImageIconContainer>
+          </DragAndDrop>
+        </ExamineClick>
+      </BannerImage>
+      <FormController>
+        <label>{t('HOW_TO_LINK_IMAGE', 'How to link image')}</label>
+        <SelectWrapper>
+          <Select
+            placeholder={t('SELECT_OPTION', 'Select option')}
+            defaultValue={selectedLinkType}
+            options={linkOptions}
+            onChange={val => setSelectedLinkType(val)}
+          />
+        </SelectWrapper>
+      </FormController>
+      {selectedLinkType === 'business' && (
+        <BusinessLink {...props} />
+      )}
+      {selectedLinkType === 'product' && (
+        <ProductLink {...props} />
+      )}
+
+      <Button
+        borderRadius='8px'
+        color='primary'
+        disabled={businessList.loading || imageState.loading}
+        onClick={handleSaveImage}
+      >
+        {t('SAVE', 'Save')}
+      </Button>
+
+      <Alert
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => setAlertState({ open: false, content: [] })}
+        onAccept={() => setAlertState({ open: false, content: [] })}
+        closeOnBackdrop={false}
+      />
+      <Confirm
+        title={t('WEB_APPNAME', 'Ordering')}
+        content={confirm.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={confirm.open}
+        onClose={() => setConfirm({ ...confirm, open: false })}
+        onCancel={() => setConfirm({ ...confirm, open: false })}
+        onAccept={confirm.handleOnAccept}
+        closeOnBackdrop={false}
+      />
+      <Modal
+        width='700px'
+        height='80vh'
+        padding='30px'
+        title={t('IMAGE_CROP', 'Image crop')}
+        open={cropState?.open}
+        onClose={() => setCropState({ ...cropState, open: false })}
+        className='ordering-img-crop'
+      >
+        <ImageCrop
+          aspectRatio={aspectRatio}
+          photo={cropState?.data}
+          handleChangePhoto={handleChangePhoto}
+        />
+      </Modal>
+    </Container>
+  )
+}
+
+export const BannerImageDetails = (props) => {
+  const linkProps = {
+    ...props,
+    UIComponent: BannerImageDetailsUI
+  }
+  return <BannerImageDetailsController {...linkProps} />
+}