@bikdotai/bik-component-library 0.0.620-mldn.14 → 0.0.620-mldn.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.d.ts +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.d.ts +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -17
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +17 -41
- package/dist/cjs/components/multi-level-dropdown/type.d.ts +2 -5
- package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts +1 -1
- package/dist/cjs/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/reducers.js +1 -1
- package/dist/cjs/components/template-context-mapper/Badge/index.js +0 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +0 -2
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.d.ts +1 -3
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +2 -2
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.d.ts +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -17
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +13 -37
- package/dist/esm/components/multi-level-dropdown/type.d.ts +2 -5
- package/dist/esm/components/product-picker-v2/collectionScreen.d.ts +1 -1
- package/dist/esm/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/reducers.js +1 -1
- package/dist/esm/components/template-context-mapper/Badge/index.js +4 -5
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +0 -2
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Footer.d.ts +1 -3
- package/dist/esm/components/template-context-mapper/modalElements/Footer.js +4 -4
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { GroupedOption, MultiLevelDropdownOption } from './type';
|
|
3
3
|
export declare const GroupedMenuList: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: GroupedOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:l,parents:u}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px"},color:r.COLORS.content.placeholder},{children:l.label})),l.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:u},t)))]})};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { MultiLevelDropdownOption, SingleOption } from './type';
|
|
3
3
|
export declare const MenuItem: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: SingleOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),s=require("../TypographyStyle.js"),o=require("./MenuList.js"),r=require("./MultiLevelDropdown.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(n);exports.MenuItem=l=>{let{width:c,onDropdownItemClick:a,option:u,parents:p}=l;var h,O,v,j,b,g,C;const[x,m]=d.default.useState(!1),[f,y]=d.default.useState(!1),[S,L]=d.default.useState({top:0,left:0}),M=n.useRef({top:0,left:0});return e.jsxs(r.MenuItemWrapper,Object.assign({onMouseEnter:e=>{m(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();L({top:t.top,left:t.right}),M.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{m(!1)},onClick:()=>{var e;null!==(e=u.disabled)&&void 0!==e&&e||u.children||a(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(O=u.disabled)&&void 0!==O&&O?i.COLORS.surface.standard:"transparent"}},{children:[u.customComponent?u.customComponent:e.jsxs(r.MenuItemContainer,Object.assign({isSelected:u.selected,isSubMenuOpen:x,isHovered:f,isDisabled:null!==(v=u.disabled)&&void 0!==v&&v},{children:[e.jsxs(r.ContentContainer,{children:[u.leadingIcon&&u.leadingIcon,e.jsxs("div",{children:[e.jsx(s.BodyCaption,Object.assign({style:{color:null!==(j=u.disabled)&&void 0!==j&&j?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.primary}},{children:u.label})),u.subText&&e.jsx(s.BodyTiny,Object.assign({style:{color:null!==(b=u.disabled)&&void 0!==b&&b?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:u.subText}))]})]}),u.children&&u.children.length>0?e.jsx(t.default,{width:16,height:16,color:null!==(g=u.disabled)&&void 0!==g&&g?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.primary}):u.trailingIcon?u.trailingIcon:e.jsx(e.Fragment,{})]})),!(null!==(C=u.disabled)&&void 0!==C&&C)&&u.children&&u.children.length>0&&x&&e.jsx("div",Object.assign({style:{width:c},className:"submenu",onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1)},{children:e.jsx(r.SubMenuWrapper,Object.assign({style:{width:c,top:`${S.top}px`,left:`${S.left}px`}},{children:e.jsx(r.Container,{children:e.jsx(o.MenuList,{width:c,onDropdownItemClick:a,options:u.children,parents:[...p,u]})})}))}))]}))};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { MultiLevelDropdownOption } from './type';
|
|
3
3
|
export declare const MenuList: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
options: MultiLevelDropdownOption[];
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../zeroState/ZeroState.js"),t=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("./MenuList.js"),s=require("./MultiLevelDropdown.styled.js");exports.MultiLevelDropdown=n=>{let{options:i,width:l,isSearchable:a,onDropdownItemClick:u}=n;return e.jsxs(s.DropdownContainer,Object.assign({width:l},{children:[a&&e.jsx("div",Object.assign({style:{padding:"4px 4px 0",width:null!=l?l:"200px"}},{children:e.jsx(t.SearchBox,{onSearch:e=>{console.log({searchString:e})},version:"2.0"})})),(null!=i?i:[]).length>0&&e.jsx(o.MenuList,{width:null!=l?l:"200px",onDropdownItemClick:u,options:i,parents:[]}),0===(null!=i?i:[]).length&&e.jsx(s.NoResultsContainer,{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})]}))};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
width?: string | undefined;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const
|
|
5
|
-
width?: string | undefined;
|
|
6
|
-
}, never>;
|
|
7
|
-
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
-
width?: string | undefined;
|
|
9
|
-
}, never>;
|
|
4
|
+
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
5
|
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
6
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
7
|
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -19,14 +14,4 @@ export interface MenuItemContainerProps {
|
|
|
19
14
|
export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
|
|
20
15
|
export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
16
|
export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
export declare const
|
|
23
|
-
export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
|
-
export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
25
|
-
export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
|
|
26
|
-
width: string;
|
|
27
|
-
}, never>;
|
|
28
|
-
export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
29
|
-
width: string;
|
|
30
|
-
top: number;
|
|
31
|
-
left: number;
|
|
32
|
-
}, never>;
|
|
17
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,35 +1,32 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
border-radius: 8px;
|
|
4
|
-
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom: 4px;
|
|
6
|
-
`,o=r.default.div`
|
|
7
3
|
width: ${e=>{let{width:t}=e;return t||"200px"}};
|
|
8
4
|
max-width: 300px;
|
|
9
5
|
max-height: 280px;
|
|
10
6
|
overflow-y: scroll;
|
|
11
|
-
|
|
7
|
+
border-radius: 8px;
|
|
8
|
+
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
12
9
|
&::-webkit-scrollbar {
|
|
13
10
|
width: 0px;
|
|
14
11
|
}
|
|
15
|
-
`,
|
|
12
|
+
`,n=i.default.div`
|
|
16
13
|
margin-top: 64px;
|
|
17
14
|
height: 200px;
|
|
18
|
-
|
|
19
|
-
`,a=r.default.div`
|
|
15
|
+
`,a=i.default.div`
|
|
20
16
|
width: 100%;
|
|
21
17
|
justify-content: center;
|
|
22
18
|
cursor: pointer;
|
|
23
19
|
align-items: center;
|
|
24
20
|
justify-content: space-between;
|
|
25
21
|
margin: 4px 0;
|
|
26
|
-
`,
|
|
22
|
+
`,d=i.default.div`
|
|
27
23
|
z-index: 1000;
|
|
28
24
|
position: relative;
|
|
29
25
|
margin: 0px;
|
|
30
26
|
padding: 0px;
|
|
27
|
+
padding-bottom: 4px;
|
|
31
28
|
width: 100%;
|
|
32
|
-
`,s=
|
|
29
|
+
`,s=i.default.div`
|
|
33
30
|
position: relative;
|
|
34
31
|
padding: 1px 4px;
|
|
35
32
|
cursor: pointer;
|
|
@@ -38,61 +35,40 @@
|
|
|
38
35
|
&:focus-within > .submenu {
|
|
39
36
|
display: block;
|
|
40
37
|
}
|
|
41
|
-
`,
|
|
38
|
+
`,p=i.default.div`
|
|
42
39
|
position: relative;
|
|
43
|
-
padding: 4px 8px 4px
|
|
40
|
+
padding: 4px 8px 4px 12px;
|
|
44
41
|
transition: background-color 0.2s;
|
|
45
42
|
width: 100%;
|
|
46
43
|
border-radius: 8px;
|
|
47
44
|
justify-content: center;
|
|
48
|
-
background-color: ${e=>{let{isSelected:
|
|
49
|
-
color: ${e=>{let{isSelected:
|
|
45
|
+
background-color: ${e=>{let{isSelected:r,isHovered:i,isSubMenuOpen:o,isDisabled:n}=e;return n?t.COLORS.surface.standard:r||o?t.COLORS.background.positive.light:i?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
|
|
46
|
+
color: ${e=>{let{isSelected:r,isSubMenuOpen:i}=e;return r||i?t.COLORS.content.positive:t.COLORS.content.primary}};
|
|
50
47
|
display: flex;
|
|
51
48
|
align-items: center;
|
|
52
49
|
justify-content: space-between;
|
|
53
50
|
|
|
54
51
|
&:hover {
|
|
55
|
-
background-color: ${e=>{let{isSelected:
|
|
52
|
+
background-color: ${e=>{let{isSelected:r,isDisabled:i}=e;return i?t.COLORS.surface.standard:r?t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
|
|
56
53
|
}
|
|
57
|
-
`,u=
|
|
54
|
+
`,u=i.default.div`
|
|
58
55
|
display: flex;
|
|
59
56
|
align-items: center;
|
|
60
57
|
gap: 8px;
|
|
61
|
-
`,
|
|
58
|
+
`,l=i.default.div`
|
|
62
59
|
z-index: 1001;
|
|
63
60
|
position: fixed;
|
|
64
61
|
border-left: 4px solid transparent;
|
|
65
|
-
`,
|
|
62
|
+
`,x=i.default.div`
|
|
66
63
|
margin: 4px;
|
|
67
64
|
background-color: ${t.COLORS.surface.standard};
|
|
68
65
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
69
66
|
border-radius: 8px;
|
|
70
67
|
padding-top: 4px;
|
|
71
68
|
max-height: 480px;
|
|
72
|
-
padding-bottom: 4px;
|
|
73
69
|
overflow-y: scroll;
|
|
74
70
|
|
|
75
71
|
&::-webkit-scrollbar {
|
|
76
72
|
display: none;
|
|
77
73
|
}
|
|
78
|
-
|
|
79
|
-
width: 16px;
|
|
80
|
-
height: 16px;
|
|
81
|
-
display: flex;
|
|
82
|
-
align-items: center;
|
|
83
|
-
justify-content: center;
|
|
84
|
-
margin-right: 4px;
|
|
85
|
-
`,g=r.default.div`
|
|
86
|
-
width: 16px;
|
|
87
|
-
height: 16px;
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
margin-left: 4px;
|
|
92
|
-
`,h=r.default.div`
|
|
93
|
-
width: ${e=>e.width};
|
|
94
|
-
`,b=r.default(x)`
|
|
95
|
-
width: ${e=>e.width};
|
|
96
|
-
top: ${e=>e.top}px;
|
|
97
|
-
left: ${e=>e.left}px;
|
|
98
|
-
`;exports.ContentContainer=u,exports.DropdownContainer=n,exports.GroupedMenuListContainer=a,exports.LeadingIconContainer=f,exports.MenuItemContainer=l,exports.MenuItemWrapper=s,exports.NoResultsContainer=d,exports.OptionsContainer=o,exports.StyledMenuList=p,exports.StyledSubMenuWrapper=b,exports.SubMenuContainer=h,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=g;
|
|
74
|
+
`;exports.Container=x,exports.ContentContainer=u,exports.DropdownContainer=o,exports.GroupedMenuListContainer=a,exports.MenuItemContainer=p,exports.MenuItemWrapper=s,exports.NoResultsContainer=n,exports.StyledMenuList=d,exports.SubMenuWrapper=l;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
export interface MultiLevelDropdownProps extends FloaterProps {
|
|
2
|
+
export interface MultiLevelDropdownProps {
|
|
4
3
|
options: MultiLevelDropdownOption[];
|
|
5
4
|
width?: string;
|
|
6
5
|
isSearchable?: boolean;
|
|
7
|
-
|
|
8
|
-
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
9
|
-
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
10
7
|
}
|
|
11
8
|
export type GroupedOption = {
|
|
12
9
|
label: string;
|
|
@@ -29,7 +29,7 @@ interface CollectionsScreenInterface {
|
|
|
29
29
|
export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
export interface CollectionCardInterface {
|
|
31
31
|
customCollectionRestriction?: boolean;
|
|
32
|
-
data
|
|
32
|
+
data: Collection;
|
|
33
33
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
34
34
|
setCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
35
35
|
setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),i=require("../checkBox/CheckBox.js"),o=require("../icon-button/IconButton.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight.svg.js"),l=require("react"),i=require("../checkBox/CheckBox.js"),o=require("../icon-button/IconButton.js"),c=require("../tag/Tag.js"),s=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),n=require("./emptyState.js"),d=require("./ProductPickerShimmer.js"),a=require("./style.js"),u=require("./utility.js");const h=l=>{const{customCollectionRestriction:n,data:d,selectedCollectionsDispatch:u,setCollectionId:h,setSelectedCollectionId:C,isPartiallyChecked:p,setScreen:j,id:v,isChecked:y,isDisabled:g,hideCollectionCheckbox:x,pickerType:m,usedInSearch:b}=l;return e.jsxs(a.CollectionCardStyle,Object.assign({isDisabled:g,onClick:e=>{if(!g){if("COLLECTION"===m)return e.stopPropagation(),u({type:"reset",data:{}}),u({type:"selected",data:{id:v,val:d,isRestricted:n}}),h(v),void C(v);h(v),C(v),j("products")}},isActive:y,usedInSearch:null!=b&&b},{children:[e.jsxs(a.CollectionCardInfoStyle,{children:[!x&&e.jsx(i.CheckBox,{isDisabled:g,isChecked:y,isPartiallyChecked:p,onValueChange:function(e,t,l){null==l||l.stopPropagation(),u(e?{type:"selected",data:{id:v,val:d,isRestricted:n}}:{type:"unselected",data:{id:v}}),C(e?v:"")}}),e.jsx(a.CollectionCardDetailStyle,{children:e.jsx(s.Tooltip,Object.assign({body:d.name,placement:"bottom",delay:400,variant:"light"},{children:e.jsxs(a.CollectionNameHolder,{children:[b?e.jsx(r.BodyPrimary,Object.assign({numberOfLines:1},{children:d.name})):e.jsx(r.TitleRegular,Object.assign({numberOfLines:1},{children:d.name})),d.isSmartCollection?e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(c.Tag,{tagText:"Smart Collection",type:"warning"})})):e.jsx(e.Fragment,{})]})}))})]}),"COLLECTION"!==m&&e.jsx(o.IconButton,{height:12,width:12,disabled:g,Icon:t.default})]}))};exports.CollectionCard=h,exports.CollectionsScreen=t=>{var i;const{customCollectionRestriction:o,dataLoading:c,collections:s,selectedCollectionsDispatch:r,setCollectionId:a,setSelectedCollectionId:C,selectedCollections:p,setScreen:j,collectionFetcher:v,collectionsDispatch:y,pagingControls:g,storeId:x,setSaveDisabled:m,hideCollectionCheckbox:b,renderWithoutModal:k,pickerType:f,scrollContainerRef:S}=t,P=l.useRef(g.curPage),O=!!o&&(null==p?void 0:p.isCustom),[I,T]=l.useState(!1),q=l.useRef(!1),R=l.useRef(!1),D=()=>{if(!S||!(null==S?void 0:S.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:l}=S.current;e+t>=l-20&&!q.current&&!R.current&&(m(!0),T(!0),R.current=!0,m(!0),T(!0),v(P.current,x).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),g.setCurPage(P.current+1),T(!1),m(!1),R.current=!1,Object.keys(null==e?void 0:e.collections).length||(q.current=!0)})).catch())};return l.useEffect((()=>{var e;return null===(e=null==S?void 0:S.current)||void 0===e||e.addEventListener("scroll",D),()=>{var e;null===(e=null==S?void 0:S.current)||void 0===e||e.removeEventListener("scroll",D)}}),[]),l.useEffect((()=>{P.current=g.curPage}),[g.curPage]),e.jsxs("div",{children:[(null===(i=Object.keys(null!=s?s:{}))||void 0===i?void 0:i.length)?Object.keys(s).map((t=>{var l,i;const c=!!(null==p?void 0:p[t])&&("PRODUCT"!==f||!!Object.keys(null!==(i=null===(l=null==p?void 0:p[t])||void 0===l?void 0:l.products)&&void 0!==i?i:{}).length);return e.jsx(h,{customCollectionRestriction:o,data:s[t],isDisabled:O&&!(null==p?void 0:p[t]),isChecked:c,isPartiallyChecked:u.isCollectionPartiallyChecked(t,null==s?void 0:s[t],p),selectedCollectionsDispatch:r,setCollectionId:a,setSelectedCollectionId:C,setScreen:j,id:t,hideCollectionCheckbox:b||"-1"===t,selectedCollections:p,renderWithoutModal:k,pickerType:f},t)})):c?e.jsx(d.ProductPickerShimmer,{}):e.jsx(n.EmptyState,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),I&&e.jsx(d.ProductPickerShimmer,{})]})},exports.truncate=(e,t,l)=>{if(!e)return"";if(e.length<=t)return e;const i=e.slice(0,t-1);return(l?i.slice(0,i.lastIndexOf(" ")):i)+"..."};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("lodash");const e=require("react").createContext("");exports.CollectionIdContext=e,exports.collectionsReducer=function(t,e){let a={};switch(e.type){case"fetched":return a=Object.assign({},e.data),a;case"productsFetched":return a=Object.assign({},t),a[e.data.collectionId].products=e.data.products,a;case"paged":return a=Object.assign(Object.assign({},t),e.data),a;case"productsPaged":return a=Object.assign({},t),a[e.data.collectionId].products=Object.assign(Object.assign({},a[e.data.collectionId].products),e.data.products),a;case"searched":a=Object.assign({},t);for(const t in e.data)t in a||(a[t]=e.data[t]);return a;default:return{}}},exports.paginationReducer=function(t,e){let a={};switch(e.type){case"paginate":a=Object.assign({},t);for(const t in e.data)if(Object.prototype.hasOwnProperty.call(e.data,t)){const s=e.data[t];if(Object.prototype.hasOwnProperty.call(a,t)){const e=a[t];a[t]=Object.assign(Object.assign({},e),{products:Object.assign(Object.assign({},e.products),s.products)})}else a[t]=s}return a;case"update":return a=Object.assign({},t),a;case"set":return a=Object.assign(Object.assign({},t),e.data),a;case"filter":a={};for(const s in t)if(s in e.data){const c=Object.assign({},t[s]),d=e.data[s],o={};for(const t in c.products)if(t in d.products){const e=Object.assign({},c.products[t]),a=d.products[t],s={};for(const t in e.variants)t in a.variants&&(s[t]=Object.assign({},e.variants[t]));Object.keys(s).length>0&&(e.variants=s,o[t]=e)}Object.keys(o).length>0&&(c.products=o,a[s]=c)}return a;default:return t}},exports.searchReducer=function(t,e){let a={collections:{},products:{}};switch(e.type){case"set":return e.data;case"setProducts":return a=Object.assign({},t),a.products=e.data,a;default:return t}},exports.selectedColectionsReducer=function(e,a){var s,c,d,o,r,n,i,l,u,p,v;let O={},g="",b="",j="";switch(a.type){case"selected":return O=t.cloneDeep(e),a.data.val.isSmartCollection&&(a.data.isRestricted&&(O={}),O.isCustom=!0),O[a.data.id]=a.data.val,O;case"unselected":return O=t.cloneDeep(e),(null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[a.data.id],O;case"productUnselected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,delete O[b].products[g],Object.keys(O[b].products).length||((null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[b]),O;case"productSelected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,(null===(s=a.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(a.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=a.data.catalogOnlyData,O[b].products={}),O[b].products[g]=a.data.product,O;case"variantSelected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,j=a.data.variantId,(null===(c=a.data.catalogOnlyData)||void 0===c?void 0:c.isSmartCollection)&&(a.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=a.data.catalogOnlyData,O[b].products={},O[b].products[g]=a.data.productOnlyData,O[b].products[g].variants={}),(null===(d=null==O?void 0:O[b])||void 0===d?void 0:d.products)||
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("lodash");const e=require("react").createContext("");exports.CollectionIdContext=e,exports.collectionsReducer=function(t,e){let a={};switch(e.type){case"fetched":return a=Object.assign({},e.data),a;case"productsFetched":return a=Object.assign({},t),a[e.data.collectionId].products=e.data.products,a;case"paged":return a=Object.assign(Object.assign({},t),e.data),a;case"productsPaged":return a=Object.assign({},t),a[e.data.collectionId].products=Object.assign(Object.assign({},a[e.data.collectionId].products),e.data.products),a;case"searched":a=Object.assign({},t);for(const t in e.data)t in a||(a[t]=e.data[t]);return a;default:return{}}},exports.paginationReducer=function(t,e){let a={};switch(e.type){case"paginate":a=Object.assign({},t);for(const t in e.data)if(Object.prototype.hasOwnProperty.call(e.data,t)){const s=e.data[t];if(Object.prototype.hasOwnProperty.call(a,t)){const e=a[t];a[t]=Object.assign(Object.assign({},e),{products:Object.assign(Object.assign({},e.products),s.products)})}else a[t]=s}return a;case"update":return a=Object.assign({},t),a;case"set":return a=Object.assign(Object.assign({},t),e.data),a;case"filter":a={};for(const s in t)if(s in e.data){const c=Object.assign({},t[s]),d=e.data[s],o={};for(const t in c.products)if(t in d.products){const e=Object.assign({},c.products[t]),a=d.products[t],s={};for(const t in e.variants)t in a.variants&&(s[t]=Object.assign({},e.variants[t]));Object.keys(s).length>0&&(e.variants=s,o[t]=e)}Object.keys(o).length>0&&(c.products=o,a[s]=c)}return a;default:return t}},exports.searchReducer=function(t,e){let a={collections:{},products:{}};switch(e.type){case"set":return e.data;case"setProducts":return a=Object.assign({},t),a.products=e.data,a;default:return t}},exports.selectedColectionsReducer=function(e,a){var s,c,d,o,r,n,i,l,u,p,v;let O={},g="",b="",j="";switch(a.type){case"selected":return O=t.cloneDeep(e),a.data.val.isSmartCollection&&(a.data.isRestricted&&(O={}),O.isCustom=!0),O[a.data.id]=a.data.val,O;case"unselected":return O=t.cloneDeep(e),(null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[a.data.id],O;case"productUnselected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,delete O[b].products[g],Object.keys(O[b].products).length||((null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[b]),O;case"productSelected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,(null===(s=a.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(a.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=a.data.catalogOnlyData,O[b].products={}),O[b].products[g]=a.data.product,O;case"variantSelected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,j=a.data.variantId,(null===(c=a.data.catalogOnlyData)||void 0===c?void 0:c.isSmartCollection)&&(a.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=a.data.catalogOnlyData,O[b].products={},O[b].products[g]=a.data.productOnlyData,O[b].products[g].variants={}),(null===(o=null===(d=null==O?void 0:O[b])||void 0===d?void 0:d.products)||void 0===o?void 0:o[g])||((null===(r=null==O?void 0:O[b])||void 0===r?void 0:r.products)||(O[b].products={}),O[b].products[g]=a.data.productOnlyData,O[b].products[g].variants={}),O[b].products[g].variants[j]=a.data.variant,O;case"variantUnselected":return O=t.cloneDeep(e),g=a.data.productId,b=a.data.collectionId,j=a.data.variantId,(null===(i=null===(n=O[b].products[g])||void 0===n?void 0:n.variants)||void 0===i?void 0:i[j])&&delete O[b].products[g].variants[j],Object.keys(null!==(p=null===(u=null===(l=O[b].products)||void 0===l?void 0:l[g])||void 0===u?void 0:u.variants)&&void 0!==p?p:{}).length||(delete O[b].products[g],Object.keys(O[b].products).length||((null===(v=O[b])||void 0===v?void 0:v.isSmartCollection)&&(O.isCustom=!1),delete O[b])),O;case"update":return O=Object.assign({},e),O;case"reset":return{};default:return e}};
|
|
@@ -7,5 +7,4 @@
|
|
|
7
7
|
border-radius: 4px;
|
|
8
8
|
margin-right: 12px;
|
|
9
9
|
color: ${i.COLORS.content.negative};
|
|
10
|
-
height: 32px;
|
|
11
10
|
`;exports.Badge=r=>{const{errorText:a,padding:d}=r;return e.jsxs(s,Object.assign({padding:d},{children:[e.jsx(t.default,{height:20,width:20,color:i.COLORS.content.negative}),e.jsx(n.BodySecondary,{children:a})]}))},exports.BadgeContainer=s;
|
|
@@ -60,7 +60,5 @@ export interface TemplateContextMapperProps {
|
|
|
60
60
|
disableCopyCode?: boolean;
|
|
61
61
|
initialExpiryDateTime?: string;
|
|
62
62
|
showDiscountCodeExpiryInfo?: boolean;
|
|
63
|
-
footerButtonText?: string;
|
|
64
|
-
footerInfoText?: string;
|
|
65
63
|
}
|
|
66
64
|
export declare const TemplateContextMapper: (props: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{var v,m,C,h,b,S,E,x;const{selectedTemplate:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{var v,m,C,h,b,S,E,x;const{selectedTemplate:P,closeDialog:f,showVariableMapping:g,channel:T,htmlContent:y,templateVariables:D,onTemplateSelect:I,globalPlaceholders:L,showOnlyContent:j,whatsappSpecificPickerMeta:w,zIndex:k,showVariableModal:V,variableList:A,discountCode:H,setDiscountCode:M,onBackPress:N,enabledCustomText:O,variableListForImage:q,showSampleValues:B,disableEditVariable:F,pod:_,extras:W,pickerConf:Y,selectedCarouselProducts:R,disableEditExpiry:z,cardWidth:U,onDeleteSelectedProducts:$,fileName:G,setFileName:J,hideDeviceContainerInPreview:K,maxCharLimit:Q,onDefaultVariableSelect:X,skipDefaultVariableContent:Z,disableDatePicker:ee,disableCopyCode:te,initialExpiryDateTime:le,showDiscountCodeExpiryInfo:oe}=p;l.useEffect((()=>{ce(y)}),[y]);const ae=T===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(m=null===(v=null==P?void 0:P.components)||void 0===v?void 0:v[1])||void 0===m?void 0:m.type),ie=null==P?void 0:P.isProductCarouselType,[re,se]=l.useState(T===r.CHANNEL_TYPE.EMAIL||T==r.CHANNEL_TYPE.WEBPUSH||ae?"desktop":"mobile"),[ne,de]=l.useState(!1),[ue,ce]=l.useState(y),[pe,ve]=l.useState(!1),[me,Ce]=l.useState([]),[he,be]=l.useState({}),[Se,Ee]=l.useState(P),[xe,Pe]=l.useState([]),[fe,ge]=l.useState(null),[Te,ye]=l.useState(!1),[De,Ie]=l.useState(null!=D?D:[]),[Le,je]=l.useState(!1),[we,ke]=l.useState(ae?(null===(h=null===(C=null==Se?void 0:Se.mapping)||void 0===C?void 0:C.body)||void 0===h?void 0:h.length)?-1:0:-1),[Ve,Ae]=l.useState([]),[He,Me]=l.useState(void 0),Ne=l.useRef(null),[Oe,qe]=l.useState(!1),[Be,Fe]=l.useState(!1),[_e,We]=l.useState(!1),[Ye,Re]=l.useState({});l.useEffect((()=>{R?Ae(R):ie&&Ae([])}),[R]),l.useEffect((()=>{var e;if(!Te&&ie&&(!R||0===Ae.length)){const t=null===(e=null==Se?void 0:Se.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),Pe(l),ye(!0)}}),[Te]);const ze=l.useMemo((()=>c.convertPlaceholdersToBikDropdown(L)),[L]);return l.useEffect((()=>{Me(t.cloneDeep(A))}),[A]),e.jsx(n.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:_e,setHideFooterButton:We,hideCrossButton:Be,setHideCrossButton:Fe,variableList:He,setVariableList:Me,variableCallback:fe,setVariableCallback:ge,showVariablePicker:ne,setShowVariablePicker:de,template:Se,setTemplate:Ee,device:re,setDevice:se,display_content:ue,setDisplayContent:ce,originalVariableList:De,setOriginalVariableList:Ie,isError:pe,setIsError:ve,channel:T,globalNormalizedPlaceholders:ze,templateSelectionTriggered:Le,setTemplateSelectionTriggered:je,enabledCustomText:O,disableEditVariable:F,pod:_,extras:W,isWhatsappCarousel:ae,selectedCarouselIndex:we,setSelectedCarouselIndex:ke,isProductCarouselType:ie,templateErrorIndexes:he,cardCount:ae?null===(S=null===(b=P.components)||void 0===b?void 0:b[1].cards)||void 0===S?void 0:S.length:void 0,errorIndexes:me,setErrorIndexes:Ce,pickerConf:Y,carouselProducts:Ve,setCarouselProducts:Ae,disableEditExpiry:z,cardWidth:U,cardImages:xe,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:K,sliderRef:Ne,isCarouselHovered:Oe,setIsCarouselHovered:qe,maxCharLimit:Q,ctaOptionsErrors:Ye,setCtaOptionsErrors:Re,onDefaultVariableSelect:X,disableDatePicker:ee,disableCopyCode:te,initialExpiryDateTime:le,showDiscountCodeExpiryInfo:oe}},{children:j?e.jsx(u.default,{variableListFromProps:A,channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(i.StyledModal,Object.assign({hideCrossButton:Be,zIndex:k,centralContainerStyles:{width:ae?900:T===r.CHANNEL_TYPE.EMAIL&&g?1e3:800},open:!0,onClose:()=>{null==f||f()},headingTitle:null==Se?void 0:Se.label,headingSubtitle:T===r.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(E=null==Se?void 0:Se.category)&&void 0!==E?E:"")} • ${null!==(x=null==Se?void 0:Se.templateCategory)&&void 0!==x?x:""}`:"",onBackPress:()=>{null==N||N()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(u.default,{variableListFromProps:A,showSampleValues:B,showVariableMapping:g,channel:T,whatsappSpecificPickerMeta:w,showVariableModal:V,discountCode:H,setDiscountCode:M,variableListForImage:q&&(null==q?void 0:q.length)>0?q:He,fileName:G,setFileName:e=>{null==J||J(e)},skipDefaultVariableContent:Z}),I?e.jsx(d.default,{isWhatsappCarousel:null!=ae&&ae,onSelect:function(){var e;if((null==Ve?void 0:Ve.length)<1&&ie)return void ve(!0);if(Object.keys(Ye).length>0&&_!==s.POD.CHATBOT)return void ve(!0);const t=null==I?void 0:I(Se,De,null!=ue?ue:"",Ve);be(null!==(e=null==t?void 0:t.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==t?void 0:t.errorIndexes)||(null==t?void 0:t.error)?((null==t?void 0:t.errorIndexes)&&Ce(t.errorIndexes),(null==t?void 0:t.error)&&ve(!!(null==t?void 0:t.error))):je(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
export interface FooterProps {
|
|
2
2
|
isWhatsappCarousel: boolean;
|
|
3
3
|
onSelect: () => void;
|
|
4
|
-
footerButtonText?: string;
|
|
5
|
-
footerInfoText?: string;
|
|
6
4
|
}
|
|
7
|
-
declare const Footer: ({ isWhatsappCarousel, onSelect
|
|
5
|
+
declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
6
|
export default Footer;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),o=require("../../button/Button.js"),s=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),n=require("../Badge/index.js"),i=require("../context/templateModalContext.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(r).default.div`
|
|
2
2
|
background: ${l.COLORS.surface.standard};
|
|
3
3
|
border-top-width: 1px;
|
|
4
4
|
border-top-color: ${l.COLORS.stroke.primary};
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
border-bottom-left-radius: 4px;
|
|
13
13
|
border-bottom-right-radius: 4px;
|
|
14
14
|
height: ${e=>e.isWhatsappCarousel?64:80}px;
|
|
15
|
-
`;exports.default=
|
|
15
|
+
`;exports.default=r=>{let{isWhatsappCarousel:a,onSelect:u}=r;var p,c,x,b;const{isError:g,selectedCarouselIndex:h,setSelectedCarouselIndex:j,setErrorIndexes:f,template:m,showVariablePicker:v,hideFooterButton:y}=i.useTemplateModalContext(),[C,S]=t.useState(a?"Next":"Select template");return t.useEffect((()=>{a&&-1===h?S("Next"):a&&null!=h&&h>-1&&S("Save & Select Template")}),[h]),e.jsxs(d,Object.assign({isWhatsappCarousel:a,justifyContent:a&&(null===(c=null===(p=null==m?void 0:m.mapping)||void 0===p?void 0:p.body)||void 0===c?void 0:c.length)?"space-between":"end"},{children:[a&&null!=h&&h>=-1&&!!(null===(b=null===(x=null==m?void 0:m.mapping)||void 0===x?void 0:x.body)||void 0===b?void 0:b.length)&&e.jsx(s.TitleRegular,Object.assign({color:l.COLORS.text.secondary},{children:`Step ${-1===h?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&e.jsx(n.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),!y&&e.jsx(o.Button,{disabled:v,id:"select-template-btn",buttonText:C,size:a?"small":"large",onClick:function(){a&&-1===h&&j?j(0):(null==f||f([]),u())}})]}))]}))};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { GroupedOption, MultiLevelDropdownOption } from './type';
|
|
3
3
|
export declare const GroupedMenuList: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: GroupedOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as e}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as p}from"./MenuItem.js";import{GroupedMenuListContainer as n}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:m,onDropdownItemClick:l,option:s,parents:c}=i;return o(n,{children:[t(r,Object.assign({style:{padding:"4px 8px 4px 12px"},color:e.content.placeholder},{children:s.label})),s.options.map(((o,e)=>t(p,{width:m,onDropdownItemClick:l,option:o,parents:c},e)))]})};export{i as GroupedMenuList};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { MultiLevelDropdownOption, SingleOption } from './type';
|
|
3
3
|
export declare const MenuItem: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
option: SingleOption;
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as r,BodyTiny as c}from"../TypographyStyle.js";import{MenuList as d}from"./MenuList.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as u,SubMenuWrapper as h,Container as m}from"./MultiLevelDropdown.styled.js";const v=v=>{let{width:g,onDropdownItemClick:b,option:f,parents:j}=v;var y,w,x,C,I,M,O;const[S,T]=i.useState(!1),[k,D]=i.useState(!1),[L,E]=i.useState({top:0,left:0}),R=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{T(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();E({top:t.top,left:t.right}),R.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{T(!1)},onClick:()=>{var e;null!==(e=f.disabled)&&void 0!==e&&e||f.children||b(f,j)},id:"menuItemWrapper",style:{cursor:null!==(y=f.disabled)&&void 0!==y&&y?"not-allowed":"pointer",backgroundColor:null!==(w=f.disabled)&&void 0!==w&&w?s.surface.standard:"transparent"}},{children:[f.customComponent?f.customComponent:e(p,Object.assign({isSelected:f.selected,isSubMenuOpen:S,isHovered:k,isDisabled:null!==(x=f.disabled)&&void 0!==x&&x},{children:[e(u,{children:[f.leadingIcon&&f.leadingIcon,e("div",{children:[t(r,Object.assign({style:{color:null!==(C=f.disabled)&&void 0!==C&&C?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}},{children:f.label})),f.subText&&t(c,Object.assign({style:{color:null!==(I=f.disabled)&&void 0!==I&&I?s.content.inactive:f.selected||k?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:f.subText}))]})]}),f.children&&f.children.length>0?t(o,{width:16,height:16,color:null!==(M=f.disabled)&&void 0!==M&&M?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}):f.trailingIcon?f.trailingIcon:t(n,{})]})),!(null!==(O=f.disabled)&&void 0!==O&&O)&&f.children&&f.children.length>0&&S&&t("div",Object.assign({style:{width:g},className:"submenu",onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1)},{children:t(h,Object.assign({style:{width:g,top:`${L.top}px`,left:`${L.left}px`}},{children:t(m,{children:t(d,{width:g,onDropdownItemClick:b,options:f.children,parents:[...j,f]})})}))}))]}))};export{v as MenuItem};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { MultiLevelDropdownOption } from './type';
|
|
3
3
|
export declare const MenuList: React.FC<{
|
|
4
4
|
width: string;
|
|
5
|
-
onDropdownItemClick
|
|
5
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
6
|
options: MultiLevelDropdownOption[];
|
|
7
7
|
parents: MultiLevelDropdownOption[];
|
|
8
8
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{ZeroState as o}from"../zeroState/ZeroState.js";import{SearchBox as r}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{MenuList as n}from"./MenuList.js";import{DropdownContainer as i,NoResultsContainer as s}from"./MultiLevelDropdown.styled.js";const l=l=>{let{options:p,width:a,isSearchable:c,onDropdownItemClick:d}=l;return t(i,Object.assign({width:a},{children:[c&&e("div",Object.assign({style:{padding:"4px 4px 0",width:null!=a?a:"200px"}},{children:e(r,{onSearch:t=>{console.log({searchString:t})},version:"2.0"})})),(null!=p?p:[]).length>0&&e(n,{width:null!=a?a:"200px",onDropdownItemClick:d,options:p,parents:[]}),0===(null!=p?p:[]).length&&e(s,{children:e(o,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})]}))};export{l as MultiLevelDropdown};
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
width?: string | undefined;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const
|
|
5
|
-
width?: string | undefined;
|
|
6
|
-
}, never>;
|
|
7
|
-
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
-
width?: string | undefined;
|
|
9
|
-
}, never>;
|
|
4
|
+
export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
5
|
export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
6
|
export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
7
|
export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -19,14 +14,4 @@ export interface MenuItemContainerProps {
|
|
|
19
14
|
export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
|
|
20
15
|
export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
16
|
export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
-
export declare const
|
|
23
|
-
export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
|
-
export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
25
|
-
export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
|
|
26
|
-
width: string;
|
|
27
|
-
}, never>;
|
|
28
|
-
export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
29
|
-
width: string;
|
|
30
|
-
top: number;
|
|
31
|
-
left: number;
|
|
32
|
-
}, never>;
|
|
17
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,35 +1,32 @@
|
|
|
1
1
|
import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
border-radius: 8px;
|
|
4
|
-
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
-
padding-bottom: 4px;
|
|
6
|
-
`,r=e.div`
|
|
7
3
|
width: ${e=>{let{width:i}=e;return i||"200px"}};
|
|
8
4
|
max-width: 300px;
|
|
9
5
|
max-height: 280px;
|
|
10
6
|
overflow-y: scroll;
|
|
11
|
-
|
|
7
|
+
border-radius: 8px;
|
|
8
|
+
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
12
9
|
&::-webkit-scrollbar {
|
|
13
10
|
width: 0px;
|
|
14
11
|
}
|
|
15
|
-
`,
|
|
12
|
+
`,r=e.div`
|
|
16
13
|
margin-top: 64px;
|
|
17
14
|
height: 200px;
|
|
18
|
-
|
|
19
|
-
`,d=e.div`
|
|
15
|
+
`,o=e.div`
|
|
20
16
|
width: 100%;
|
|
21
17
|
justify-content: center;
|
|
22
18
|
cursor: pointer;
|
|
23
19
|
align-items: center;
|
|
24
20
|
justify-content: space-between;
|
|
25
21
|
margin: 4px 0;
|
|
26
|
-
`,
|
|
22
|
+
`,n=e.div`
|
|
27
23
|
z-index: 1000;
|
|
28
24
|
position: relative;
|
|
29
25
|
margin: 0px;
|
|
30
26
|
padding: 0px;
|
|
27
|
+
padding-bottom: 4px;
|
|
31
28
|
width: 100%;
|
|
32
|
-
`,
|
|
29
|
+
`,d=e.div`
|
|
33
30
|
position: relative;
|
|
34
31
|
padding: 1px 4px;
|
|
35
32
|
cursor: pointer;
|
|
@@ -40,12 +37,12 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
40
37
|
}
|
|
41
38
|
`,s=e.div`
|
|
42
39
|
position: relative;
|
|
43
|
-
padding: 4px 8px 4px
|
|
40
|
+
padding: 4px 8px 4px 12px;
|
|
44
41
|
transition: background-color 0.2s;
|
|
45
42
|
width: 100%;
|
|
46
43
|
border-radius: 8px;
|
|
47
44
|
justify-content: center;
|
|
48
|
-
background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:
|
|
45
|
+
background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:o,isDisabled:n}=e;return n?i.surface.standard:t||o?i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
|
|
49
46
|
color: ${e=>{let{isSelected:t,isSubMenuOpen:r}=e;return t||r?i.content.positive:i.content.primary}};
|
|
50
47
|
display: flex;
|
|
51
48
|
align-items: center;
|
|
@@ -54,45 +51,24 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
54
51
|
&:hover {
|
|
55
52
|
background-color: ${e=>{let{isSelected:t,isDisabled:r}=e;return r?i.surface.standard:t?i.background.positive.light:i.surface.hovered}};
|
|
56
53
|
}
|
|
57
|
-
`,
|
|
54
|
+
`,p=e.div`
|
|
58
55
|
display: flex;
|
|
59
56
|
align-items: center;
|
|
60
57
|
gap: 8px;
|
|
61
|
-
`,
|
|
58
|
+
`,a=e.div`
|
|
62
59
|
z-index: 1001;
|
|
63
60
|
position: fixed;
|
|
64
61
|
border-left: 4px solid transparent;
|
|
65
|
-
`,
|
|
62
|
+
`,c=e.div`
|
|
66
63
|
margin: 4px;
|
|
67
64
|
background-color: ${i.surface.standard};
|
|
68
65
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
69
66
|
border-radius: 8px;
|
|
70
67
|
padding-top: 4px;
|
|
71
68
|
max-height: 480px;
|
|
72
|
-
padding-bottom: 4px;
|
|
73
69
|
overflow-y: scroll;
|
|
74
70
|
|
|
75
71
|
&::-webkit-scrollbar {
|
|
76
72
|
display: none;
|
|
77
73
|
}
|
|
78
|
-
|
|
79
|
-
width: 16px;
|
|
80
|
-
height: 16px;
|
|
81
|
-
display: flex;
|
|
82
|
-
align-items: center;
|
|
83
|
-
justify-content: center;
|
|
84
|
-
margin-right: 4px;
|
|
85
|
-
`,h=e.div`
|
|
86
|
-
width: 16px;
|
|
87
|
-
height: 16px;
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
margin-left: 4px;
|
|
92
|
-
`,u=e.div`
|
|
93
|
-
width: ${e=>e.width};
|
|
94
|
-
`,g=e(x)`
|
|
95
|
-
width: ${e=>e.width};
|
|
96
|
-
top: ${e=>e.top}px;
|
|
97
|
-
left: ${e=>e.left}px;
|
|
98
|
-
`;export{a as ContentContainer,t as DropdownContainer,d as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,o as StyledMenuList,g as StyledSubMenuWrapper,u as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,h as TrailingIconContainer};
|
|
74
|
+
`;export{c as Container,p as ContentContainer,t as DropdownContainer,o as GroupedMenuListContainer,s as MenuItemContainer,d as MenuItemWrapper,r as NoResultsContainer,n as StyledMenuList,a as SubMenuWrapper};
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
export interface MultiLevelDropdownProps extends FloaterProps {
|
|
2
|
+
export interface MultiLevelDropdownProps {
|
|
4
3
|
options: MultiLevelDropdownOption[];
|
|
5
4
|
width?: string;
|
|
6
5
|
isSearchable?: boolean;
|
|
7
|
-
|
|
8
|
-
onDropdownOutsideClick?: (isOutsideClick: any) => void;
|
|
9
|
-
onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
6
|
+
onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
|
|
10
7
|
}
|
|
11
8
|
export type GroupedOption = {
|
|
12
9
|
label: string;
|
|
@@ -29,7 +29,7 @@ interface CollectionsScreenInterface {
|
|
|
29
29
|
export declare const CollectionsScreen: (props: CollectionsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
30
30
|
export interface CollectionCardInterface {
|
|
31
31
|
customCollectionRestriction?: boolean;
|
|
32
|
-
data
|
|
32
|
+
data: Collection;
|
|
33
33
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
34
34
|
setCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
35
35
|
setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as l,useState as c,useEffect as n}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as a}from"../tooltips/Tooltip.js";import{TitleRegular as u,BodyPrimary as h}from"../TypographyStyle.js";import{EmptyState as p}from"./emptyState.js";import{ProductPickerShimmer as m}from"./ProductPickerShimmer.js";import{CollectionCardStyle as C,CollectionCardInfoStyle as v,CollectionCardDetailStyle as g,CollectionNameHolder as y}from"./style.js";import{isCollectionPartiallyChecked as f}from"./utility.js";const b=(e,t,o)=>{if(!e)return"";if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},k=o=>{var i;const{customCollectionRestriction:r,dataLoading:s,collections:d,selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,selectedCollections:C,setScreen:v,collectionFetcher:g,collectionsDispatch:y,pagingControls:b,storeId:k,setSaveDisabled:O,hideCollectionCheckbox:I,renderWithoutModal:S,pickerType:P,scrollContainerRef:T}=o,x=l(b.curPage),D=!!r&&(null==C?void 0:C.isCustom),[L,R]=c(!1),E=l(!1),w=l(!1),B=()=>{if(!T||!(null==T?void 0:T.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:o}=T.current;e+t>=o-20&&!E.current&&!w.current&&(O(!0),R(!0),w.current=!0,O(!0),R(!0),g(x.current,k).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),b.setCurPage(x.current+1),R(!1),O(!1),w.current=!1,Object.keys(null==e?void 0:e.collections).length||(E.current=!0)})).catch())};return n((()=>{var e;return null===(e=null==T?void 0:T.current)||void 0===e||e.addEventListener("scroll",B),()=>{var e;null===(e=null==T?void 0:T.current)||void 0===e||e.removeEventListener("scroll",B)}}),[]),n((()=>{x.current=b.curPage}),[b.curPage]),e("div",{children:[(null===(i=Object.keys(null!=d?d:{}))||void 0===i?void 0:i.length)?Object.keys(d).map((e=>{var o,i;const l=!!(null==C?void 0:C[e])&&("PRODUCT"!==P||!!Object.keys(null!==(i=null===(o=null==C?void 0:C[e])||void 0===o?void 0:o.products)&&void 0!==i?i:{}).length);return t(j,{customCollectionRestriction:r,data:d[e],isDisabled:D&&!(null==C?void 0:C[e]),isChecked:l,isPartiallyChecked:f(e,null==d?void 0:d[e],C),selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,setScreen:v,id:e,hideCollectionCheckbox:I||"-1"===e,selectedCollections:C,renderWithoutModal:S,pickerType:P},e)})):s?t(m,{}):t(p,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),L&&t(m,{})]})},j=l=>{const{customCollectionRestriction:c,data:n,selectedCollectionsDispatch:p,setCollectionId:m,setSelectedCollectionId:f,isPartiallyChecked:b,setScreen:k,id:j,isChecked:O,isDisabled:I,hideCollectionCheckbox:S,pickerType:P,usedInSearch:T}=l;return
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as l,useState as c,useEffect as n}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as a}from"../tooltips/Tooltip.js";import{TitleRegular as u,BodyPrimary as h}from"../TypographyStyle.js";import{EmptyState as p}from"./emptyState.js";import{ProductPickerShimmer as m}from"./ProductPickerShimmer.js";import{CollectionCardStyle as C,CollectionCardInfoStyle as v,CollectionCardDetailStyle as g,CollectionNameHolder as y}from"./style.js";import{isCollectionPartiallyChecked as f}from"./utility.js";const b=(e,t,o)=>{if(!e)return"";if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},k=o=>{var i;const{customCollectionRestriction:r,dataLoading:s,collections:d,selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,selectedCollections:C,setScreen:v,collectionFetcher:g,collectionsDispatch:y,pagingControls:b,storeId:k,setSaveDisabled:O,hideCollectionCheckbox:I,renderWithoutModal:S,pickerType:P,scrollContainerRef:T}=o,x=l(b.curPage),D=!!r&&(null==C?void 0:C.isCustom),[L,R]=c(!1),E=l(!1),w=l(!1),B=()=>{if(!T||!(null==T?void 0:T.current))return;const{scrollTop:e,clientHeight:t,scrollHeight:o}=T.current;e+t>=o-20&&!E.current&&!w.current&&(O(!0),R(!0),w.current=!0,O(!0),R(!0),g(x.current,k).then((e=>{y({type:"paged",data:(null==e?void 0:e.collections)||{}}),b.setCurPage(x.current+1),R(!1),O(!1),w.current=!1,Object.keys(null==e?void 0:e.collections).length||(E.current=!0)})).catch())};return n((()=>{var e;return null===(e=null==T?void 0:T.current)||void 0===e||e.addEventListener("scroll",B),()=>{var e;null===(e=null==T?void 0:T.current)||void 0===e||e.removeEventListener("scroll",B)}}),[]),n((()=>{x.current=b.curPage}),[b.curPage]),e("div",{children:[(null===(i=Object.keys(null!=d?d:{}))||void 0===i?void 0:i.length)?Object.keys(d).map((e=>{var o,i;const l=!!(null==C?void 0:C[e])&&("PRODUCT"!==P||!!Object.keys(null!==(i=null===(o=null==C?void 0:C[e])||void 0===o?void 0:o.products)&&void 0!==i?i:{}).length);return t(j,{customCollectionRestriction:r,data:d[e],isDisabled:D&&!(null==C?void 0:C[e]),isChecked:l,isPartiallyChecked:f(e,null==d?void 0:d[e],C),selectedCollectionsDispatch:a,setCollectionId:u,setSelectedCollectionId:h,setScreen:v,id:e,hideCollectionCheckbox:I||"-1"===e,selectedCollections:C,renderWithoutModal:S,pickerType:P},e)})):s?t(m,{}):t(p,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),L&&t(m,{})]})},j=l=>{const{customCollectionRestriction:c,data:n,selectedCollectionsDispatch:p,setCollectionId:m,setSelectedCollectionId:f,isPartiallyChecked:b,setScreen:k,id:j,isChecked:O,isDisabled:I,hideCollectionCheckbox:S,pickerType:P,usedInSearch:T}=l;return e(C,Object.assign({isDisabled:I,onClick:e=>{if(!I){if("COLLECTION"===P)return e.stopPropagation(),p({type:"reset",data:{}}),p({type:"selected",data:{id:j,val:n,isRestricted:c}}),m(j),void f(j);m(j),f(j),k("products")}},isActive:O,usedInSearch:null!=T&&T},{children:[e(v,{children:[!S&&t(r,{isDisabled:I,isChecked:O,isPartiallyChecked:b,onValueChange:function(e,t,o){null==o||o.stopPropagation(),p(e?{type:"selected",data:{id:j,val:n,isRestricted:c}}:{type:"unselected",data:{id:j}}),f(e?j:"")}}),t(g,{children:t(a,Object.assign({body:n.name,placement:"bottom",delay:400,variant:"light"},{children:e(y,{children:[t(T?h:u,Object.assign({numberOfLines:1},{children:n.name})),n.isSmartCollection?t("div",Object.assign({style:{display:"flex"}},{children:t(d,{tagText:"Smart Collection",type:"warning"})})):t(o,{})]})}))})]}),"COLLECTION"!==P&&t(s,{height:12,width:12,disabled:I,Icon:i})]}))};export{j as CollectionCard,k as CollectionsScreen,b as truncate};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){var s,d,c,o,r,n,i,u,l,p,v;let O={},g="",b="",j="";switch(e.type){case"selected":return O=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(O={}),O.isCustom=!0),O[e.data.id]=e.data.val,O;case"unselected":return O=t(a),(null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[e.data.id],O;case"productUnselected":return O=t(a),g=e.data.productId,b=e.data.collectionId,delete O[b].products[g],Object.keys(O[b].products).length||((null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[b]),O;case"productSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,(null===(s=e.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={}),O[b].products[g]=e.data.product,O;case"variantSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,j=e.data.variantId,(null===(d=e.data.catalogOnlyData)||void 0===d?void 0:d.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={},O[b].products[g]=e.data.productOnlyData,O[b].products[g].variants={}),(null===(c=null==O?void 0:O[b])||void 0===c?void 0:c.products)||
|
|
1
|
+
import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function e(a,e){var s,d,c,o,r,n,i,u,l,p,v;let O={},g="",b="",j="";switch(e.type){case"selected":return O=t(a),e.data.val.isSmartCollection&&(e.data.isRestricted&&(O={}),O.isCustom=!0),O[e.data.id]=e.data.val,O;case"unselected":return O=t(a),(null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[e.data.id],O;case"productUnselected":return O=t(a),g=e.data.productId,b=e.data.collectionId,delete O[b].products[g],Object.keys(O[b].products).length||((null==O?void 0:O.isCustom)&&(O.isCustom=!1),delete O[b]),O;case"productSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,(null===(s=e.data.catalogOnlyData)||void 0===s?void 0:s.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={}),O[b].products[g]=e.data.product,O;case"variantSelected":return O=t(a),g=e.data.productId,b=e.data.collectionId,j=e.data.variantId,(null===(d=e.data.catalogOnlyData)||void 0===d?void 0:d.isSmartCollection)&&(e.data.isRestricted&&(O={}),O.isCustom=!0),(null==O?void 0:O[b])||(O[b]=e.data.catalogOnlyData,O[b].products={},O[b].products[g]=e.data.productOnlyData,O[b].products[g].variants={}),(null===(o=null===(c=null==O?void 0:O[b])||void 0===c?void 0:c.products)||void 0===o?void 0:o[g])||((null===(r=null==O?void 0:O[b])||void 0===r?void 0:r.products)||(O[b].products={}),O[b].products[g]=e.data.productOnlyData,O[b].products[g].variants={}),O[b].products[g].variants[j]=e.data.variant,O;case"variantUnselected":return O=t(a),g=e.data.productId,b=e.data.collectionId,j=e.data.variantId,(null===(i=null===(n=O[b].products[g])||void 0===n?void 0:n.variants)||void 0===i?void 0:i[j])&&delete O[b].products[g].variants[j],Object.keys(null!==(p=null===(l=null===(u=O[b].products)||void 0===u?void 0:u[g])||void 0===l?void 0:l.variants)&&void 0!==p?p:{}).length||(delete O[b].products[g],Object.keys(O[b].products).length||((null===(v=O[b])||void 0===v?void 0:v.isSmartCollection)&&(O.isCustom=!1),delete O[b])),O;case"update":return O=Object.assign({},a),O;case"reset":return{};default:return a}}function s(t,a){let e={};switch(a.type){case"fetched":return e=Object.assign({},a.data),e;case"productsFetched":return e=Object.assign({},t),e[a.data.collectionId].products=a.data.products,e;case"paged":return e=Object.assign(Object.assign({},t),a.data),e;case"productsPaged":return e=Object.assign({},t),e[a.data.collectionId].products=Object.assign(Object.assign({},e[a.data.collectionId].products),a.data.products),e;case"searched":e=Object.assign({},t);for(const t in a.data)t in e||(e[t]=a.data[t]);return e;default:return{}}}function d(t,a){let e={};switch(a.type){case"paginate":e=Object.assign({},t);for(const t in a.data)if(Object.prototype.hasOwnProperty.call(a.data,t)){const s=a.data[t];if(Object.prototype.hasOwnProperty.call(e,t)){const a=e[t];e[t]=Object.assign(Object.assign({},a),{products:Object.assign(Object.assign({},a.products),s.products)})}else e[t]=s}return e;case"update":return e=Object.assign({},t),e;case"set":return e=Object.assign(Object.assign({},t),a.data),e;case"filter":e={};for(const s in t)if(s in a.data){const d=Object.assign({},t[s]),c=a.data[s],o={};for(const t in d.products)if(t in c.products){const a=Object.assign({},d.products[t]),e=c.products[t],s={};for(const t in a.variants)t in e.variants&&(s[t]=Object.assign({},a.variants[t]));Object.keys(s).length>0&&(a.variants=s,o[t]=a)}Object.keys(o).length>0&&(d.products=o,e[s]=d)}return e;default:return t}}function c(t,a){let e={collections:{},products:{}};switch(a.type){case"set":return a.data;case"setProducts":return e=Object.assign({},t),e.products=a.data,e;default:return t}}const o=a("");export{o as CollectionIdContext,s as collectionsReducer,d as paginationReducer,c as searchReducer,e as selectedColectionsReducer};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import
|
|
2
|
-
background: ${
|
|
1
|
+
import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import n from"styled-components";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";const p=n.div`
|
|
2
|
+
background: ${i.background.negative.light};
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
5
|
padding: ${t=>t.padding?"8px":"0px"} 12px;
|
|
6
6
|
gap: 8px;
|
|
7
7
|
border-radius: 4px;
|
|
8
8
|
margin-right: 12px;
|
|
9
|
-
color: ${
|
|
10
|
-
|
|
11
|
-
`,a=i=>{const{errorText:a,padding:s}=i;return t(p,Object.assign({padding:s},{children:[r(e,{height:20,width:20,color:o.content.negative}),r(n,{children:a})]}))};export{a as Badge,p as BadgeContainer};
|
|
9
|
+
color: ${i.content.negative};
|
|
10
|
+
`,a=n=>{const{errorText:a,padding:s}=n;return t(p,Object.assign({padding:s},{children:[r(e,{height:20,width:20,color:i.content.negative}),r(o,{children:a})]}))};export{a as Badge,p as BadgeContainer};
|
|
@@ -60,7 +60,5 @@ export interface TemplateContextMapperProps {
|
|
|
60
60
|
disableCopyCode?: boolean;
|
|
61
61
|
initialExpiryDateTime?: string;
|
|
62
62
|
showDiscountCodeExpiryInfo?: boolean;
|
|
63
|
-
footerButtonText?: string;
|
|
64
|
-
footerInfoText?: string;
|
|
65
63
|
}
|
|
66
64
|
export declare const TemplateContextMapper: (props: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as o,Fragment as l}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as i,useState as r,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as
|
|
1
|
+
import{jsx as e,jsxs as o,Fragment as l}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as i,useState as r,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{POD as p}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import v from"./modalElements/Footer.js";import h from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as b}from"./utils/convertPlaceholdersToBikDropdown.js";const C=C=>{var f,g,x,E,P,y,S,I;const{selectedTemplate:D,closeDialog:T,showVariableMapping:w,channel:V,htmlContent:k,templateVariables:L,onTemplateSelect:j,globalPlaceholders:M,showOnlyContent:A,whatsappSpecificPickerMeta:B,zIndex:H,showVariableModal:F,variableList:O,discountCode:W,setDiscountCode:N,onBackPress:z,enabledCustomText:R,variableListForImage:U,showSampleValues:$,disableEditVariable:_,pod:q,extras:G,pickerConf:J,selectedCarouselProducts:K,disableEditExpiry:Q,cardWidth:X,onDeleteSelectedProducts:Y,fileName:Z,setFileName:ee,hideDeviceContainerInPreview:oe,maxCharLimit:le,onDefaultVariableSelect:te,skipDefaultVariableContent:ie,disableDatePicker:re,disableCopyCode:ae,initialExpiryDateTime:se,showDiscountCodeExpiryInfo:ne}=C;i((()=>{be(k)}),[k]);const de=V===u.WHATSAPP&&"CAROUSEL"===(null===(g=null===(f=null==D?void 0:D.components)||void 0===f?void 0:f[1])||void 0===g?void 0:g.type),ce=null==D?void 0:D.isProductCarouselType,[ue,pe]=r(V===u.EMAIL||V==u.WEBPUSH||de?"desktop":"mobile"),[me,ve]=r(!1),[he,be]=r(k),[Ce,fe]=r(!1),[ge,xe]=r([]),[Ee,Pe]=r({}),[ye,Se]=r(D),[Ie,De]=r([]),[Te,we]=r(null),[Ve,ke]=r(!1),[Le,je]=r(null!=L?L:[]),[Me,Ae]=r(!1),[Be,He]=r(de?(null===(E=null===(x=null==ye?void 0:ye.mapping)||void 0===x?void 0:x.body)||void 0===E?void 0:E.length)?-1:0:-1),[Fe,Oe]=r([]),[We,Ne]=r(void 0),ze=a(null),[Re,Ue]=r(!1),[$e,_e]=r(!1),[qe,Ge]=r(!1),[Je,Ke]=r({});i((()=>{K?Oe(K):ce&&Oe([])}),[K]),i((()=>{var e;if(!Ve&&ce&&(!K||0===Oe.length)){const o=null===(e=null==ye?void 0:ye.components)||void 0===e?void 0:e[1].cards,l=[];null==o||o.forEach((e=>{var o;null===(o=null==e?void 0:e.components)||void 0===o||o.forEach((e=>{var o,t,i;"HEADER"===e.type&&l.push(null!==(i=null===(t=null===(o=e.example)||void 0===o?void 0:o.header_handle)||void 0===t?void 0:t[0])&&void 0!==i?i:"")}))})),De(l),ke(!0)}}),[Ve]);const Qe=s((()=>b(M)),[M]);return i((()=>{Ne(t(O))}),[O]),e(m.Provider,Object.assign({value:{hideFooterButton:qe,setHideFooterButton:Ge,hideCrossButton:$e,setHideCrossButton:_e,variableList:We,setVariableList:Ne,variableCallback:Te,setVariableCallback:we,showVariablePicker:me,setShowVariablePicker:ve,template:ye,setTemplate:Se,device:ue,setDevice:pe,display_content:he,setDisplayContent:be,originalVariableList:Le,setOriginalVariableList:je,isError:Ce,setIsError:fe,channel:V,globalNormalizedPlaceholders:Qe,templateSelectionTriggered:Me,setTemplateSelectionTriggered:Ae,enabledCustomText:R,disableEditVariable:_,pod:q,extras:G,isWhatsappCarousel:de,selectedCarouselIndex:Be,setSelectedCarouselIndex:He,isProductCarouselType:ce,templateErrorIndexes:Ee,cardCount:de?null===(y=null===(P=D.components)||void 0===P?void 0:P[1].cards)||void 0===y?void 0:y.length:void 0,errorIndexes:ge,setErrorIndexes:xe,pickerConf:J,carouselProducts:Fe,setCarouselProducts:Oe,disableEditExpiry:Q,cardWidth:X,cardImages:Ie,onDeleteSelectedProducts:Y,hideDeviceContainerInPreview:oe,sliderRef:ze,isCarouselHovered:Re,setIsCarouselHovered:Ue,maxCharLimit:le,ctaOptionsErrors:Je,setCtaOptionsErrors:Ke,onDefaultVariableSelect:te,disableDatePicker:re,disableCopyCode:ae,initialExpiryDateTime:se,showDiscountCodeExpiryInfo:ne}},{children:A?e(h,{variableListFromProps:O,channel:u.EMAIL,hideHeader:!0}):o(c,Object.assign({hideCrossButton:$e,zIndex:H,centralContainerStyles:{width:de?900:V===u.EMAIL&&w?1e3:800},open:!0,onClose:()=>{null==T||T()},headingTitle:null==ye?void 0:ye.label,headingSubtitle:V===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(S=null==ye?void 0:ye.category)&&void 0!==S?S:"")} • ${null!==(I=null==ye?void 0:ye.templateCategory)&&void 0!==I?I:""}`:"",onBackPress:()=>{null==z||z()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(h,{variableListFromProps:O,showSampleValues:$,showVariableMapping:w,channel:V,whatsappSpecificPickerMeta:B,showVariableModal:F,discountCode:W,setDiscountCode:N,variableListForImage:U&&(null==U?void 0:U.length)>0?U:We,fileName:Z,setFileName:e=>{null==ee||ee(e)},skipDefaultVariableContent:ie}),j?e(v,{isWhatsappCarousel:null!=de&&de,onSelect:function(){var e;if((null==Fe?void 0:Fe.length)<1&&ce)return void fe(!0);if(Object.keys(Je).length>0&&q!==p.CHATBOT)return void fe(!0);const o=null==j?void 0:j(ye,Le,null!=he?he:"",Fe);Pe(null!==(e=null==o?void 0:o.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==o?void 0:o.errorIndexes)||(null==o?void 0:o.error)?((null==o?void 0:o.errorIndexes)&&xe(o.errorIndexes),(null==o?void 0:o.error)&&fe(!!(null==o?void 0:o.error))):Ae(!0)}}):e(l,{})]}))}))};export{C as TemplateContextMapper};
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
export interface FooterProps {
|
|
2
2
|
isWhatsappCarousel: boolean;
|
|
3
3
|
onSelect: () => void;
|
|
4
|
-
footerButtonText?: string;
|
|
5
|
-
footerInfoText?: string;
|
|
6
4
|
}
|
|
7
|
-
declare const Footer: ({ isWhatsappCarousel, onSelect
|
|
5
|
+
declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
6
|
export default Footer;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import
|
|
2
|
-
background: ${
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import i from"styled-components";import{Button as l}from"../../button/Button.js";import{TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as s}from"../../../constants/Theme.js";import{Badge as a}from"../Badge/index.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";const p=i.div`
|
|
2
|
+
background: ${s.surface.standard};
|
|
3
3
|
border-top-width: 1px;
|
|
4
|
-
border-top-color: ${
|
|
4
|
+
border-top-color: ${s.stroke.primary};
|
|
5
5
|
box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
|
|
6
6
|
width: 100%;
|
|
7
7
|
padding: 0 24px;
|
|
@@ -12,4 +12,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/
|
|
|
12
12
|
border-bottom-left-radius: 4px;
|
|
13
13
|
border-bottom-right-radius: 4px;
|
|
14
14
|
height: ${e=>e.isWhatsappCarousel?64:80}px;
|
|
15
|
-
`,
|
|
15
|
+
`,c=i=>{let{isWhatsappCarousel:c,onSelect:m}=i;var u,x,b,h;const{isError:f,selectedCarouselIndex:g,setSelectedCarouselIndex:v,setErrorIndexes:y,template:j,showVariablePicker:C,hideFooterButton:S}=d(),[w,k]=o(c?"Next":"Select template");return r((()=>{c&&-1===g?k("Next"):c&&null!=g&&g>-1&&k("Save & Select Template")}),[g]),e(p,Object.assign({isWhatsappCarousel:c,justifyContent:c&&(null===(x=null===(u=null==j?void 0:j.mapping)||void 0===u?void 0:u.body)||void 0===x?void 0:x.length)?"space-between":"end"},{children:[c&&null!=g&&g>=-1&&!!(null===(h=null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.body)||void 0===h?void 0:h.length)&&t(n,Object.assign({color:s.text.secondary},{children:`Step ${-1===g?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[f&&t(a,{errorText:"Some inputs are missing or incorrect. Please check"}),!S&&t(l,{disabled:C,id:"select-template-btn",buttonText:w,size:c?"small":"large",onClick:function(){c&&-1===g&&v?v(0):(null==y||y([]),m())}})]}))]}))};export{c as default};
|