ordering-ui-admin-external 1.43.73 → 1.43.75

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

@@ -102,6 +102,8 @@ export const OptionNameWrapper = styled.div`
 
 export const ExtraOptionEditContainer = styled.div`
   padding: 20px;
+  display: flex;
+  flex-direction: column;
 
   > h2 {
     font-size: 20px;
@@ -113,7 +115,12 @@ export const ExtraOptionEditContainer = styled.div`
     margin-top: 30px;
     height: 44px;
     border-radius: 8px;
-    margin-left: auto;
+    margin-left: 30px;
+  }
+
+  .buttons-container {
+    display: flex;
+    justify-content: flex-end;
   }
 `
 

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

@@ -9,6 +9,7 @@ import { DropdownButton, Dropdown } from 'react-bootstrap'
 import { useTheme } from 'styled-components'
 import { Confirm, Modal, ProgressRing } from '../../Shared'
 import { ProductDesktopPreview } from '../ProductDesktopPreview'
+import { SnoozeComponent } from '../SnoozeComponent'
 
 import {
   ProductDetailsContainer,
@@ -46,7 +47,10 @@ export const ProductSummary = (props) => {
     isExpand,
     setIsExpand,
     handleDuplicateProduct,
-    getProduct
+    getProduct,
+    formState,
+    handleChangeFormState,
+    handleUpdateClick
   } = props
 
   const [, t] = useLanguage()
@@ -58,6 +62,8 @@ export const ProductSummary = (props) => {
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isProductPreview, setIsProductPreview] = useState(false)
   const [selectedView, setSelectedView] = useState('desktop')
+  const [isProductSnooze, setIsProductSnooze] = useState(false)
+
   const isWhiteLabel = configs?.white_label_module?.value
 
   const productConfigOptions = [
@@ -156,6 +162,16 @@ export const ProductSummary = (props) => {
             />
           </LeftHeader>
           <RightHeader>
+            <ActionSelectorWrapper>
+              <Button
+                className='snooze'
+                color='lightGreen'
+                borderRadius='8px'
+                onClick={() => setIsProductSnooze(true)}
+              >
+                {t('SNOOZE', 'Snooze')}
+              </Button>
+            </ActionSelectorWrapper>
             <IconButton
               color='black'
               onClick={() => expandSideBar()}
@@ -347,6 +363,21 @@ export const ProductSummary = (props) => {
           showProductOption={showProductOption}
         />
       </Modal>
+      <Modal
+        width='85%'
+        maxWidth='1000px'
+        open={isProductSnooze}
+        onClose={() => setIsProductSnooze(false)}
+        closeOnBackdrop={false}
+      >
+        <SnoozeComponent
+          dataState={productState?.product}
+          handleUpdate={handleUpdateClick}
+          handleChangeFormState={handleChangeFormState}
+          formState={formState}
+          onClose={() => setIsProductSnooze(false)}
+        />
+      </Modal>
     </>
   )
 }

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

@@ -146,7 +146,7 @@ export const ProductConfigOption = styled.div`
   &:hover {
     background-color: ${props => props.theme.colors.lightPrimary};
   }
-  
+
   ${({ active }) => active && css`
     color: ${props => props.theme.colors.headingColor};
     background-color: ${props => props.theme.colors.lightPrimary};
@@ -162,6 +162,8 @@ export const ProductConfigOption = styled.div`
   }
 `
 export const ActionSelectorWrapper = styled.div`
+  display: flex;
+
   button {
     display: flex;
     background: transparent !important;
@@ -217,6 +219,13 @@ export const ActionSelectorWrapper = styled.div`
       }
     }
   }
+
+  .snooze {
+    background: ${props => props.theme.colors.lightGreen} !important;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-right: 5px;
+  }
 `
 export const ProductPreviewHeader = styled.div`
   display: flex;
