ordering-ui-admin-external 1.24.2 → 1.25.0

package/src/components/CartRecovery/RecoveryActionAdd/styles.js

@@ -0,0 +1,179 @@
+import styled, { css } from 'styled-components'
+
+export const RecoveryActionAddContainer = styled.form`
+`
+export const CardContainer = styled.div`
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 7.6px;
+  padding: 25px 38px;
+  margin-bottom: 29px;
+
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 29px 0;
+  }
+`
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 60px 0;
+
+  button {
+    border-radius: 8px;
+    height: 44px;
+    &:first-child {
+      margin: 0 10px;
+    }
+  }
+`
+
+export const InputWrapper = styled.div`
+  margin-bottom: 25px;
+
+  label {
+    font-size: 14px;
+    line-height: 24px;
+    margin-bottom: 10px;
+  }
+
+  input, textarea {
+    width: 100%;
+  }
+
+  .select {
+    border: 1px solid ${props => props.theme.colors.borderColor};
+    padding: 9px 0;
+  }
+`
+
+export const LastTimeWrapper = styled.div`
+  margin-top: 40px;
+
+  > h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 23px;
+  }
+`
+
+export const TypeWrapper = styled.div`
+  margin-bottom: 15px;
+`
+
+export const ParentCheckBoxWrapper = styled.div`
+  > div {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    width: fit-content;
+
+    svg {
+      font-size: 16px;
+      color: ${props => props.theme.colors.secundaryLight};
+      &.checked-icon {
+        color: ${props => props.theme.colors.primary};
+      }
+    }
+    
+    > span {
+      font-size: 14px;
+      line-height: 24px;
+      margin-left: 13px;
+      ${props => props.theme.rtl && css`
+        margin-right: 13px;
+        margin-left: 0px;
+      `}
+    }
+  }
+`
+
+export const TimeContent = styled.div`
+  padding: 15px 0px 10px 0px; 
+`
+export const TimeBlock = styled.div`
+  display: flex;
+  border: 1px solid ${props => props.theme.colors.gray};
+  box-sizing: border-box;
+  border-radius: 7.6px;
+  width: fit-content;
+  align-items: center;
+  overflow: hidden;
+
+  > span {
+    color: ${props => props.theme?.colors.secundaryLight};
+  }
+  
+  > select {
+    height: 40px;
+    padding: 0px 10px;
+    border: none;
+    outline: none;
+    font-size: 14px;
+    color: ${props => props.theme?.colors.secundaryLight};
+    appearance: none;
+  }
+`
+
+export const DaysContent = styled.div`
+  padding: 15px 0px 10px 0px;
+
+  input {
+    width: 100%;
+    height: 44px;
+    border-radius: 8px !important;
+    padding: 0px 15px !important;
+    outline: none !important;
+    border: 1px solid ${props => props.theme.colors.gray} !important;
+    padding-right: 25px;
+    ${props => props.theme?.rtl && css`
+      padding-left: 25px;
+      padding-right: 15px;
+    `}
+    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      color: ${props => props.theme.colors.secundaryLight};
+      opacity: 1; /* Firefox */
+    }
+
+    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+
+    &::-ms-input-placeholder { /* Microsoft Edge */
+      color: ${props => props.theme.colors.secundaryLight};
+    }
+  }
+
+  b {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    &:nth-child(2) {
+      i {
+        border: none !important;
+        box-shadow: -1px 1px 0 ${props => props.theme.colors.secundaryLight};
+        transform: rotate(135deg);
+        width: 7px !important;
+        height: 7px !important;
+        margin: 0ex 0px 0px -0.56ex !important;
+      }
+    }
+    &:last-child {
+      i {
+        border: none !important;
+        box-shadow: -1px 1px 0 ${props => props.theme.colors.secundaryLight};
+        transform: rotate(-45deg);
+        width: 7px !important;
+        height: 7px !important;
+        margin: -0.9ex 0px 0px -0.56ex !important;
+      }
+    }
+  }
+`
+export const Option = styled.div`
+  font-size: 14px;
+  line-height: 24px;
+`

package/src/components/CartRecovery/RecoveryActionList/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import { useLanguage } from 'ordering-components-admin-external'
 import { ColumnAllowSettingPopover, Pagination } from '../../Shared'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { useTheme } from 'styled-components'
 
 import {
@@ -11,8 +11,7 @@ import {
   Tbody,
   SwitchWrapper,
   DragImageWrapper,
-  PagesBottomContainer,
-  AddNewPageButton
+  PagesBottomContainer
 } from './styles'
 
 export const RecoveryActionList = (props) => {
@@ -174,11 +173,11 @@ export const RecoveryActionList = (props) => {
       </Container>
       {!recoveryActionList.loading && (
         <PagesBottomContainer>
-          <AddNewPageButton
+          <LinkButton
             onClick={() => handleOpenDetail({})}
           >
             {t('ADD_NEW_RECOVERY_ACTION', 'Add new recovery action')}
-          </AddNewPageButton>
+          </LinkButton>
           {recoveryActionList?.actions?.length > 0 && (
             <Pagination
               currentPage={paginationProps?.currentPage}

package/src/components/CartRecovery/RecoveryActionList/styles.js

@@ -192,9 +192,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0;
 `
