@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/organism/ActivityTimeline/components/ActionHistory/styled.js

@@ -1,36 +1,36 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled, { css } from 'styled-components';
-export const ValueWrap = styled.div `
-  flex: 0 0 calc(315 / 858 * 100%);
-  max-width: calc(315 / 858 * 100%);
-  text-align: right;
-  max-width: 100%;
-  width: 100%;
-  text-align: left;
+export const ValueWrap = styled.div `
+  flex: 0 0 calc(315 / 858 * 100%);
+  max-width: calc(315 / 858 * 100%);
+  text-align: right;
+  max-width: 100%;
+  width: 100%;
+  text-align: left;
 `;
-const LabelStyle = css `
-  font-weight: bold;
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
+const LabelStyle = css `
+  font-weight: bold;
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
 `;
-export const Label = styled.div `
-  color: ${globalToken?.colorPrimary};
-  margin-top: 3px;
-  margin-bottom: 2px;
-  ${LabelStyle};
+export const Label = styled.div `
+  color: ${globalToken?.colorPrimary};
+  margin-top: 3px;
+  margin-bottom: 2px;
+  ${LabelStyle};
 `;
-export const RevenueValue = styled.div `
-  color: rgb(239, 51, 63);
-  ${LabelStyle};
+export const RevenueValue = styled.div `
+  color: rgb(239, 51, 63);
+  ${LabelStyle};
 `;
-export const ActionHistoryWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
+export const ActionHistoryWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
 `;
-export const ItemWrap = styled.div `
-  flex: 0 0 calc(536 / 858 * 100%);
-  max-width: calc(536 / 858 * 100%);
-  max-width: 100%;
-  width: 100%;
-  margin-bottom: 1rem;
+export const ItemWrap = styled.div `
+  flex: 0 0 calc(536 / 858 * 100%);
+  max-width: calc(536 / 858 * 100%);
+  max-width: 100%;
+  width: 100%;
+  margin-bottom: 1rem;
 `;

package/es/components/organism/ActivityTimeline/components/CardMember/styled.js

@@ -1,65 +1,65 @@
 import styled from 'styled-components';
-export const WrapCard = styled.div `
-  display: flex;
-  padding: 12px;
-  background-color: #fff;
+export const WrapCard = styled.div `
+  display: flex;
+  padding: 12px;
+  background-color: #fff;
 `;
-export const ImgPanel = styled.div `
-  overflow: hidden;
-  width: 6.25rem;
-  height: 6.25rem;
-  position: relative;
-  border: 1px solid rgb(230, 230, 230);
-
-  @media screen and (max-width: 767px) {
-    width: 80px;
-    height: 80px;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: -10px;
-    bottom: -44px;
-    width: 100px;
-    left: 0;
-    background-color: #fff;
-    opacity: 0.7;
-    z-index: 2;
-    transform: skew(15deg, 15deg) translateX(-120px);
-    transition: all 0.4s ease-in-out;
-  }
-
-  &:hover {
-    &:before {
-      transform: skew(0, 0) translateX(100px);
-    }
-    a {
-      span {
-        transform: scale(1.2);
-      }
-    }
-  }
-
-  a {
-    width: 100%;
-    height: 100%;
-    & > span {
-      display: block;
-      width: 100%;
-      height: 100%;
-      transition: all 0.2s ease-in-out;
-    }
-  }
+export const ImgPanel = styled.div `
+  overflow: hidden;
+  width: 6.25rem;
+  height: 6.25rem;
+  position: relative;
+  border: 1px solid rgb(230, 230, 230);
+
+  @media screen and (max-width: 767px) {
+    width: 80px;
+    height: 80px;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    bottom: -44px;
+    width: 100px;
+    left: 0;
+    background-color: #fff;
+    opacity: 0.7;
+    z-index: 2;
+    transform: skew(15deg, 15deg) translateX(-120px);
+    transition: all 0.4s ease-in-out;
+  }
+
+  &:hover {
+    &:before {
+      transform: skew(0, 0) translateX(100px);
+    }
+    a {
+      span {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  a {
+    width: 100%;
+    height: 100%;
+    & > span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      transition: all 0.2s ease-in-out;
+    }
+  }
 `;
