forstok-ui-lib 5.11.21 → 5.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.11.21",
+  "version": "5.12.0",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/icons/warning-agent.svg

@@ -0,0 +1,18 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ff0000" width="auto" height="auto" viewBox="0 0 24 24" id="warning" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color" stroke="#ff0000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier">
+
+<circle id="primary" cx="12" cy="12" r="10" style="fill: #ff0000;"/>
+
+<path id="secondary" d="M11,13V7a1,1,0,0,1,2,0v6a1,1,0,0,1-2,0Zm1,2.5A1.5,1.5,0,1,0,13.5,17,1.5,1.5,0,0,0,12,15.5Z" style="fill: #ffffff;"/>
+
+</g>
+
+</svg>

package/src/assets/javascripts/function.ts

@@ -619,4 +619,31 @@ export const abbreviateNumber = (value?: number) => {
     }
   }
   return result
+}
+
+export const pasteIntoInput = (el:HTMLInputElement| HTMLTextAreaElement, text: string) => {
+  el.focus()
+  if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') {
+    var val = el.value
+    var selStart = el.selectionStart
+    el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd)
+    el.selectionEnd = el.selectionStart = selStart + text.length
+  } else if (typeof (document as any).selection != 'undefined') {
+    var textRange = (document as any).selection.createRange()
+    textRange.text = text
+    textRange.collapse(false)
+    textRange.select()
+  }
+}
+
+export const isDesktop = () => {
+  return document.body.clientWidth >= 1024 ? true : false;
+}
+
+export const isTablet = () => {
+  return (document.body.clientWidth >= 768 && document.body.clientWidth < 1024) ? true : false;
+}
+
+export const isMobile = () => {
+  return document.body.clientWidth < 768 ? true : false;
 }

package/src/assets/javascripts/helper.ts

@@ -176,4 +176,52 @@ export const historyType = (name?: string) => {
     default:
       return '';
   }
+}
+
+export const channelMap = (value: number) => {
+  const channel: TObject = {
+    '2': 'Shopify',
+    '3': 'Lazada',
+    '5': 'Blanja',
+    '6': 'Matahari mall',
+    '7': 'Magento 1',
+    '8': 'Elevania',
+    '9': 'Blibli', 
+    '1o': 'Magento 2',
+    '11': 'Bukalapak',
+    '12': 'Shopee',
+    '13': 'Zalora Indonesia',
+    '15': 'Tokopedia',
+    '16': 'JD Indonesia',
+    '18': 'Zilingo',
+    '19': 'Woocommerce',
+    '21': 'Manual SO',
+    '3532': 'Aladin Mall',
+    '10017': 'Grabmart',
+    '10030': 'Tiktok',
+  };
+  return channel[value.toString()] || '';
+}
+
+export const colorStatus = (value?: string) => {
+  switch (value) {
+    case 'Pending_payment': case 'Pending_courier': case 'pending payment': case 'Pending Payment': case 'pending courier': case 'not started yet': case 'Pending': case 'Draft':
+      return '#FF585C'
+    case 'Open': case 'open': case 'In_picking': case 'Partial_picked': case 'in picking': case 'In Picking': case 'Incoming':
+      return '#F8813E'
+    case 'Picked': case 'picked': case 'Packed': case 'Ready_to_ship': case 'ready to ship': case 'Ready to Ship': case 'Ready_to_pickup': case 'Shipped':  case 'shipped':  case 'Fulfilled':  case 'Delivered': case 'delivered': case 'Picked_up': case 'Invoiced': case 'Not_invoiced': case 'Invoice_paid':  case 'Completed':  case 'completed':  case 'Paid': case 'In Progress': case 'Active': case 'Confirmed': case 'Adjusted':
+      return '#21BA45'
+    case 'Not_picked': case 'Not Picked': case 'Unpaid': case 'Overdue': case 'Write_off': case 'Write Off': case 'write off': case 'Written Off': case 'Failed Delivery': case 'failed delivery':
+      return '#FF585C'
+    case 'not shipped': case 'Not Shipped': case 'Partial_paid':
+      return '#F8813E'
+    case 'Cancelled': case 'cancelled': case 'Voided': 
+      return '#a9a9a9'
+    case 'Returned':  case 'return': case 'Return':
+      return '#ff585d'
+    case 'Closed':
+      return '#2c913d'
+    default:
+      return 'green'
+  }
 }

package/src/assets/stylesheets/shares.styles.ts

@@ -22,6 +22,11 @@ const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
         min-height: 600px;
       }
     `
+  } else if ($mode === 'chat') {
+    style +=`
+      height: calc(100vh - 150px);
+      overflow: hidden;
+    `
   } else if ($mode === 'clear') {
     style +=`
       padding-top: 9px;
@@ -112,7 +117,7 @@ const getBulkActionWrapperModifiedStyled = ({ $isOpen }:{ $isOpen?: boolean }) =
   }
   return style
 }