@@ -300,7 +309,7 @@ export const FieldsItem = styled.div`
   flex-direction: column;
   width: 48%;
   margin-bottom: 25px;
-  
+
   h4 {
     margin: 0;
     font-weight: 600;

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

@@ -0,0 +1,228 @@
+import React, { useState } from 'react'
+import { Calendar4 } from 'react-bootstrap-icons'
+import DatePicker from 'react-datepicker'
+import 'react-date-range/dist/styles.css'
+import 'react-date-range/dist/theme/default.css'
+import moment from 'moment'
+import * as locales from 'react-date-range/dist/locale'
+
+import { useLanguage } from 'ordering-components-admin-external'
+import { getLocale } from '../../../utils'
+
+import {
+  SnoozeContainer,
+  SnoozeTitle,
+  SnoozeWrapper,
+  Button,
+  ButtonOptions,
+  ButtonWrapper,
+  DateContainer,
+  IconContainer,
+  InfoContainer
+} from './styles'
+
+export const SnoozeComponent = (props) => {
+  const {
+    isAutomaticUpdate,
+    hideButtons,
+    dataState,
+    handleUpdate,
+    onClose,
+    setFormState,
+    handleChangeFormState,
+    formState
+  } = props
+  const [state, t] = useLanguage()
+
+  const [selectedDate, setSelectedDate] = useState(() => {
+    const today = new Date()
+    today.setDate(today.getDate() + 1)
+    return today
+  })
+  const [openCalendar, setOpenCalendar] = useState(false)
+  const [selectedOption, setSelectedOption] = useState('')
+
+  const handleRemoveSnooze = () => {
+    handleChangeFormState && handleChangeFormState({ snooze_until: null })
+    setFormState && setFormState(prevState => ({ ...prevState, changes: { ...prevState?.changes, snooze_until: null } }))
+  }
+
+  const handleChangeOption = (value) => {
+    setSelectedOption(value)
+    if (value === 'until_date') return
+    const currentDate = new Date()
+    let newDate = null
+
+    if (value === 'off') {
+      handleRemoveSnooze()
+      return
+    }
+    if (value === '1') {
+      newDate = new Date(currentDate.getTime() + 60 * 60 * 1000)
+    } else if (value === '2') {
+      newDate = new Date(currentDate.getTime() + 2 * 60 * 60 * 1000)
+    } else if (value === '4') {
+      newDate = new Date(currentDate.getTime() + 4 * 60 * 60 * 1000)
+    } else if (value === '6') {
+      newDate = new Date(currentDate.getTime() + 6 * 60 * 60 * 1000)
+    } else if (value === '12') {
+      newDate = new Date(currentDate.getTime() + 12 * 60 * 60 * 1000)
+    } else if (value === 'indefinitely') {
+      newDate = new Date(currentDate.setFullYear(currentDate.getFullYear() + 2))
+    }
+
+    if (newDate) {
+      handleChangeFormState && handleChangeFormState({ snooze_until: moment(newDate).utc().format('YYYY-MM-DD HH:mm:ss') })
+      setFormState && setFormState(prevState => ({
+        ...prevState,
+        changes: {
+          ...prevState?.changes,
+          snooze_until: moment(newDate).utc().format('YYYY-MM-DD HH:mm:ss')
+        }
+      }))
+    }
+  }
+
+  const handleSelectDate = (date) => {
+    const currentDate = new Date()
+    const diffInHours = Math.abs((date - currentDate) / 36e5)
+
+    const tolerance = 0.15 // 10 minutes tolerance
+
+    let matchedOption = ''
+
+    if (Math.abs(diffInHours - 1) <= tolerance) {
+      matchedOption = '1'
+    } else if (Math.abs(diffInHours - 2) <= tolerance) {
+      matchedOption = '2'
+    } else if (Math.abs(diffInHours - 4) <= tolerance) {
+      matchedOption = '4'
+    } else if (Math.abs(diffInHours - 6) <= tolerance) {
+      matchedOption = '6'
+    } else if (Math.abs(diffInHours - 12) <= tolerance) {
+      matchedOption = '12'
+    }
+
+    setSelectedDate(date)
+    if (matchedOption) {
+      setSelectedOption(matchedOption)
+    }
+
+    handleChangeFormState && handleChangeFormState({ snooze_until: moment(date).utc().format('YYYY-MM-DD HH:mm:ss') })
+    setFormState && setFormState(prevState => ({
+      ...prevState,
+      changes: { ...prevState?.changes, snooze_until: moment(date).utc().format('YYYY-MM-DD HH:mm:ss') }
+    }))
+  }
+
+  const handleUpdateClick = () => {
+    onClose && onClose()
+    if (isAutomaticUpdate) {
+      handleUpdate && handleUpdate(formState?.changes)
+      return
+    }
+    if (Object.keys(formState?.changes)?.length) {
+      handleUpdate && handleUpdate()
+    }
+  }
+
+  const dateOptions = ['or', 'until_date']
+
+  const snoozeOptions = [
+    {
+      value: 'off',
+      content: t('SNOOZE_OFF', 'Off')
+    },
+    {
+      value: '1',
+      content: t('SNOOZE_ONE_HOUR', '1H')
+    },
+    {
+      value: '2',
+      content: t('SNOOZE_TWO_HOUR', '2H')
+    },
+    {
+      value: '4',
+      content: t('SNOOZE_FOUR_HOUR', '4H')
+    },
+    {
+      value: '6',
+      content: t('SNOOZE_SIX_HOUR', '6H')
+    },
+    {
+      value: '12',
+      content: t('SNOOZE_TWELVE_HOUR', '12H')
+    },
+    {
+      value: 'indefinitely',
+      content: t('SNOOZE_INDEFINITELY', 'Indefinitely')
+    },
+    {
+      value: 'or',
+      content: t('SNOOZE_OR', 'or')
+    },
+    {
+      value: 'until_date'
+    }
+  ]
+
+  return (
+    <>
+      <SnoozeContainer openCalendar={openCalendar}>
+        <SnoozeTitle>
+          {t('SNOOZE_TITLE', 'Disable for:')}
+        </SnoozeTitle>
+        <SnoozeWrapper>
+          {snoozeOptions?.map((option, i) => (
+            <div key={i}>
+              {option.value === 'until_date' && (
+                <DateContainer active={option.value === selectedOption || openCalendar}>
+                  <IconContainer>
+                    <Calendar4 />
+                  </IconContainer>
+                  <DatePicker
+                    locale={getLocale(state?.language?.code, locales)}
+                    selected={selectedDate}
+                    minDate={new Date()}
+                    onChange={handleSelectDate}
+                    onCalendarOpen={() => {
+                      setSelectedOption('until_date')
+                      setOpenCalendar(true)
+                    }}
+                    onCalendarClose={() => setOpenCalendar(false)}
+                    showTimeSelect
+                    timeFormat='HH:mm'
+                    timeIntervals={15}
+                    timeCaption='Time'
+                    dateFormat='MMMM d, yyyy HH:mm'
+                  />
+                </DateContainer>
+              )}
+              {option.value === 'or' && (
+                <p>{option.content}</p>
+              )}
+              {!dateOptions.includes(option.value) && (
+                <ButtonOptions
+                  onClick={() => handleChangeOption(option.value)}
+                  active={option.value === selectedOption}
+                >{option.content}
+                </ButtonOptions>
+              )}
+            </div>
+          ))}
+        </SnoozeWrapper>
+        <InfoContainer hasSnooze={dataState?.snooze_until}>
+          {!hideButtons && (
+            <ButtonWrapper>
+              <Button color='primarys' onClick={() => handleUpdateClick()}>{selectedOption === 'off' ? t('DISABLE_SNOOZE', 'Disable Snooze') : t('SNOOZE_SAVE', 'Snooze')}</Button>
+              <Button onClick={() => onClose()}>{t('CANCEL', 'Cancel')}</Button>
+            </ButtonWrapper>
+          )}
+          {dataState?.snooze_until && (
+            <span><strong>{t('SNOOZED_UNTIL', 'Snoozed until:')}</strong> {moment.utc(dataState?.snooze_until).local().format('YYYY-MM-DD HH:mm')}</span>
+          )}
+        </InfoContainer>
+      </SnoozeContainer>
+    </>
+  )
+}

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

@@ -0,0 +1,242 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const SnoozeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  transition: all 3s ease-in;
+
+  ${({ openCalendar }) => openCalendar && css`
+    height: 362px;
+  `}
+`
+
+export const SnoozeTitle = styled.div`
+  display: flex;
+  font-size: 16;
+  font-weight: 700;
+  margin-bottom: 30px;
+`
+
+export const SnoozeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  > div {
+    margin: auto 0;
+    > p {
+      margin: 0;
+    }
+  }
+
+  @media (min-width: 862px) {
+    flex-direction: row;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+
+  > button {
+    margin-right: 20px;
+  }
+`
+
+export const Button = styled.button`
+  height: 44px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  color: ${props => props.theme.colors.primary};
+  border-color: ${props => props.theme.colors.primary};
+  border: 1px solid #CCC;
+  border-radius: 8px;
+  line-height: 30px;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all .2s ease-in;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  ${({ active }) => active && css`
+    background: ${props => darken(0.07, props.theme.colors.primary)} !important;
+    color: #FFF !important;
+  `}
+  ${({ color }) => color === 'primary' && css`
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primaryContrast};
+    border-color: ${props => props.theme.colors.primary};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.primary)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.primary)};
+    }
+    ${({ outline }) => outline && css`
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+      color: ${props => props.theme.colors.primary};
+      border-color: ${props => props.theme.colors.primary};
+      &:active {
+        color: ${props => props.theme.colors.primaryContrast};
+        background: ${props => props.theme.colors.primary};
+      }
+      &:hover {
+        background: ${props => darken(0.07, props.theme.colors.primary)};
+        color: #FFF;
+      }
+    `}
+    ${({ circle }) => circle && css`
+      background: ${props => props.theme.colors.primary};
+      color: ${props => props.theme.colors.primaryContrast};
+      border-color: ${props => props.theme.colors.primary};
+      padding: 0;
+      width: 34px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      border-radius: 50%;
+      &:active {
+        border-color: ${props => darken(0.07, props.theme.colors.primary)};
+        background: ${props => darken(0.07, props.theme.colors.primary)};
+      }
+    `}
+    ${({ circle, outline }) => circle && outline && css`
+      background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+      color: ${props => props.theme.colors.primary};
+      border-color: ${props => props.theme.colors.primary};
+      padding: 0;
+      width: 34px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      border-radius: 50%;
+      &:active {
+        border-color: ${props => props.theme.colors.primary};
+        background: ${props => props.theme.colors.primary};
+      }
+    `}
+  `}
+`
+
+export const ButtonOptions = styled.button`
+  min-width: 65px;
+  height: 44px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  color: ${props => props.theme.colors.headingColor};
+  border-color: ${props => props.theme.colors.headingColor};
+  border: 1px solid ${props => props.theme.colors.headingColor};
+  border-radius: 8px;
+  line-height: 30px;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all .2s ease-in;
+
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &:hover {
+    color: ${props => darken(0.07, props.theme.colors.primary)} !important;
+    border-color: ${props => props.theme.colors.primary};
+  }
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.primary} !important;
+    border-color: ${props => props.theme.colors.primary};
+    border-width: 2px;
+  `}
+`
+
+export const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 44px;
+  background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
+  color: ${props => props.theme.colors.headingColor};
+  border-color: ${props => props.theme.colors.headingColor};
+  border: 1px solid ${props => props.theme.colors.headingColor};
+  border-radius: 8px;
+  line-height: 30px;
+
+  ${({ active }) => active && css`
+    color: ${props => props.theme.colors.primary} !important;
+    border-color: ${props => props.theme.colors.primary} !important;
+    border-width: 2px;
+
+    input {
+      color: ${props => props.theme.colors.primary} !important;
+    }
+  `}
+
+  input {
+    width: auto;
+    min-width: 220px;
+    border: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-size: 14px;
+    cursor: pointer;
+    outline: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: all .2s ease-in;
+  }
+
+  ${props => props.theme?.rtl ? css`
+    span {
+      margin-left: 10px;
+    }
+  ` : css`
+    span {
+      margin-right: 10px;
+    }
+  `}
+
+  .react-datepicker-popper {
+    @media (min-width: 820px) {
+      transform: translate3d(-20px, 114px, 0px) !important;
+      right: 0px;
+      left: unset !important;
+    }
+  }
+  .react-datepicker__triangle {
+    display: none;
+  }
+`
+
+export const IconContainer = styled.div`
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  margin-left: 10px;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all .2s ease-in;
+`
+
+export const InfoContainer = styled.div`
+  display: flex;
+  align-items: end;
+  justify-content: ${({ hasSnooze }) => hasSnooze ? 'space-between' : 'flex-start'};
+
+  ${({ hideButtons }) => hideButtons && css`
+    justify-content: flex-end;
+  `}
+`

package/src/styles/Buttons/index.js

@@ -219,6 +219,17 @@ export const Button = styled.button`
       background: ${props => darken(0.1, props.theme.colors.lightPrimary)};
     }
   `}
+  ${({ color }) => color === 'lightGreen' && css`
+    background: ${props => props.theme.colors.lightGreen};
+    color: #00D27A;
+    border-color: ${props => props.theme.colors.lightGreen};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.lightGreen)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.lightGreen)};
+    }
+  `}
   ${({ color }) => color === 'warning' && css`
     background: ${props => props.theme.colors.warning};
     color: #FFF;

package/template/pages/BusinessProductsList/index.js

@@ -42,7 +42,7 @@ export const BusinessProductsList = (props) => {
         return events.emit('go_to_page', {
           page: 'store',
           params: { store: slug },
-          search: `?category=${category}`,
+          search: `category=${category}`,
           replace: true
         })
       }