ordering-ui-admin-external 1.0.0

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

@@ -0,0 +1,251 @@
+import React, { useState, useRef, useEffect } from 'react'
+import {
+  useLanguage,
+  DragAndDrop,
+  ExamineClick,
+  useUtils,
+  ProductTagDetails as ProductTagDetailsController
+} from 'ordering-components-admin-external'
+import { useTheme } from 'styled-components'
+import { useForm } from 'react-hook-form'
+import { DropdownButton, Dropdown } from 'react-bootstrap'
+import { Image as ImageIcon, ThreeDots } from 'react-bootstrap-icons'
+import { Alert, Confirm, Modal, ImageCrop } from '../../Shared'
+import { bytesConverter } from '../../../utils'
+import { Button, Input } from '../../../styles'
+
+import {
+  DetailsContainer,
+  Header,
+  FormInput,
+  ProductTagImage,
+  UploadImageIconContainer,
+  UploadImageIcon,
+  FormController,
+  ActionSelectorWrapper
+} from './styles'
+
+const ProductTagDetailsUI = (props) => {
+  const {
+    tagState,
+    formState,
+    handlechangeImage,
+    handleChangeInput,
+    handleUpdateProductTag,
+    handleDeleteProductTag,
+    handleAddProductTag,
+    handleChangeItem
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ optimizeImage }] = useUtils()
+
+  const formMethods = useForm()
+  const tagImageRef = useRef(null)
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
+  const [cropState, setCropState] = useState({ name: null, data: null, open: false })
+
+  const onSubmit = () => {
+    if (tagState.tag) {
+      handleUpdateProductTag()
+    } else {
+      handleAddProductTag()
+    }
+  }
+
+  const handleClickImage = () => {
+    tagImageRef.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)
+
+      handlechangeImage(files[0])
+    }
+  }
+
+  const handleDeleteClick = () => {
+    setConfirm({
+      open: true,
+      content: t('QUESTION_DELETE_PRODUCT_TAG', 'Are you sure that you want to delete this product tag?'),
+      handleOnAccept: () => {
+        handleDeleteProductTag()
+        setConfirm({ ...confirm, open: false })
+      }
+    })
+  }
+
+  const handleChangePhoto = (croppedImg) => {
+    handleChangeItem({ [cropState?.name]: croppedImg })
+    setCropState({ name: null, data: null, open: false })
+  }
+
+  useEffect(() => {
+    if (!formState.error) return
+    setAlertState({
+      open: true,
+      content: formState.error
+    })
+  }, [formState.error])
+
+  useEffect(() => {
+    if (Object.keys(formMethods.errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(formMethods.errors).map((error) => error.message)
+      })
+    }
+  }, [formMethods.errors])
+
+  return (
+    <>
+      <DetailsContainer>
+        <Header>
+          <h1>
+            {
+              tagState.tag
+                ? formState.changes?.name ?? tagState.tag?.name ?? ''
+                : t('ADD_NEW_LABEL', 'Add new label')
+            }
+          </h1>
+          <ActionSelectorWrapper>
+            <DropdownButton
+              menuAlign={theme?.rtl ? 'left' : 'right'}
+              title={<ThreeDots />}
+              id={theme?.rtl ? 'dropdown-menu-align-left' : 'dropdown-menu-align-right'}
+            >
+              <Dropdown.Item
+                onClick={() => handleDeleteClick()}
+              >
+                {t('DELETE', 'Delete')}
+              </Dropdown.Item>
+            </DropdownButton>
+          </ActionSelectorWrapper>
+        </Header>
+
+        <FormInput onSubmit={formMethods.handleSubmit(onSubmit)}>
+          <ProductTagImage
+            onClick={() => handleClickImage()}
+          >
+            <ExamineClick
+              onFiles={files => handleFiles(files)}
+              childRef={(e) => { tagImageRef.current = e }}
+              accept='image/png, image/jpeg, image/jpg'
+              disabled={formState.loading}
+            >
+              <DragAndDrop
+                onDrop={dataTransfer => handleFiles(dataTransfer.files)}
+                accept='image/png, image/jpeg, image/jpg'
+                disabled={formState.loading}
+              >
+                {
+                  (!formState.changes?.image || formState.error)
+                    ? tagState.tag?.image && (<img src={optimizeImage(tagState.tag?.image, 'h_200,c_limit')} alt='tag image' loading='lazy' />)
+                    : formState?.changes?.image && (<img src={formState?.changes?.image} alt='tag image' loading='lazy' />)
+                }
+                <UploadImageIconContainer>
+                  <UploadImageIcon>
+                    <ImageIcon />
+                  </UploadImageIcon>
+                </UploadImageIconContainer>
+              </DragAndDrop>
+            </ExamineClick>
+          </ProductTagImage>
+
+          <FormController>
+            <label>{t('NAME', 'Name')}</label>
+            <Input
+              name='name'
+              placeholder={t('NAME', 'Name')}
+              value={formState.changes?.name ?? tagState.tag?.name ?? ''}
+              onChange={e => handleChangeInput(e)}
+              ref={formMethods.register({
+                required: t(
+                  'VALIDATION_ERROR_REQUIRED',
+                  'Name is required'
+                ).replace('_attribute_', t('NAME', 'Name'))
+              })}
+              autoComplete='off'
+            />
+          </FormController>
+
+          <Button
+            borderRadius='8px'
+            color='primary'
+            type='submit'
+            disabled={formState.loading || Object.keys(formState.changes).length === 0}
+          >
+            {t('SAVE', 'Save')}
+          </Button>
+        </FormInput>
+      </DetailsContainer>
+
+      <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')}
+        width='700px'
+        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 })}
+      >
+        <ImageCrop
+          photo={cropState?.data}
+          handleChangePhoto={handleChangePhoto}
+        />
+      </Modal>
+    </>
+  )
+}
+
+export const ProductTagDetails = (props) => {
+  const tagDetailsProps = {
+    ...props,
+    UIComponent: ProductTagDetailsUI
+  }
+  return <ProductTagDetailsController {...tagDetailsProps} />
+}

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