-export const InfoPanel = styled.div `
-  padding-left: 12px;
-  width: calc(100% - 6.25rem);
-  display: flex !important;
-  flex-direction: column;
-  justify-content: space-between;
+export const InfoPanel = styled.div `
+  padding-left: 12px;
+  width: calc(100% - 6.25rem);
+  display: flex !important;
+  flex-direction: column;
+  justify-content: space-between;
 `;
-export const PlainCard = styled.div `
-  font-size: 0.875rem;
-  line-height: 1.25;
+export const PlainCard = styled.div `
+  font-size: 0.875rem;
+  line-height: 1.25;
 `;

package/es/components/organism/ActivityTimeline/components/ItemEvent/ItemEvent.js

@@ -21,7 +21,13 @@ export const ItemEvent = forwardRef((props, ref) => {
     const { etype: eType } = item;
     const renderSingleEvent = (dataEvent) => {
         const dataActivity = dataEvent.data.firstActivities;
-        const { titleEvent: title, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent(eType, dataActivity[0], eventTracking, objectName, appConfig);
+        const { titleEvent: title, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent({
+            eType,
+            itemEvent: dataActivity[0],
+            eventTracking,
+            customerName: objectName,
+            config: appConfig,
+        });
         return (_jsxs(TimelineSection, { title: title, bgIcon: infoEvent.backgroundIcon, iconName: infoEvent.iconName, children: [_jsx(List, { type: "timeline", children: _jsxs(ListItem, { children: [_jsx(ListItemTimeLine, { children: _jsx(ListItemTitle, { ellipsis: { tooltip: true }, children: htmlParse(fullContentEvent) }) }), _jsx(ListItemTime, { ellipsis: { tooltip: true }, children: formatDateHeader(dataActivity[0].trackedDateTimeUTC) })] }) }), infoEvent.showRedeem && validateExtra.loyalty_card ? (_jsxs(WrapperContainerRedeem, { children: [_jsx(CardMember, { info: validateExtra.loyalty_card }), checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))] })) : (infoEvent.showRedeem &&
                     checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))), dataActivity[0].items.length > 0 && dataActivity[0].items[0].item_type === 'product' && (_jsx(ListItemContent, { children: _jsx(ActionHistory, { revenue: infoEvent.showRevenue
                             ? `${safeParse(validateExtra.revenue, '--') === '--'

package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/ItemGroupEvent.js

@@ -45,12 +45,24 @@ export const ItemGroupEvent = forwardRef((props, ref) => {
     const { etype: eType } = item;
     const renderGroupEvent = (dataEvent) => {
         const dataActivity = dataEvent.data.firstActivities;
-        const { titleEvent: title, infoEvent: infoEventLast } = getInfoEvent(eType, dataActivity[0], eventTracking, objectName, appConfig);
+        const { titleEvent: title, infoEvent: infoEventLast } = getInfoEvent({
+            eType,
+            itemEvent: dataActivity[0],
+            eventTracking,
+            customerName: objectName,
+            config: appConfig,
+        });
         const rearTitle = translate(translations._EVENT_DES_PERFORM_OTHER_EVENT, 'and performed other {{x}} actions', { x: dataActivity.length - 1 });
         if (isEmpty(dataActivity))
             return null;
         return (_jsx(TimelineSection, { title: `${title}, ${rearTitle}`, bgIcon: infoEventLast.backgroundIcon, iconName: infoEventLast.iconName ? infoEventLast.iconName : 'cus web', children: _jsx(List, { type: "timeline", loadMore: true, limit: 5, noPaddingBottom: true, children: dataActivity.map((itemEvent, index) => {
-                    const { titleEvent, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent(eType, itemEvent, eventTracking, objectName, appConfig);
+                    const { titleEvent, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent({
+                        eType,
+                        itemEvent,
+                        eventTracking,
+                        customerName: objectName,
+                        config: appConfig,
+                    });
                     return (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { children: [_jsx(ListItemTimeLine, { children: _jsx(ListItemTitle, { ellipsis: { tooltip: true }, children: htmlParse(fullContentEvent) }) }), _jsx(ListItemTime, { ellipsis: { tooltip: true }, children: formatDateHeader(itemEvent.trackedDateTimeUTC, timezone) })] }), infoEvent.showRedeem && validateExtra.loyalty_card ? (_jsxs(WrapperContainerRedeem, { children: [_jsx(CardMember, { info: validateExtra.loyalty_card }), checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))] })) : (infoEvent.showRedeem &&
                                 checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))), itemEvent.items.length > 0 && itemEvent.items[0].item_type === 'product' && (_jsx(ListItemContent, { children: _jsx(ActionHistory, { revenue: infoEvent.showRevenue
                                         ? `${safeParse(validateExtra.revenue, '--') === '--'

package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-export const ListItemContent = styled.div `
-  flex: 0 0 100%;
-  max-width: 100%;
-  padding-top: 1rem;
+export const ListItemContent = styled.div `
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-top: 1rem;
 `;

package/es/components/organism/ActivityTimeline/components/List/styled.js

@@ -1,104 +1,104 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from 'antd';
 import styled, { css } from 'styled-components';
-export const ListItemEle = styled.li `
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+export const ListItemEle = styled.li `
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   ${props => {
     switch (props.type) {
         case 'underline':
-            return css `
-          border-bottom: 1px solid rgb(230, 230, 230);
-          &:first-child {
-            border-top: ${!props.noBorderTop && `1px solid rgb(230, 230, 230)`};
-          }
-          &:last-child {
-            border-bottom: ${props.noBorderBottom && 'none'};
-            padding-bottom: ${props.noPaddingBottom && 0};
-          }
+            return css `
+          border-bottom: 1px solid rgb(230, 230, 230);
+          &:first-child {
+            border-top: ${!props.noBorderTop && `1px solid rgb(230, 230, 230)`};
+          }
+          &:last-child {
+            border-bottom: ${props.noBorderBottom && 'none'};
+            padding-bottom: ${props.noPaddingBottom && 0};
+          }
         `;
         case 'timeline':
-            return css `
-          position: relative;
-          padding-top: 0;
-          padding-left: 1.5rem;
-          font-size: 0.875rem;
-          &:last-child {
-            padding-bottom: ${props.noPaddingBottom && 0};
-          }
-          &:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 0.5rem;
-            height: 0.5rem;
-            margin-top: 0.25rem;
-            border-radius: 50%;
-            background-color: ${globalToken?.colorPrimary};
-          }
+            return css `
+          position: relative;
+          padding-top: 0;
+          padding-left: 1.5rem;
+          font-size: 0.875rem;
+          &:last-child {
+            padding-bottom: ${props.noPaddingBottom && 0};
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0.5rem;
+            height: 0.5rem;
+            margin-top: 0.25rem;
+            border-radius: 50%;
+            background-color: ${globalToken?.colorPrimary};
+          }
         `;
         default:
             return '';
     }
-}}
+}}
 `;
-export const ListContainer = styled.ul `
-  position: relative;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+export const ListContainer = styled.ul `
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
   ${props => {
     switch (props.type) {
         case 'timeline':
-            return css `
-          &:before {
-            content: '';
-            position: absolute;
-            top: 0.5rem;
-            left: 0.219rem;
-            width: 1px;
-            height: calc(100% - 0.85rem);
-            background-color: ${globalToken?.colorPrimary};
-          }
+            return css `
+          &:before {
+            content: '';
+            position: absolute;
+            top: 0.5rem;
+            left: 0.219rem;
+            width: 1px;
+            height: calc(100% - 0.85rem);
+            background-color: ${globalToken?.colorPrimary};
+          }
         `;
         case 'spacing':
-            return css `
-          ${ListItemEle} {
-            padding-top: 0;
-            padding-bottom: 0;
-          }
+            return css `
+          ${ListItemEle} {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
         `;
         default:
             return css ``;
     }
-}}
+}}
   ${props => props.single &&
-    css `
-      ${ListItemEle} {
-        padding-bottom: 0;
-      }
-      &:before {
-        content: unset;
-      }
-      ${ListItemEle} {
-        padding-left: 0;
-        &:before {
-          content: unset;
-        }
-        &:after {
-          content: unset;
-        }
-      }
-    `}
+    css `
+      ${ListItemEle} {
+        padding-bottom: 0;
+      }
+      &:before {
+        content: unset;
+      }
+      ${ListItemEle} {
+        padding-left: 0;
+        &:before {
+          content: unset;
+        }
+        &:after {
+          content: unset;
+        }
+      }
+    `}
 `;
-const Loadable = styled.div `
-  font-size: 0.75rem;
-  line-height: 1.0625rem;
-  padding-top: 1rem;
-  color: ${globalToken?.colorPrimary};
-  cursor: pointer;
-  font-size: 0.625rem;
+const Loadable = styled.div `
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
+  padding-top: 1rem;
+  color: ${globalToken?.colorPrimary};
+  cursor: pointer;
+  font-size: 0.625rem;
 `;
 export const LoadMore = styled(Loadable) ``;
 export const LoadLess = styled(Loadable) ``;

package/es/components/organism/ActivityTimeline/components/ListItem/styled.js

@@ -1,53 +1,53 @@
 import { Typography } from 'antd';
 import styled, { css } from 'styled-components';
-export const ListItemContent = styled.div `
-  flex: 0 0 100%;
-  max-width: 100%;
-  padding-top: 1rem;
+export const ListItemContent = styled.div `
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-top: 1rem;
 `;
-export const StyledListItem = styled.div `
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  font-size: 0.875rem;
-  display: flex;
-  justify-content: space-between;
-  line-height: 1rem;
-  max-width: 100%;
-  font-size: 0.75rem;
-  overflow: hidden;
-
+export const StyledListItem = styled.div `
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  font-size: 0.875rem;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1rem;
+  max-width: 100%;
+  font-size: 0.75rem;
+  overflow: hidden;
+
   ${props => {
     switch (props.type) {
         case 'underline':
             return css ``;
         case 'timeline':
-            return css `
-          ${ListItemContent} {
-            padding-top: 0.75rem;
-          }
+            return css `
+          ${ListItemContent} {
+            padding-top: 0.75rem;
+          }
         `;
         default:
             return '';
     }
-}}
+}}
 `;
-export const ListItemTimeLine = styled.div `
-  margin-right: 1.5rem;
-  min-width: 0;
-  flex: 1;
+export const ListItemTimeLine = styled.div `
+  margin-right: 1.5rem;
+  min-width: 0;
+  flex: 1;
 `;
-export const ListItemTitle = styled(Typography.Text) `
-  flex: 0 0 calc(190 / 408 * 100%);
-
-  &.antsomi-typography {
-    line-height: 1rem;
-  }
+export const ListItemTitle = styled(Typography.Text) `
+  flex: 0 0 calc(190 / 408 * 100%);
+
+  &.antsomi-typography {
+    line-height: 1rem;
+  }
 `;
-export const ListItemTime = styled(Typography.Text) `
-  font-size: 0.75rem;
-
-  &.antsomi-typography {
-    line-height: 1rem;
-  }
+export const ListItemTime = styled(Typography.Text) `
+  font-size: 0.75rem;
+
+  &.antsomi-typography {
+    line-height: 1rem;
+  }
 `;