-const getTableHeaderModFunc = ({ $mode }:{ $mode?: string }) => {
+const getTableHeaderModFunc = ({ $mode, $isPlayground }:{ $mode?: string, $isPlayground?: boolean }) => {
   let style = `
     & ${TableHeadLabel} {
       &:empty, 
@@ -226,15 +231,17 @@ const getTableHeaderModFunc = ({ $mode }:{ $mode?: string }) => {
       }
     `
   } else if ($mode === 'chat') {
+    const templateCol = $isPlayground ? '1fr max-content;' : '30px 1fr max-content;'
     style +=` 
       padding: 0;
       align-items: center;
-      grid-template-columns: 30px 1fr max-content;
+      grid-template-columns: ${templateCol};
       position: relative;
       top: 50%;
       transform: translateY(-50%);
       grid-gap: 8px;
       margin-left: 16px;
+      border-bottom: 0;
       ${TableRowGroup} {  
         ${TableColumnGroup} {
           span {
@@ -243,17 +250,16 @@ const getTableHeaderModFunc = ({ $mode }:{ $mode?: string }) => {
         }
       }
       @media only screen and (min-width: 768px) {
-        border-bottom: 0;
         grid-gap: 8px;
       }
       @media only screen and (min-width: 1280px) {
-        grid-template-columns: 30px 1fr max-content;
+        grid-template-columns: ${templateCol};
         padding: 0 16px 0 16px;
         top: 0;
         transform: none;
         margin-left: 0;
         ${TableRowGroup}, 
-        ${TableRightGroup} {
+        ${TableRightGroup}{
           display: grid;
         }
         ${TableRowGroup} {
@@ -288,6 +294,12 @@ const getTableHeaderModFunc = ({ $mode }:{ $mode?: string }) => {
       }
     `
   }
+  if ($isPlayground) {
+    style += `
+      min-height: 41px;
+      align-content: center;
+    `
+  }
   return style
 }
 const getTabsRowModFunc = ({ $content, $mode }:{ $content?: string, $mode?: string }) => {
@@ -570,6 +582,36 @@ const getTabsWrapperModFunc =({ $mode }:{ $mode?: string }) => {
         padding: 16px 10px 11px 10px; 
       }
     `
+  } else if ($mode === 'chat-faq') {
+    style += `
+      ${TabsList} {
+        border-bottom: 1px solid #DEE0E0;
+        justify-content: center;
+      }
+      ${TabsItem} {
+        padding-left: 10px; 
+        padding-right: 10px;
+      }
+      @media only screen and (min-width: 1024px) {
+        ${TabsHeader} {
+          width: 100%;
+          min-width: unset;
+          max-width: unset;
+        }
+      }
+      @media only screen and (min-width: 1280px) {
+        ${TabsList} {
+          padding-left: 1em;
+          padding-right: 1em;
+          padding-top: 6px;
+        }
+        ${TabsItem} {
+          font-size: 14px;
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+      }
+    `
   }
   return style
 }
@@ -1585,7 +1627,18 @@ const getIconDotModifiedStyled = ({ $mode }:{ $mode?: string }) => {
         transform: scale(1) translate(50%, -50%);
       `
     }
-  } 
+  } else if ($mode === 'chat') {
+    style += `
+      position: absolute;
+      z-index: 8;
+      left: 18px;
+      top: -3px;
+      padding: 0.2em 0.3em;
+      font-weight: bold;
+      font-size: 10px;
+      min-width: 20px;
+    `
+  }
   return style
 }
 const getCardModFunc = ({ $mode }:{ $mode?: string }) => {
@@ -2163,8 +2216,8 @@ export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>`
     let style = ``;
     if ($size) {
       style += ` 
-        width:${$size};  
-        height:${$size};
+        width: ${$size};  
+        height: ${$size};
       `
     }
     return style;
@@ -2265,13 +2318,15 @@ export const TableHeadLabel = styled.span`
     width: auto;
   }
 `
-export const TableHeadWrapper = styled.div<{ $mode?: string }>` 
+export const TableHeadWrapper = styled.div<{ $mode?: string, $isPlayground?: boolean }>` 
   display: grid;
   border-bottom: 2px solid var(--ter-clr-ln);
-  >span:last-child { justify-self: right; }
   padding-top: 22px;
   padding-bottom: 22px;
   align-items: center;
+  > span:last-child { 
+    justify-self: right; 
+  }
   & ${TableHeadLabel} {
     &:empty, &:last-child {
       cursor: default;

package/src/components/icon/styles.ts

@@ -6,6 +6,7 @@ import IconCart from '../../assets/images/icons/cart.svg';
 import IconBack from '../../assets/images/icons/back.svg';
 import IconDashboardLeftNav from '../../assets/images/navs/left/dashboard.svg';
 import IconProductLeftNav from '../../assets/images/navs/left/products.svg';
+import IconWarningChat from '../../assets/images/icons/warning-agent.svg';
 
 const NotificationStyled = css`
   width: 44px;
@@ -291,6 +292,13 @@ const getIconContainerStyled = ({ $mode, $name, $width, onClick }:{ $mode?: stri
         }
       `
       break;
+    case 'warning-chat': 
+      style += `
+        &:before { 
+          content: url(${IconWarningChat}); 
+        }
+      `
+      break;
     default: 
       break;
   }

package/src/components/textarea/index.tsx

@@ -7,7 +7,7 @@ type TTextArea = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   reset?: boolean 
   setReset?: TState<boolean>
   isForceUpdate?: boolean 
-  setForceUpdate?: TState<boolean>
+  setForceUpdate?: TState<boolean | undefined>
   evChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void
   evBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void
   isField?: boolean

package/src/typeds/shares.typed.ts

@@ -23,6 +23,7 @@ export type TUser = {
     shopee_partner_key: string
   },
   has_access_orderV1: boolean
+  isAi?: boolean
 }
 export type THierarchy = {
   evTooglePopup?: TPopupFunction