@licklist/design 0.71.20 → 0.71.22

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -9,9 +9,18 @@ import { FaTimes } from 'react-icons/fa'
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from '../../constants'
 import { CurrencyNumberInput } from '../../../static/CurrencyNumberInput'
 
+export const FULL_REFUND_TYPE = 'fullRefund'
+export const PARTIAL_REFUND_TYPE = 'partialRefund'
+export const NET_REFUND_TYPE = 'netRefund'
+
+export type RefundType =
+  | typeof FULL_REFUND_TYPE
+  | typeof PARTIAL_REFUND_TYPE
+  | typeof NET_REFUND_TYPE
+
 export interface RefundModalProps {
   isVisible: boolean
-  isFullRefund?: boolean
+  refundType?: RefundType
   onHide: () => void
   onSubmit: (amount?: number) => void
   isLoading?: boolean
@@ -29,12 +38,14 @@ export const RefundModal = ({
   onHide,
   onSubmit,
   isLoading = false,
-  isFullRefund = false,
+  refundType = PARTIAL_REFUND_TYPE,
   paymentType,
   defaultValue = 0,
   maxValue,
 }: RefundModalProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
+  const isInputDisabled =
+    isLoading || refundType === 'fullRefund' || refundType === 'netRefund'
 
   const {
     handleSubmit,
@@ -64,9 +75,7 @@ export const RefundModal = ({
     >
       <Form onSubmit={handleSubmit(onModalSubmit)}>
         <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h5'>
-            {t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')}
-          </ModalTitle>
+          <ModalTitle as='h5'>{t(`Design:${refundType}`)}</ModalTitle>
 
           <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={20} />
@@ -111,7 +120,7 @@ export const RefundModal = ({
                     },
                   })}
                   step={0.01}
-                  disabled={isLoading || isFullRefund}
+                  disabled={isInputDisabled}
                   isInvalid={!!errors.amount}
                   min={0}
                 />

package/src/sales/modals/refund-modal/index.ts

@@ -1,2 +1,7 @@
-export { RefundModal } from './RefundModal'
-export type { RefundModalProps } from './RefundModal'
+export {
+  RefundModal,
+  FULL_REFUND_TYPE,
+  NET_REFUND_TYPE,
+  PARTIAL_REFUND_TYPE,
+} from './RefundModal'
+export type { RefundModalProps, RefundType } from './RefundModal'

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,4 +1,9 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react'
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import { DndContext, useDraggable } from '@dnd-kit/core'
 import {
   SortableContext,
@@ -33,6 +38,7 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
+  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -82,6 +88,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -287,9 +294,13 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
+                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
+                    <div className='sortable-tree-item-subtitle'>
+                      {itemButton}
+                    </div>
                   </span>
                   {!expanded && (
                     <span className='sortable-tree-item-subtitle'>

package/src/styles/date-time-button/DateTimeButton.scss

@@ -33,7 +33,7 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color:transparent;
+    background-color: transparent;
     border: none;
     color: $snippet-calendar-disabled-button-font-color;
     cursor: not-allowed;

package/src/styles/product-set/ProductSetForm.scss

@@ -1,4 +1,5 @@
 .product-set-form {
+
   input,
   textarea,
   select,
@@ -15,10 +16,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +37,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +63,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +90,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +117,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +177,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +185,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;
@@ -177,8 +200,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #efe9f5;
-    color: #84269b;
+    background-color: #EFE9F5;
+    color: #84269B;
     font-size: 0.875rem;
     font-weight: 600;
   }