-
-export const AddNewPageButton = styled.div`
-  cursor: pointer;
-  font-size: 14px;
-  color: ${props => props.theme.colors.primary};
-`

package/src/components/CartRecovery/RecoveryActionListing/index.js

@@ -5,6 +5,7 @@ import { RecoveryActionHeader } from '../RecoveryActionHeader'
 import { RecoveryActionList } from '../RecoveryActionList'
 import { SideBar } from '../../Shared'
 import { RecoveryActionDetail } from '../RecoveryActionDetail'
+import { RecoveryActionAdd } from '../RecoveryActionAdd'
 
 import {
   RecoveryActionsContainer
@@ -16,10 +17,12 @@ const RecoveryActionListingUI = (props) => {
   const [isOpenDetail, setIsOpenDetail] = useState(false)
   const [selectedAction, setSelectedAction] = useState(null)
   const [selectedActionId, setSelectedActionId] = useState(null)
+  const [isAddMode, setIsAddMode] = useState(false)
 
   const handleCloseDetail = () => {
     setIsOpenDetail(false)
     setSelectedAction(null)
+    setIsAddMode(false)
     history.replace(`${location.pathname}`)
   }
 
@@ -27,6 +30,13 @@ const RecoveryActionListingUI = (props) => {
     setSelectedAction(action)
     setSelectedActionId(action?.id)
     setIsOpenDetail(true)
+    if (!Object.keys(action || {}).length) {
+      setIsAddMode(true)
+      history.replace(`${location.pathname}`)
+      return
+    } else {
+      setIsAddMode(false)
+    }
     if (action && !isInitialRender) {
       history.replace(`${location.pathname}?id=${action.id}`)
     }
@@ -48,13 +58,22 @@ const RecoveryActionListingUI = (props) => {
           {...props}
           handleOpenDetail={handleOpenDetail}
         />
-        <RecoveryActionList
-          {...props}
-          handleOpenDetail={handleOpenDetail}
-          selectedAction={selectedAction}
-        />
+        {!isAddMode ? (
+          <RecoveryActionList
+            {...props}
+            handleOpenDetail={handleOpenDetail}
+            selectedAction={selectedAction}
+          />
+        ) : (
+          <RecoveryActionAdd
+            {...props}
+            action={selectedAction}
+            actionId={selectedActionId}
+            onClose={() => handleCloseDetail()}
+          />
+        )}
       </RecoveryActionsContainer>
-      {isOpenDetail && (
+      {isOpenDetail && !isAddMode && (
         <SideBar
           open={isOpenDetail}
           onClose={() => handleCloseDetail()}

package/src/components/CartRecovery/RecoveryActionListing/styles.js

@@ -5,5 +5,6 @@ export const RecoveryActionsContainer = styled.div`
   padding: 20px;
   box-sizing: border-box;
   transition: all 0.5s;
-  overflow: hidden;
+  max-height: 100vh;
+  overflow: auto;
 `

package/src/components/CartRecovery/RecoveryNotificationList/index.js

@@ -3,7 +3,7 @@ import { useLanguage, RecoveryNotificationList as RecoveryNotificationListContro
 import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import { Modal, Alert } from '../../Shared'
-import { Switch, Button } from '../../../styles'
+import { Switch, Button, LinkButton } from '../../../styles'
 import { SingleRecoveryNotification } from '../SingleRecoveryNotification'
 
 import {
@@ -122,7 +122,11 @@ const RecoveryNotificationListUI = (props) => {
                       </EmailPreviewHeader>
                       <EmailPreviewContent>
                         <h2>{notification?.title}</h2>
-                        <p>{notification.body}</p>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: (notification.body)
+                          }}
+                        />
                       </EmailPreviewContent>
                     </EmailPreviewWrapper>
                   )}
@@ -154,7 +158,7 @@ const RecoveryNotificationListUI = (props) => {
               </NotificationBlock>
             ))}
             <AddNewNotificationButton>
-              <span onClick={() => setIsAddModal(true)}>{t('ADD_NEW_NOTIFICATION', 'Add new notification')}</span>
+              <LinkButton onClick={() => setIsAddModal(true)}>{t('ADD_NEW_NOTIFICATION', 'Add new notification')}</LinkButton>
             </AddNewNotificationButton>
           </>
         )}

package/src/components/CartRecovery/RecoveryNotificationList/styles.js

@@ -48,7 +48,7 @@ export const PreivewEditWrapper = styled.div`
 export const PreviewContent = styled.div``
 
 export const EmailPreviewWrapper = styled.div`
-  max-width: 317px;
+  max-width: 400px;
   margin-left: auto;
   margin-right: auto;
   border: 1px solid ${props => props.theme.colors.borderColor};
@@ -91,9 +91,10 @@ export const EmailPreviewContent = styled.div`
     text-align: center;
     font-size: 10px;
   }
-  p {
-    margin: 0px;
-    font-size: 7px;
+
+  > div {
+    zoom: 0.4;
+    overflow: auto;
   }
 `
 
@@ -198,14 +199,5 @@ export const NotificationMessageContent = styled(SmsPreviewContent)`
 `
 
 export const AddNewNotificationButton = styled.div`
-  font-size: 14px;
-  color: ${props => props.theme.colors.lightGray};
   padding-bottom: 15px;
-  span {
-    cursor: pointer;
-  }
-
-  &:hover {
-    color: ${props => props.theme.colors.primary};
-  }
 `

package/src/components/CartRecovery/SingleRecoveryNotification/index.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { useLanguage, SingleRecoveryNotification as SingleRecoveryNotificationController } from 'ordering-components-admin-external'
 import { Input, TextArea, Button } from '../../../styles'
 import { Select } from '../../../styles/Select'
-import { Alert, Confirm } from '../../Shared'
+import { Alert, Confirm, HtmlEditor } from '../../Shared'
+import { useForm } from 'react-hook-form'
 
 import {
   Container,
@@ -20,10 +21,12 @@ const SingleRecoveryNotificationUI = (props) => {
     handleUpdateClick,
     handleDeleteClick,
     isAdd,
-    handleClickAddBtn
+    handleClickAddBtn,
+    handleChangeItems
   } = props
 
   const [, t] = useLanguage()
+  const { register, handleSubmit, errors, setValue } = useForm()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
@@ -70,9 +73,33 @@ const SingleRecoveryNotificationUI = (props) => {
     })
   }, [formState?.error])
 
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      setAlertState({
+        open: true,
+        content: Object.values(errors).map(error => error.message)
+      })
+    }
+  }, [errors])
+
+  const onSubmit = () => {
+    if (!formState.changes?.channel && !notification?.channel) {
+      setAlertState({
+        open: true,
+        content: [t('VALIDATION_ERROR_REQUIRED').replace('_attribute_', t('CHANNEL', 'Channel'))]
+      })
+      return
+    }
+    if (isAdd) {
+      handleClickAddBtn()
+    } else {
+      handleClickUpdateBtn(notification?.id)
+    }
+  }
+
   return (
     <>
-      <Container>
+      <Container onSubmit={handleSubmit(onSubmit)}>
         <InputWrapper>
           <label>{t('TITLE', 'Title')}</label>
           <Input
@@ -83,19 +110,10 @@ const SingleRecoveryNotificationUI = (props) => {
                 ? formState?.changes?.title
                 : notification?.title ?? ''
             }
-            onChange={handleChangeInput}
-          />
-        </InputWrapper>
-        <InputWrapper>
-          <label>{t('MESSAGE', 'Message')}</label>
-          <TextArea
-            name='body'
-            placeholder={t('WRITE_MESSAGE', 'Write a message')}
-            defaultValue={
-              formState?.changes?.body
-                ? formState?.changes?.body
-                : notification?.body ?? ''
-            }
+            ref={register({
+              required: t(
+                'VALIDATION_ERROR_REQUIRED').replace('_attribute_', t('TITLE', 'Title'))
+            })}
             onChange={handleChangeInput}
           />
         </InputWrapper>
@@ -110,41 +128,72 @@ const SingleRecoveryNotificationUI = (props) => {
                   : notification?.channel ?? ''
               }
               options={channelList}
-              onChange={val => handleChangeSelect('channel', val)}
+              onChange={val => {
+                setValue('body', '')
+                handleChangeItems({ channel: val, body: '' })
+              }}
             />
           </InputWrapper>
         )}
