@bikdotai/bik-component-library 0.0.398 → 0.0.399-beta-new
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/add-variableV2/AddVariableV2.d.ts +0 -1
- package/dist/cjs/components/bik-layout/BikSidebar.d.ts +1 -0
- package/dist/cjs/components/bik-layout/BikSidebar.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/bik-layout/SidebarStyles.js +1 -1
- package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts +6 -14
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +3 -3
- package/dist/cjs/components/plans/SubscriptionPlanStyled.js +1 -1
- package/dist/cjs/components/plans/SubscriptionPlansCollected.js +1 -1
- package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts +0 -2
- package/dist/cjs/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/productScreen.d.ts +0 -7
- package/dist/cjs/components/product-picker-v2/productScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.d.ts +0 -4
- package/dist/cjs/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/style.d.ts +0 -2
- package/dist/cjs/components/product-picker-v2/style.js +16 -24
- package/dist/cjs/components/shimmer-image/ShimmerImage.d.ts +0 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/cjs/components/side-modal/SideModal.d.ts +2 -4
- package/dist/cjs/components/side-modal/SideModal.js +1 -1
- package/dist/cjs/components/side-modal/SideModal.style.d.ts +1 -4
- package/dist/cjs/components/side-modal/SideModal.style.js +1 -4
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +3 -7
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +1 -5
- package/dist/cjs/components/template-context-mapper/modalElements/Body.d.ts +0 -2
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +5 -5
- package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.d.ts +0 -1
- package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.d.ts +0 -3
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +0 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -4
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.d.ts +0 -1
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -3
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +3 -4
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.d.ts +1 -2
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +5 -5
- package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.d.ts +0 -1
- package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/constants/regexPatterns.js +1 -1
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -6
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +0 -21
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/add-variableV2/AddVariableV2.d.ts +0 -1
- package/dist/esm/components/bik-layout/BikSidebar.d.ts +1 -0
- package/dist/esm/components/bik-layout/BikSidebar.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/bik-layout/SidebarStyles.js +1 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +6 -14
- package/dist/esm/components/input-with-vars/InputWithVariables.js +3 -3
- package/dist/esm/components/plans/SubscriptionPlanStyled.js +1 -1
- package/dist/esm/components/plans/SubscriptionPlansCollected.js +1 -1
- package/dist/esm/components/product-picker-v2/collectionScreen.d.ts +0 -2
- package/dist/esm/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +1 -5
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/productScreen.d.ts +0 -7
- package/dist/esm/components/product-picker-v2/productScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/searchScreen.d.ts +0 -4
- package/dist/esm/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/style.d.ts +0 -2
- package/dist/esm/components/product-picker-v2/style.js +12 -20
- package/dist/esm/components/shimmer-image/ShimmerImage.d.ts +0 -1
- package/dist/esm/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/esm/components/side-modal/SideModal.d.ts +2 -4
- package/dist/esm/components/side-modal/SideModal.js +1 -1
- package/dist/esm/components/side-modal/SideModal.style.d.ts +1 -4
- package/dist/esm/components/side-modal/SideModal.style.js +12 -15
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +3 -7
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +1 -5
- package/dist/esm/components/template-context-mapper/modalElements/Body.d.ts +0 -2
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/DesktopPreview.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/DesktopPreview.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.d.ts +0 -3
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +0 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -4
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -3
- package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +3 -4
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-preview/TemplatePreview.d.ts +1 -2
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +1 -1
- package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts +0 -1
- package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/constants/regexPatterns.js +1 -1
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts +1 -6
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +0 -21
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.js +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/BackTrackComponent.d.ts +0 -4
- package/dist/cjs/components/template-context-mapper/modalElements/BackTrackComponent.js +0 -1
- package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.d.ts +0 -6
- package/dist/cjs/components/template-context-mapper/modalElements/DiscountCodeComponent.js +0 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.d.ts +0 -11
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.js +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/BackTrackComponent.d.ts +0 -4
- package/dist/esm/components/template-context-mapper/modalElements/BackTrackComponent.js +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/DiscountCodeComponent.d.ts +0 -6
- package/dist/esm/components/template-context-mapper/modalElements/DiscountCodeComponent.js +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.d.ts +0 -11
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js +0 -1
|
@@ -4,12 +4,12 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
4
4
|
max-height: 600px;
|
|
5
5
|
min-height: 600px;
|
|
6
6
|
flex-direction: column;
|
|
7
|
-
`,
|
|
7
|
+
`,n=e.div`
|
|
8
8
|
overflow-y: scroll;
|
|
9
9
|
overflow-x: hidden;
|
|
10
|
-
`,
|
|
10
|
+
`,o=e.div`
|
|
11
11
|
height: 64px;
|
|
12
|
-
background-color: ${e=>e.isDisabled?"#F0F0F0":
|
|
12
|
+
background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
|
|
13
13
|
border-bottom: 1px solid #e0e0e0;
|
|
14
14
|
padding: 12px 24px;
|
|
15
15
|
display: flex;
|
|
@@ -17,21 +17,17 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
17
17
|
column-gap: 16px;
|
|
18
18
|
justify-content: space-between;
|
|
19
19
|
align-items: center;
|
|
20
|
-
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
background-color: ${i.surface.hovered};
|
|
23
|
-
}
|
|
24
|
-
`,r=e.div`
|
|
20
|
+
`,d=e.div`
|
|
25
21
|
display: flex;
|
|
26
22
|
flex-direction: row;
|
|
27
23
|
justify-content: center;
|
|
28
24
|
align-items: center;
|
|
29
25
|
column-gap: 18px;
|
|
30
|
-
`,
|
|
26
|
+
`,l=e.div`
|
|
31
27
|
display: flex;
|
|
32
28
|
flex-direction: column;
|
|
33
29
|
justify-content: center;
|
|
34
|
-
`,
|
|
30
|
+
`,p=e.div`
|
|
35
31
|
display: flex;
|
|
36
32
|
flex-direction: row;
|
|
37
33
|
max-height: 32px;
|
|
@@ -41,16 +37,16 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
41
37
|
align-items: center;
|
|
42
38
|
padding: 8px 16px;
|
|
43
39
|
margin-top: 16px;
|
|
44
|
-
`,
|
|
40
|
+
`,x=e.div`
|
|
45
41
|
display: flex;
|
|
46
42
|
flex-direction: row;
|
|
47
43
|
column-gap: 16px;
|
|
48
44
|
padding: 12px 16px;
|
|
49
45
|
border-bottom: 1px solid #e0e0e0;
|
|
50
46
|
align-items: center;
|
|
51
|
-
`,
|
|
47
|
+
`,r=e.div`
|
|
52
48
|
height: 64px;
|
|
53
|
-
background-color:
|
|
49
|
+
background-color: white;
|
|
54
50
|
border-bottom: 1px solid #e0e0e0;
|
|
55
51
|
padding: 12px 16px;
|
|
56
52
|
display: flex;
|
|
@@ -59,11 +55,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
59
55
|
justify-content: flex-start;
|
|
60
56
|
align-items: center;
|
|
61
57
|
padding-left: ${e=>e.isVariant?"42px":"16px"};
|
|
62
|
-
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
background-color: ${i.surface.hovered};
|
|
65
|
-
}
|
|
66
|
-
`,c=e.div`
|
|
58
|
+
`,a=e.div`
|
|
67
59
|
display: flex;
|
|
68
60
|
flex-direction: row;
|
|
69
61
|
max-height: 32px;
|
|
@@ -72,7 +64,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
72
64
|
justify-content: flex-start;
|
|
73
65
|
align-items: center;
|
|
74
66
|
padding: 8px 16px;
|
|
75
|
-
`,
|
|
67
|
+
`,c=e.div`
|
|
76
68
|
display: flex;
|
|
77
69
|
flex-direction: column;
|
|
78
70
|
`,s=e.div`
|
|
@@ -107,4 +99,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
|
|
|
107
99
|
align-items: center;
|
|
108
100
|
border: 1px solid ${i.stroke.primary};
|
|
109
101
|
border-radius: 4px;
|
|
110
|
-
`;export{
|
|
102
|
+
`;export{l as CollectionCardDetailStyle,d as CollectionCardInfoStyle,o as CollectionCardStyle,c as CollectionNameHolder,t as ContainerStyle,r as ProductCardStyle,x as ProductScreenCollectionCardStyle,p as ProductScreenHeader,n as ScrollContainerStyle,a as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};
|
|
@@ -7,5 +7,4 @@ export type ShimmerImageProps = {
|
|
|
7
7
|
borderRadius?: number;
|
|
8
8
|
defaultImageUrl?: string;
|
|
9
9
|
};
|
|
10
|
-
export declare const DEFAULT_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";
|
|
11
10
|
export declare const ShimmerImage: React.FC<ShimmerImageProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:h,defaultImageUrl:c=a}=l;const[g,p]=t(!0),[b,u]=t(!1);return i((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),p(!1)},e.onerror=()=>{u(!0),p(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[g&&r(o,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),r("img",b?{src:c,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%"}}:{src:s,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:g?"none":"block",width:"100%",height:"100%"}})]}))};export{
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:h,defaultImageUrl:c=a}=l;const[g,p]=t(!0),[b,u]=t(!1);return i((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),p(!1)},e.onerror=()=>{u(!0),p(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[g&&r(o,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),r("img",b?{src:c,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%"}}:{src:s,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:g?"none":"block",width:"100%",height:"100%"}})]}))};export{l as ShimmerImage};
|
|
@@ -7,11 +7,9 @@ export interface SideModalProps {
|
|
|
7
7
|
footerDirection?: 'row' | 'row-reverse';
|
|
8
8
|
hideCrossButton?: boolean;
|
|
9
9
|
width?: string;
|
|
10
|
-
saveButtonProps
|
|
11
|
-
cancelButtonProps
|
|
10
|
+
saveButtonProps: ButtonProps;
|
|
11
|
+
cancelButtonProps: ButtonProps;
|
|
12
12
|
onClose: () => void;
|
|
13
13
|
zIndex?: number;
|
|
14
|
-
hideFooter?: boolean;
|
|
15
|
-
bodyStyle?: React.CSSProperties;
|
|
16
14
|
}
|
|
17
15
|
export declare const SideModal: React.FC<SideModalProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as
|
|
1
|
+
import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as m,SideModalBody as a,SideModalFooter as h,FooterButtonWrapper as l}from"./SideModal.style.js";const p=p=>r.createPortal(o(c,Object.assign({zIndex:p.zIndex},{children:t(d,Object.assign({width:p.width},{children:[t(m,{children:[o(s,{children:p.header}),!p.hideCrossButton&&o(i,{width:24,height:24,onClick:p.onClose})]}),o(a,{children:p.children}),t(h,Object.assign({footerDirection:p.footerDirection},{children:[t(l,Object.assign({footerDirection:p.footerDirection},{children:[o(n,Object.assign({},p.saveButtonProps)),o(n,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:o(e,{})]}))]}))})),document.body);export{p as SideModal};
|
|
@@ -5,10 +5,7 @@ export declare const SideModalContainer: import("styled-components").StyledCompo
|
|
|
5
5
|
width?: string | undefined;
|
|
6
6
|
}, never>;
|
|
7
7
|
export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
-
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
-
hideFooter?: boolean | undefined;
|
|
10
|
-
bodyStyle: React.CSSProperties;
|
|
11
|
-
}, never>;
|
|
8
|
+
export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
9
|
export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
|
|
13
10
|
footerDirection?: "row" | "row-reverse" | undefined;
|
|
14
11
|
}, never>;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as e}from"../../constants/zindex.js";const o=t.div`
|
|
2
2
|
position: fixed;
|
|
3
3
|
top: 0;
|
|
4
4
|
left: 0;
|
|
5
|
-
z-index: ${
|
|
5
|
+
z-index: ${t=>t.zIndex||e.SIDE_MODAL};
|
|
6
6
|
height: 100%;
|
|
7
7
|
width: 100%;
|
|
8
8
|
background-color: rgba(0, 0, 0, 0.4);
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
justify-content: flex-end;
|
|
12
|
-
`,
|
|
12
|
+
`,r=t.div`
|
|
13
13
|
height: 100%;
|
|
14
|
-
width: ${
|
|
14
|
+
width: ${t=>t.width||"566px"};
|
|
15
15
|
background: ${i.surface.standard};
|
|
16
16
|
position: relative;
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
-
`,
|
|
19
|
+
`,n=t.div`
|
|
20
20
|
width: 100%;
|
|
21
21
|
height: 60px;
|
|
22
22
|
position: sticky;
|
|
@@ -31,27 +31,24 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
|
|
|
31
31
|
svg:hover {
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
}
|
|
34
|
-
`,
|
|
34
|
+
`,d=t.div`
|
|
35
35
|
overflow-y: auto;
|
|
36
36
|
padding: 24px;
|
|
37
|
-
height:
|
|
38
|
-
|
|
39
|
-
${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
|
|
40
|
-
`}}
|
|
41
|
-
`,p=e.div`
|
|
37
|
+
height: calc(100% - 120px);
|
|
38
|
+
`,s=t.div`
|
|
42
39
|
height: 60px;
|
|
43
40
|
width: 100%;
|
|
44
41
|
position: sticky;
|
|
45
42
|
bottom: 0;
|
|
46
43
|
display: flex;
|
|
47
|
-
flex-direction: ${
|
|
44
|
+
flex-direction: ${t=>t.footerDirection||"row"};
|
|
48
45
|
justify-content: space-between;
|
|
49
46
|
align-items: center;
|
|
50
47
|
background: ${i.surface.standard};
|
|
51
48
|
border-top: 1px solid ${i.stroke.primary};
|
|
52
49
|
padding: 0px 24px;
|
|
53
|
-
`,
|
|
50
|
+
`,p=t.div`
|
|
54
51
|
display: flex;
|
|
55
|
-
flex-direction: ${
|
|
52
|
+
flex-direction: ${t=>t.footerDirection||"row"};
|
|
56
53
|
gap: 8px;
|
|
57
|
-
`;export{
|
|
54
|
+
`;export{p as FooterButtonWrapper,d as SideModalBody,r as SideModalContainer,s as SideModalFooter,n as SideModalHeader,o as SideModalStyle};
|
|
@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from '../template-preview/models/Channels';
|
|
|
3
3
|
import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
|
|
4
4
|
import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
|
|
5
5
|
import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
|
|
6
|
-
import {
|
|
6
|
+
import { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
|
|
7
7
|
export interface TemplateContextMapperProps {
|
|
8
8
|
selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
|
|
9
9
|
closeDialog?: () => void;
|
|
@@ -11,7 +11,7 @@ export interface TemplateContextMapperProps {
|
|
|
11
11
|
channel: CHANNEL_TYPE;
|
|
12
12
|
globalPlaceholders: GlobalPlaceholderType;
|
|
13
13
|
/** List of variables being used in this template */
|
|
14
|
-
templateVariables: CUSTOM_VARIABLE[]
|
|
14
|
+
templateVariables: CUSTOM_VARIABLE[];
|
|
15
15
|
/** Only for initial-UI-purpose for the modal */
|
|
16
16
|
htmlContent: string;
|
|
17
17
|
showOnlyContent?: boolean;
|
|
@@ -20,14 +20,10 @@ export interface TemplateContextMapperProps {
|
|
|
20
20
|
zIndex?: number;
|
|
21
21
|
showVariableModal?: boolean;
|
|
22
22
|
variableList?: VariableListInterfaceV2[];
|
|
23
|
-
variableListForImage?: VariableListInterfaceV2[];
|
|
24
23
|
onBackPress?: () => void;
|
|
25
24
|
discountCode?: string;
|
|
26
25
|
setDiscountCode?: (code: string) => void;
|
|
27
26
|
enabledCustomText?: boolean;
|
|
28
|
-
showSampleValues?: boolean;
|
|
29
27
|
disableEditVariable?: boolean;
|
|
30
|
-
pod?: POD;
|
|
31
|
-
extras?: Extras;
|
|
32
28
|
}
|
|
33
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText,
|
|
29
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:b,closeDialog:h,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:E,discountCode:V,setDiscountCode:x,onBackPress:L,enabledCustomText:y,disableEditVariable:k}=u;var D,I;o((()=>{B(C)}),[C]);const[A,O]=a(v===s.EMAIL?"desktop":"mobile"),[z,B]=a(C),[F,H]=a(!1),[$,N]=a(b),[U,W]=a(null!=f?f:[]),[_,q]=a(!1);const G=i((()=>p(S)),[S]);return e(d.Provider,Object.assign({value:{template:$,setTemplate:N,device:A,setDevice:O,display_content:z,setDisplayContent:B,originalVariableList:U,setOriginalVariableList:W,isError:F,setIsError:H,channel:v,globalNormalizedPlaceholders:G,templateSelectionTriggered:_,setTemplateSelectionTriggered:q,enabledCustomText:y,disableEditVariable:k}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&g?1e3:650},open:!0,onClose:()=>{null==h||h()},headingTitle:null==$?void 0:$.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(D=null==$?void 0:$.category)&&void 0!==D?D:"")} • ${null!==(I=null==$?void 0:$.templateCategory)&&void 0!==I?I:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(m,{showVariableMapping:g,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:E,discountCode:V,setDiscountCode:x}),M?e(c,{onSelect:function(){const e=null==M?void 0:M($,U,null!=z?z:"");e?H(!!e):q(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};
|
|
@@ -3,7 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
|
3
3
|
import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
|
|
4
4
|
import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
|
|
5
5
|
import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
|
|
6
|
-
import {
|
|
6
|
+
import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
7
7
|
export type DEVICE_TYPES = 'desktop' | 'mobile';
|
|
8
8
|
export declare const TemplateModalContext: React.Context<{
|
|
9
9
|
device: DEVICE_TYPES;
|
|
@@ -23,8 +23,6 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
23
23
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
24
24
|
enabledCustomText?: boolean | undefined;
|
|
25
25
|
disableEditVariable?: boolean | undefined;
|
|
26
|
-
pod?: string | undefined;
|
|
27
|
-
extras?: Extras | undefined;
|
|
28
26
|
}>;
|
|
29
27
|
export declare const useTemplateModalContext: () => {
|
|
30
28
|
device: DEVICE_TYPES;
|
|
@@ -44,6 +42,4 @@ export declare const useTemplateModalContext: () => {
|
|
|
44
42
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
45
43
|
enabledCustomText?: boolean | undefined;
|
|
46
44
|
disableEditVariable?: boolean | undefined;
|
|
47
|
-
pod?: string | undefined;
|
|
48
|
-
extras?: Extras | undefined;
|
|
49
45
|
};
|
|
@@ -6,10 +6,8 @@ export interface BodyProps {
|
|
|
6
6
|
whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
|
|
7
7
|
showVariableModal?: boolean;
|
|
8
8
|
variableList?: VariableListInterfaceV2[];
|
|
9
|
-
variableListForImage?: VariableListInterfaceV2[];
|
|
10
9
|
discountCode?: string;
|
|
11
10
|
setDiscountCode?: (code: string) => void;
|
|
12
|
-
showSampleValues?: boolean;
|
|
13
11
|
}
|
|
14
12
|
declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
13
|
export default Body;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import l from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as p}from"../utils/highlightFor.js";import d from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const u=l.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,f=
|
|
4
|
+
`,f=l.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 350px;
|
|
7
7
|
|
|
@@ -9,9 +9,9 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
|
|
|
9
9
|
overflow-y: 'auto';
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${a.stroke.primary} 1px solid;
|
|
12
|
-
`,v=
|
|
12
|
+
`,v=l.div`
|
|
13
13
|
padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
14
14
|
flex: 1;
|
|
15
15
|
height: 475px;
|
|
16
16
|
overflow-y: auto;
|
|
17
|
-
`,g=
|
|
17
|
+
`,g=l=>{const{showVariableMapping:g,showOnlyContent:w,whatsappSpecificPickerMeta:b,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}=l,C=n(),P=n(),{device:E,display_content:T,channel:k,template:A,setTemplate:V}=r();const _=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(u,{children:[t(v,Object.assign({showOnlyContent:w,showVariableMapping:g},{children:"mobile"===E?t(c,{ref:P,display_content:null!=T?T:"",channel:k,template:A}):k!==i.MESSAGE?t(d,{ref:C,channel:k,display_content:null!=T?T:""}):t(o,{})})),g&&t(f,Object.assign({channel:k},{children:k!==i.WHATSAPP?t(h,{onFocus:k===i.EMAIL?function(e){var t,o,n;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),r=s(e+1),d=k===i.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=_(d),c=null==d?void 0:d.offsetLeft;"desktop"===E?m&&C.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,E)):m&&P.current&&(null===(n=null==l?void 0:l.contentWindow)||void 0===n||n.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,E))}:void 0,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}):t(m,{whatsappSpecificPickerMeta:b,template:A,onTemplateChange:e=>{null==V||V(e)},showVariableModal:x,variableList:y})}))]})};export{g as default};
|
|
@@ -3,6 +3,5 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
|
3
3
|
declare const DesktopPreview: React.ForwardRefExoticComponent<{
|
|
4
4
|
display_content: string;
|
|
5
5
|
channel: CHANNEL_TYPE;
|
|
6
|
-
showSampleValues?: boolean | undefined;
|
|
7
6
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
8
7
|
export default DesktopPreview;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as p}from"../../spinner/Spinner.js";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as a}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";const s=i.div`
|
|
2
2
|
background: ${a.surface.standard};
|
|
3
3
|
border: 1px solid ${a.stroke.primary};
|
|
4
4
|
border-radius: 8px;
|
|
@@ -6,15 +6,15 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i
|
|
|
6
6
|
/* max-height: 420px; */
|
|
7
7
|
scroll-behavior: smooth;
|
|
8
8
|
height: 100%;
|
|
9
|
-
`,
|
|
9
|
+
`,d=i.div`
|
|
10
10
|
padding: 18px 24px 12px;
|
|
11
11
|
display: flex;
|
|
12
12
|
gap: 4px;
|
|
13
13
|
border-bottom-width: 1px;
|
|
14
14
|
border-bottom-color: ${a.stroke.primary};
|
|
15
|
-
`,
|
|
15
|
+
`,l=i.div`
|
|
16
16
|
width: 6px;
|
|
17
17
|
height: 6px;
|
|
18
18
|
background: #d9d9d9;
|
|
19
19
|
border-radius: 3px;
|
|
20
|
-
`,n=r.forwardRef(((r,i)=>{let{display_content:a
|
|
20
|
+
`,n=r.forwardRef(((r,i)=>{let{display_content:a}=r;return e(s,Object.assign({ref:i},{children:[e(d,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:a?t(o,{channel:m.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:a,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
|
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
|
|
3
2
|
export interface EditMediaV2Props {
|
|
4
3
|
imageName: string[];
|
|
5
|
-
selectedVariable?: string;
|
|
6
4
|
errorSecondaryText?: string;
|
|
7
5
|
error?: string;
|
|
8
6
|
isLoading?: boolean;
|
|
9
7
|
mediaType?: HEADER_TYPES;
|
|
10
8
|
handleImageChange?: () => void;
|
|
11
9
|
disableEditVariable?: boolean;
|
|
12
|
-
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
10
|
}
|
|
14
11
|
declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
12
|
export default EditMediaV2;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
|
|
2
2
|
padding-left: 14px;
|
|
3
3
|
padding-right: 6px;
|
|
4
4
|
width: 44px;
|
|
5
5
|
height: 24px;
|
|
6
6
|
border-left: 1px solid ${g.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`,
|
|
8
|
+
`,b=l=>{const{imageName:b,error:u,isLoading:x,mediaType:w,handleImageChange:O,disableEditVariable:C}=l,L=null==b?void 0:b[0].split("/"),E=null==L?void 0:L[L.length-1];return e(f,{children:[t(j,Object.assign({error:!!u,onClick:u?O:void 0},{children:u?t(s,{color:g.content.brand,width:32,height:32}):x?t(d,{size:"small"}):w===a.IMAGE?t("img",{alt:"",src:null==b?void 0:b[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===a.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:b&&u?t(i,{}):x?t(c,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||E}))})),!!u&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:u}))]})),!C&&!u&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{b as default};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
3
2
|
import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
3
|
declare const EditMediaTemplateMediaV2: React.FC<{
|
|
5
4
|
mediaComponent: WhatsAppTemplate['components'][0];
|
|
6
5
|
template: WhatsAppTemplate;
|
|
7
6
|
whatsappSpecificPickerMeta: WhatsAppPickerMeta;
|
|
8
7
|
updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
|
|
9
|
-
variableListForImage?: VariableListInterfaceV2[];
|
|
10
8
|
}>;
|
|
11
9
|
export default EditMediaTemplateMediaV2;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as t,jsx as i}from"react/jsx-runtime";import a,{useState as r}from"react";import{FileUploaderHelper as n}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import m from"./EditMediaV2.js";const d=d=>{let{mediaComponent:c,template:f,updateTemplateImageUrl:u,whatsappSpecificPickerMeta:v}=d;var g,h;const{disableEditVariable:j}=p(),[C,M]=r(void 0),[y,I]=r(),b=a.createRef(),[E,k]=r(!1),[w,x]=r("");function A(o){var t;return e(this,void 0,void 0,(function*(){const e=new n;if(o instanceof Blob){const i=e.validate(o);if(i)x(i),k(!1);else{const e=c.format===s.IMAGE,i=yield v.uploadMediaFiles({file:o,fileName:C,isImage:e});if(i.success){const[e]=o.type.split("/");u(null!==(t=i.url)&&void 0!==t?t:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else x("An unknown technical error occured");k(!1)}}else x("An unknown technical error occured"),k(!1)}))}let U;return U=c.format===s.IMAGE?"image/png, image/jpeg":c.format===s.VIDEO?"video/mp4":"application/pdf",o(t,{children:[!!y&&i(l,{aspectRatio:15/8,src:y,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),x("");const e=yield fetch(o);A(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I("")}}),i("input",{ref:b,style:{display:"none"},type:"file",onChange:function(e){var o;x(""),k(!0);const t=null===(o=e.target.files)||void 0===o?void 0:o[0];if(c.format===s.IMAGE){const e=new FileReader;I(""),M(""),e.onload=()=>{I(e.result),M(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else A(t)},accept:U}),i(m,{imageName:null!==(h=null===(g=null==c?void 0:c.example)||void 0===g?void 0:g.header_handle)&&void 0!==h?h:[],handleImageChange:function(){var e;(null===(e=null==b?void 0:b.current)||void 0===e?void 0:e.click)&&b.current.click()},mediaType:null==c?void 0:c.format,error:w,isLoading:E,disableEditVariable:j})]})};export{d as default};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts
CHANGED
|
@@ -8,9 +8,6 @@ export interface EditWhatsAppTemplateV2Props {
|
|
|
8
8
|
onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
|
|
9
9
|
showVariableModal?: boolean;
|
|
10
10
|
variableList?: VariableListInterfaceV2[];
|
|
11
|
-
variableListForImage?: VariableListInterfaceV2[];
|
|
12
|
-
discountCode?: string;
|
|
13
|
-
setDiscountCode?: (code: string) => void;
|
|
14
11
|
}
|
|
15
|
-
declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList,
|
|
12
|
+
declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
13
|
export default EditWhatsAppTemplateV2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as a}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m,showVariableModal:b,variableList:v}=r;var g,h,f,j,T,O,x,y,E,V,C,w;const{originalVariableList:B}=e(),{descriptionComponents:I,urlBtns:L,qrbBtns:R,imageComponent:A,bodyVariables:M,headerVariables:U}=n(c);function S(t,o){var e,n,i,l;const a=Object.assign({},c),s=null==a?void 0:a.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==s&&s>-1){const d=null===(e=null==a?void 0:a.components[s].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},a.components[s]),{buttons:p}),c=Object.assign(Object.assign({},a.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});a.mapping=c;const u=[...a.components];u[s]=r,a.components=u}}null==u||u(a)}function k(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return t(a,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!A&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:A,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c})}),(M.length>0||U.length>0)&&o(d,{containerStyle:{paddingTop:A?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==I?void 0:I.map(((t,e)=>o(s,{originalVariableList:B,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body,showVariableModal:b,variableList:v},e))),(null===(h=null===(g=L[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)&&(null===(T=null===(j=null===(f=L[0])||void 0===f?void 0:f.component)||void 0===j?void 0:j.buttons)||void 0===T?void 0:T.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(O=null==B?void 0:B.buttons)||void 0===O?void 0:O.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:B,updateSelectedURLTemplateBtn:S},`${e}`)})),(null===(y=null===(x=R[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)&&(null===(C=null===(V=null===(E=R[0])||void 0===E?void 0:E.component)||void 0===V?void 0:V.buttons)||void 0===C?void 0:C.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(w=null==B?void 0:B.buttons)||void 0===w?void 0:w.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:B,updateSelectedQRBTemplateBtn:k},`${e}`)}))]}))};export{r as default};
|
|
@@ -7,6 +7,5 @@ declare const MobilePreview: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
display_content: string;
|
|
8
8
|
channel: CHANNEL_TYPE;
|
|
9
9
|
template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
|
|
10
|
-
showSampleValues?: boolean | undefined;
|
|
11
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
12
11
|
export default MobilePreview;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>e.channel===
|
|
5
|
+
width: ${e=>e.channel===r.WHATSAPP?"236px":"300px"};
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
9
|
-
`,
|
|
9
|
+
`,l=a.div`
|
|
10
10
|
position: absolute;
|
|
11
11
|
flex: 1;
|
|
12
12
|
background-color: white;
|
|
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,
|
|
20
|
+
`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts
CHANGED
|
@@ -9,10 +9,8 @@ export interface TemplateSelectModalContentProps {
|
|
|
9
9
|
whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
|
|
10
10
|
showVariableModal?: boolean;
|
|
11
11
|
variableList?: VariableListInterfaceV2[];
|
|
12
|
-
variableListForImage?: VariableListInterfaceV2[];
|
|
13
12
|
discountCode?: string;
|
|
14
13
|
setDiscountCode?: (code: string) => void;
|
|
15
|
-
showSampleValues?: boolean;
|
|
16
14
|
}
|
|
17
|
-
declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode,
|
|
15
|
+
declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
16
|
export default TemplateSelectModalContent;
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import a from"./Header.js";const s=s=>{let{channel:n,showVariableMapping:r,showOnlyContent:l,whatsappSpecificPickerMeta:d,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:t("div",{children:[n===o.EMAIL&&e(a,{showOnlyContent:l}),e(i,{whatsappSpecificPickerMeta:d,showVariableMapping:!!r,showOnlyContent:l,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m})]})}))};export{s as default};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
2
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
3
|
import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
|
|
@@ -14,7 +13,6 @@ export interface VariableConnectorProps {
|
|
|
14
13
|
showVariableModal?: boolean;
|
|
15
14
|
variableList?: VariableListInterfaceV2[];
|
|
16
15
|
setShowDiscountCheckBox?: any;
|
|
17
|
-
componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
|
|
18
16
|
}
|
|
19
|
-
declare const VariableConnector:
|
|
17
|
+
declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
18
|
export default VariableConnector;
|