@@ -0,0 +1,151 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const DetailsContainer = styled.div`
+  padding: 20px;
+  overflow: auto;
+  width: 100%;
+`
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 52px;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+`
+export const FormInput = styled.form`
+  min-height: calc(100% - 100px);
+  > button {
+    position: sticky;
+    top: 100%;
+    height: 44px;
+  }
+`
+export const ProductTagImage = styled.div`
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: -webkit-grab;
+  cursor: grab;
+  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
+
+  img,
+  div {
+    width: 100%;
+    border-radius: 8px;
+    height: 100%;
+    overflow: hidden;
+  };
+
+  img{
+    object-fit: cover;
+  }
+`
+export const UploadImageIconContainer = styled.div`
+  position: absolute;
+  top: 0px;
+  background: rgba(0,0,0,0.2);
+  ${({ small }) => small ? css`
+    padding: 4px;
+  ` : css`
+    padding: 8px;
+  `}
+`
+
+export const UploadImageIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #FFF;
+  border: 1px dashed #fff;
+  span {
+    margin: 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  svg {   
+    width: 45px;
+    height: 45px;
+  }
+`
+export const FormController = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 38px 0;
+
+  label {
+    font-size: 14px;
+    margin-bottom: 11px;
+  }
+`
+export const ActionSelectorWrapper = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-left: 35px;
+  ` : css`
+    margin-right: 35px;
+  `}
+  position: relative;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 5px;
+    border-radius: 8px;
+
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => props.theme.colors.secundary} !important;
+      > svg {
+        color:  #151b26;
+      }
+    }
+    &:active {
+      background: ${props => props.theme.colors.secundaryDarkContrast} !important;
+    }
+  }
+
+  .show {
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+      transform: translate(0, 36px) !important;
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        padding: 7px 20px;
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: ${props => props.theme.colors.danger};
+      }
+    }
+  }
+`

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

@@ -0,0 +1,159 @@
+import React, { useState } from 'react'
+import { useLanguage, ProductTagsList as ProductTagsController } from 'ordering-components-admin-external'
+import Skeleton from 'react-loading-skeleton'
+import { SearchBar, SideBar } from '../../Shared'
+import { Button, Checkbox } from '../../../styles'
+import { ChevronRight, Image as ImageIcon } from 'react-bootstrap-icons'
+import { ProductTagDetails } from '../ProductTagDetails'
+
+import {
+  TagsListContainer,
+  SearchBarWrapper,
+  SelectButtonGroup,
+  TagsListWrapper,
+  ProductTagWrapper,
+  TagImageWrapper,
+  AddNewLabel
+} from './styles'
+
+const ProductTagsListUI = (props) => {
+  const {
+    tagsState,
+    searchValue,
+    onSearch,
+    selectedTagIds,
+    actionState,
+    setIsExtendExtraOpen,
+    handleSuccessUpdate,
+    handleSuccessDelete,
+    handleSuccessAdd,
+    handleChangeProductTag,
+    handleSelectNoneTags,
+    handleSelectAllTags
+  } = props
+
+  const [, t] = useLanguage()
+  const [selectedTag, setSelectedTag] = useState(null)
+  const [isOpenTagDetail, setIsOpenTagDetail] = useState(false)
+
+  const handleOpenProductTagDetail = (e, tag) => {
+    const isInvalid = e.target.closest('.product-tag-checkbox')
+    if (isInvalid) return
+
+    setSelectedTag(tag)
+    setIsExtendExtraOpen(true)
+    setIsOpenTagDetail(true)
+  }
+
+  const handleCloseDetail = () => {
+    setIsOpenTagDetail(false)
+    setIsExtendExtraOpen(false)
+    setSelectedTag(null)
+  }
+
+  return (
+    <>
+      <TagsListContainer>
+        <SearchBarWrapper>
+          <SearchBar
+            isCustomLayout
+            lazyLoad
+            placeholder={t('SEARCH', 'Search')}
+            search={searchValue}
+            onSearch={val => onSearch(val)}
+          />
+        </SearchBarWrapper>
+        <SelectButtonGroup>
+          <Button
+            color='secundaryDark'
+            onClick={() => handleSelectAllTags()}
+            disabled={actionState.loading || tagsState.tags.length === 0}
+          >
+            {t('SELECT_ALL', 'Select all')}
+          </Button>
+          <Button
+            color='secundaryDark'
+            onClick={() => handleSelectNoneTags()}
+            disabled={actionState.loading || tagsState.tags.length === 0}
+          >
+            {t('SELECT_NONE', 'Select none')}
+          </Button>
+        </SelectButtonGroup>
+        {tagsState?.loading ? (
+          [...Array(10).keys()].map(i => (
+            <ProductTagWrapper key={i} isSkeleton>
+              <div>
+                <Skeleton width={20} height={20} />
+                <TagImageWrapper>
+                  <Skeleton width={32} height={32} />
+                </TagImageWrapper>
+                <Skeleton width={80} height={14} />
+              </div>
+              <Skeleton width={10} height={13} />
+            </ProductTagWrapper>
+          ))
+        ) : (
+          <TagsListWrapper>
+            {tagsState.tags.map(tag => (
+              <ProductTagWrapper
+                key={tag.id}
+                active={tag.id === selectedTag?.id}
+                onClick={(e) => handleOpenProductTagDetail(e, tag)}
+              >
+                <div>
+                  <Checkbox
+                    className='product-tag-checkbox'
+                    checked={selectedTagIds.includes(tag.id)}
+                    onChange={e => handleChangeProductTag(e.target.checked, tag.id)}
+                  />
+                  <TagImageWrapper>
+                    {tag?.image ? (
+                      <img src={tag.image} alt='' />
+                    ) : (
+                      <ImageIcon />
+                    )}
+                  </TagImageWrapper>
+                  <span className='tag-name'>{tag.name}</span>
+                </div>
+                <ChevronRight />
+              </ProductTagWrapper>
+            ))}
+          </TagsListWrapper>
+        )}
+
+        {!tagsState.loading && (
+          <AddNewLabel
+            onClick={e => handleOpenProductTagDetail(e, null)}
+          >
+            {t('ADD_NEW_LABEL', 'Add new label')}
+          </AddNewLabel>
+        )}
+      </TagsListContainer>
+
+      {isOpenTagDetail && (
+        <SideBar
+          sidebarId='product-tag-details'
+          isBorderShow
+          open={isOpenTagDetail}
+          onClose={() => handleCloseDetail()}
+        >
+          <ProductTagDetails
+            tag={selectedTag}
+            handleSuccessUpdate={handleSuccessUpdate}
+            handleSuccessDelete={handleSuccessDelete}
+            handleSuccessAdd={handleSuccessAdd}
+            onClose={handleCloseDetail}
+          />
+        </SideBar>
+      )}
+    </>
+  )
+}
+
+export const ProductTagsList = (props) => {
+  const tagsProps = {
+    ...props,
+    UIComponent: ProductTagsListUI
+  }
+  return <ProductTagsController {...tagsProps} />
+}

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

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components'
+
+export const TagsListContainer = styled.div`
+  padding: 5px 0;
+`
+export const SearchBarWrapper = styled.div`
+  margin-bottom: 15px;
+`
+export const SelectButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  padding-bottom: 15px;
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  button {
+    font-size: 12px;
+
+    &:first-child {
+      ${props => props.theme?.rtl ? css`
+        margin-left: 16px;
+      ` : css`
+        margin-right: 16px;
+      `}
+    }
+  }
+`
+export const TagsListWrapper = styled.div`
+`
+export const ProductTagWrapper = styled.div`
+  border-bottom: 1px solid ${props => props.theme.colors.borderColor};
+  padding: 15px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${({ isSkeleton }) => !isSkeleton && css`
+    cursor: pointer;
+    &:hover {
+      background-color: ${props => props.theme.colors.lightPrimary};
+    }
+  `}
+
+  ${({ active }) => active && css`
+    background-color: ${props => props.theme.colors.lightPrimary};
+    border-top: 1px solid ${props => props.theme.colors.primary};
+    border-bottom: 1px solid ${props => props.theme.colors.primary};
+  `}
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  span.tag-name {
+    font-size: 14px;
+  }
+`
+export const TagImageWrapper = styled.div`
+  margin: 0 14px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.gray};
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+  svg {
+    font-size: 16px;
+  }
+`
+export const AddNewLabel = styled.div`
+  width: fit-content;
+  cursor: pointer;
+  font-size: 14px;
+  color: ${props => props.theme.colors.lightGray};
+  margin: 15px 0;
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`