-      </Container>
-      <ButtonGroup>
-        {isAdd ? (
-          <Button
-            color='primary'
-            borderRadius='8px'
-            disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
-            onClick={() => handleClickAddBtn()}
-          >
-            {t('ADD', 'Add')}
-          </Button>
-        ) : (
-          <>
+        <InputWrapper>
+          <label>{t('MESSAGE', 'Message')}</label>
+          {(formState?.changes?.channel === 'email' || notification?.channel === 'email') ? (
+            <HtmlEditor
+              body={
+                formState?.changes?.body
+                  ? formState?.changes?.body
+                  : notification?.body ?? ''
+              }
+              handleChangeBody={val => handleChangeSelect('body', val)}
+            />
+          ) : (
+            <TextArea
+              name='body'
+              placeholder={t('WRITE_MESSAGE', 'Write a message')}
+              defaultValue={
+                formState?.changes?.body
+                  ? formState?.changes?.body
+                  : notification?.body ?? ''
+              }
+              onChange={handleChangeInput}
+              ref={register({
+                required: t('VALIDATION_ERROR_REQUIRED').replace('_attribute_', t('MESSAGE', 'Message'))
+              })}
+            />
+          )}
+        </InputWrapper>
+        <ButtonGroup>
+          {isAdd ? (
             <Button
               color='primary'
+              type='submit'
               borderRadius='8px'
               disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
-              onClick={() => handleClickUpdateBtn(notification?.id)}
             >
-              {t('ACCEPT', 'Accept')}
+              {t('ADD', 'Add')}
             </Button>
-            <Button
-              color='secundary'
-              borderRadius='8px'
-              onClick={() => onClickDeleteNotification(notification?.id)}
-            >
-              {t('DELETE', 'Delete')}
-            </Button>
-          </>
-        )}
-      </ButtonGroup>
+          ) : (
+            <>
+              <Button
+                color='primary'
+                type='submit'
+                borderRadius='8px'
+                disabled={Object.keys(formState?.changes).length === 0 || formState?.loading}
+              >
+                {t('ACCEPT', 'Accept')}
+              </Button>
+              <Button
+                type='button'
+                color='secundary'
+                borderRadius='8px'
+                onClick={() => onClickDeleteNotification(notification?.id)}
+              >
+                {t('DELETE', 'Delete')}
+              </Button>
+            </>
+          )}
+        </ButtonGroup>
+      </Container>
       <Alert
         title={t('RECOVERY_ACTIONS', 'Recovery actions')}
         content={alertState.content}

package/src/components/CartRecovery/SingleRecoveryNotification/styles.js

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
-export const Container = styled.div`
-
+export const Container = styled.form`
+  min-height: calc(100% - 70px);
 `
 
 export const InputWrapper = styled.div`

package/src/components/CartRecovery/index.js

@@ -1,7 +1,9 @@
 import { OpenCartListing } from './OpenCartListing'
 import { RecoveryActionListing } from './RecoveryActionListing'
+import { RecoveryActionAdd } from './RecoveryActionAdd'
 
 export {
   OpenCartListing,
-  RecoveryActionListing
+  RecoveryActionListing,
+  RecoveryActionAdd
 }

package/src/components/Delivery/DriversCompaniesList/index.js

@@ -4,14 +4,13 @@ import Skeleton from 'react-loading-skeleton'
 import { Pagination } from '../../Shared'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
 import MdCheckBox from '@meronex/icons/md/MdCheckBox'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 
 import {
   DriversCompaniesContainer,
   TableWrapper,
   CompaniesTable,
   PagesBottomContainer,
-  AddNewCompanyButton,
   CompanyNameContainer,
   CheckBoxWrapper,
   EnableWrapper,
@@ -223,11 +222,11 @@ export const DriversCompaniesList = (props) => {
         </TableWrapper>
         {!driversCompaniesState.loading && (
           <PagesBottomContainer>
-            <AddNewCompanyButton
+            <LinkButton
               onClick={() => handleOpenDetails(null)}
             >
               {t('ADD_NEW_DRIVER_COMPANY', 'Add new driver company')}
-            </AddNewCompanyButton>
+            </LinkButton>
             {currentCompanies?.length > 0 && (
               <Pagination
                 currentPage={currentPage}

package/src/components/Delivery/DriversCompaniesList/styles.js

@@ -128,9 +128,3 @@ export const PagesBottomContainer = styled.div`
   row-gap: 10px;
   margin: 15px 0 38px 0;
 `
-
-export const AddNewCompanyButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.primary};
-`

package/src/components/Delivery/DriversGroupsList/index.js

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import MdCheckBoxOutlineBlank from '@meronex/icons/md/MdCheckBoxOutlineBlank'
 import MdCheckBox from '@meronex/icons/md/MdCheckBox'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
-import { Switch } from '../../../styles'
+import { Switch, LinkButton } from '../../../styles'
 import { Pagination } from '../../Shared'
 
 import {
@@ -21,7 +21,6 @@ import {
   ActionsContainer,
   EnableWrapper,
   PagesBottomContainer,
-  AddNewGroupButton,
   GroupIdWrapper
 } from './styles'
 
@@ -252,12 +251,12 @@ export const DriversGroupsList = (props) => {
         {!driversGroupsState.loading && (
           <PagesBottomContainer>
             {!isFromStore && (
-              <AddNewGroupButton
+              <LinkButton
                 onClick={() => handleOpenDetails(null)}
                 disabled={actionDisabled}
               >
                 {t('ADD_NEW_DRIVER_GROUP', 'Add new driver group')}
-              </AddNewGroupButton>
+              </LinkButton>
             )}
             {currentGroups?.length > 0 && (
               <Pagination

package/src/components/Delivery/DriversGroupsList/styles.js

@@ -204,18 +204,6 @@ export const PagesBottomContainer = styled.div`
   margin: 15px 0 38px 0;
 `
 
-export const AddNewGroupButton = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  color: ${props => props.theme.colors.primary};
-
-  ${({ disabled }) => disabled && css`
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  `}
-`
-
 export const GroupIdWrapper = styled.div`
   display: flex;
   align-items: center;