@bikdotai/bik-component-library 0.0.539 → 0.0.540
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/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +4 -4
- package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.d.ts +3 -1
- package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js +5 -2
- package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.d.ts +1 -0
- package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.d.ts +2 -1
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +1 -1
- package/dist/esm/components/template-preview/EmailTemplatePreview.styled.d.ts +3 -1
- package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js +19 -16
- package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.d.ts +1 -0
- package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/dist/esm/components/template-preview/TemplatePreview.d.ts +2 -1
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/package.json +1 -1
|
@@ -14,4 +14,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
14
14
|
removeBottomBorder?: boolean | undefined;
|
|
15
15
|
borderRadius?: string | undefined;
|
|
16
16
|
showArrows?: boolean | undefined;
|
|
17
|
+
hideBorder?: boolean | undefined;
|
|
17
18
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-slick"),t=require("./CarouselPreview.style.js"),l=require("./CarouselPreviewCard.js"),n=require("../template-context-mapper/context/templateModalContext.js"),s=require("./CustomCarouselArrows.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-slick"),t=require("./CarouselPreview.style.js"),l=require("./CarouselPreviewCard.js"),n=require("../template-context-mapper/context/templateModalContext.js"),s=require("./CustomCarouselArrows.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r),d=i(o);const u=a.default.forwardRef((r=>{let{channel:o,template:i,isPreview:a,removeBottomBorder:u,borderRadius:c,showArrows:v,hideBorder:p}=r;var m,C,w;const x=null===(m=null==i?void 0:i.components)||void 0===m?void 0:m[1].cards,{sliderRef:j,selectedCarouselIndex:f,cardCount:h,setIsCarouselHovered:g}=n.useTemplateModalContext();return e.jsxs(t.Container,Object.assign({removeBottomBorder:u,borderRadius:c,hideBorder:p},{children:[e.jsx(l.default,{channel:o,currentTemplate:i,carouselCardIndex:-1,isPreview:a,width:"77%"}),!!(null==x?void 0:x.length)&&e.jsx(t.CarouselSlickContainer,Object.assign({cardCount:null!=h?h:0,selectedCarouselIndex:null!=f?f:-1,onMouseEnter:()=>null==g?void 0:g(!0),onMouseLeave:()=>null==g?void 0:g(!1)},{children:e.jsx(d.default,Object.assign({ref:j,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!a,centerMode:!0,arrows:v,adaptiveHeight:!0,nextArrow:e.jsx(s.CustomCarouselRightArrow,{isPreview:null!=a&&a}),prevArrow:e.jsx(s.CustomCarouselLeftArrow,{isPreview:null!=a&&a})},{children:null===(w=null===(C=null==i?void 0:i.components)||void 0===C?void 0:C[1].cards)||void 0===w?void 0:w.map(((r,t)=>{var n,s;const d={components:r.components,mapping:null===(s=null===(n=null==i?void 0:i.mapping)||void 0===n?void 0:n.cards)||void 0===s?void 0:s[t]};return e.jsx(l.default,{channel:o,currentTemplate:d,carouselCardIndex:t,isPreview:a,width:"100%"},t)}))}))}))]}))}));exports.CarouselPreview=u;
|
|
@@ -2,6 +2,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
|
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
3
|
removeBottomBorder?: boolean | undefined;
|
|
4
4
|
borderRadius?: string | undefined;
|
|
5
|
+
hideBorder?: boolean | undefined;
|
|
5
6
|
}, never>;
|
|
6
7
|
export declare const CarouselSlickContainer: import("styled-components").StyledComponent<"div", any, {
|
|
7
8
|
cardCount: number;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const i=o.default.div`
|
|
2
2
|
background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
|
|
3
|
-
border-color: ${
|
|
3
|
+
border-color: ${r.COLORS.stroke.primary};
|
|
4
4
|
border-top-style: solid;
|
|
5
5
|
border-bottom-style: ${e=>e.removeBottomBorder?"unset":"solid"};
|
|
6
6
|
border-top-width: 1px;
|
|
7
|
-
border-bottom-width: 1px;
|
|
7
|
+
border-bottom-width: ${e=>e.hideBorder?"0px":"1px"};
|
|
8
8
|
background-repeat: no-repeat;
|
|
9
9
|
background-position: center;
|
|
10
10
|
background-size: cover;
|
|
11
11
|
position: relative;
|
|
12
12
|
height: 500px;
|
|
13
13
|
overflow-y: auto;
|
|
14
|
-
border-radius: ${e=>{var
|
|
14
|
+
border-radius: ${e=>{var r;return null!==(r=e.borderRadius)&&void 0!==r?r:"0px"}};
|
|
15
15
|
`,d=o.default.div`
|
|
16
16
|
width: 100%;
|
|
17
17
|
|
|
@@ -5,7 +5,9 @@ export declare const ImageContainer: import("styled-components").StyledComponent
|
|
|
5
5
|
export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
hideHeader?: boolean | undefined;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
applyBorderBottom?: boolean | undefined;
|
|
10
|
+
}, never>;
|
|
9
11
|
export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
12
|
export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
|
|
11
13
|
hideHeader?: boolean | undefined;
|
|
@@ -28,7 +28,10 @@
|
|
|
28
28
|
min-height: 180px;
|
|
29
29
|
border-left: 1px solid ${e.COLORS.stroke.primary};
|
|
30
30
|
border-right: 1px solid ${e.COLORS.stroke.primary};
|
|
31
|
-
|
|
31
|
+
|
|
32
|
+
border-radius: ${r=>r.applyBorderBottom?"0 0 8px 8px":"unset"};
|
|
33
|
+
border-bottom: ${r=>r.applyBorderBottom?`1px solid ${e.COLORS.stroke.primary}`:""};
|
|
34
|
+
`,p=o.default.div`
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
@@ -42,4 +45,4 @@
|
|
|
42
45
|
margin-top: ${r=>r.hideHeader?0:16};
|
|
43
46
|
display: flex;
|
|
44
47
|
flex-direction: column;
|
|
45
|
-
`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=s,exports.ImageContainer=i,exports.ViewButton=
|
|
48
|
+
`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=s,exports.ImageContainer=i,exports.ViewButton=p;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),a=require("../TypographyStyle.js"),n=require("./EmailTemplatePreview.styled.js");const s="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";exports.DEFAULT_IMAGE=s,exports.default=r=>{let{template:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),a=require("../TypographyStyle.js"),n=require("./EmailTemplatePreview.styled.js");const s="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";exports.DEFAULT_IMAGE=s,exports.default=r=>{let{template:o,handleViewTemplate:i,hideHeader:l,hideViewButton:p,containerStyle:d,emailHtmlContainerId:c,emailDisplayContent:u,applyBorderBottom:m}=r;return e.jsxs(n.EmailContainer,Object.assign({hideHeader:l,style:Object.assign({},null!=d?d:{})},{children:[!l&&e.jsx(n.Header,{children:e.jsx(a.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:o.name}))}),e.jsx(n.IframeContainer,Object.assign({applyBorderBottom:m},{children:u?e.jsx("iframe",{title:"Email template preview",id:null!=c?c:"",width:"100%",srcDoc:(x=u,x.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${s}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:"none"}}):e.jsx(n.ImageContainer,Object.assign({hideHeader:l},{children:e.jsx(n.CardLoadingContainer,{})}))})),!p&&e.jsx(n.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{i&&i()}})})]}));var x};
|
|
@@ -20,5 +20,6 @@ export interface TemplatePreviewProps {
|
|
|
20
20
|
carouselCardIndex?: number;
|
|
21
21
|
isWhatsappCarousel?: boolean;
|
|
22
22
|
isPreview?: boolean;
|
|
23
|
+
applyBorderBottom?: boolean;
|
|
23
24
|
}
|
|
24
|
-
export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),s=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),s=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:j,onlyTemplateContent:C,emailSpecificMeta:g,smsSpecificMeta:S,showSampleValues:y,carouselCardIndex:b,isWhatsappCarousel:x,isPreview:T,applyBorderBottom:O}=p;var w,P;const{setSelectedCarouselIndex:H}=l.useTemplateModalContext();return m===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(s.default,{template:u,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent,uniqueId:null==S?void 0:S.uniqueId})})):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==g?void 0:g.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:h,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId,applyBorderBottom:O})})):m===r.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(H&&x){if(-1===b&&!(null===(l=null===(e=null==u?void 0:u.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;H(null!=b?b:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(w=null==u?void 0:u.label)&&void 0!==w?w:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:y,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(P=null==c?void 0:c.containerStyle)&&void 0!==P?P:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:b,isWhatsappCarousel:x,isPreview:T})]})):e.jsx(e.Fragment,{})};
|
|
@@ -14,4 +14,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
14
14
|
removeBottomBorder?: boolean | undefined;
|
|
15
15
|
borderRadius?: string | undefined;
|
|
16
16
|
showArrows?: boolean | undefined;
|
|
17
|
+
hideBorder?: boolean | undefined;
|
|
17
18
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"react";import n from"react-slick";import{Container as t,CarouselSlickContainer as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"react";import n from"react-slick";import{Container as t,CarouselSlickContainer as i}from"./CarouselPreview.style.js";import l from"./CarouselPreviewCard.js";import{useTemplateModalContext as d}from"../template-context-mapper/context/templateModalContext.js";import{CustomCarouselRightArrow as s,CustomCarouselLeftArrow as a}from"./CustomCarouselArrows.js";const c=o.forwardRef((o=>{let{channel:c,template:u,isPreview:m,removeBottomBorder:v,borderRadius:p,showArrows:w,hideBorder:f}=o;var h,C,x;const g=null===(h=null==u?void 0:u.components)||void 0===h?void 0:h[1].cards,{sliderRef:j,selectedCarouselIndex:P,cardCount:b,setIsCarouselHovered:B}=d();return e(t,Object.assign({removeBottomBorder:v,borderRadius:p,hideBorder:f},{children:[r(l,{channel:c,currentTemplate:u,carouselCardIndex:-1,isPreview:m,width:"77%"}),!!(null==g?void 0:g.length)&&r(i,Object.assign({cardCount:null!=b?b:0,selectedCarouselIndex:null!=P?P:-1,onMouseEnter:()=>null==B?void 0:B(!0),onMouseLeave:()=>null==B?void 0:B(!1)},{children:r(n,Object.assign({ref:j,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!m,centerMode:!0,arrows:w,adaptiveHeight:!0,nextArrow:r(s,{isPreview:null!=m&&m}),prevArrow:r(a,{isPreview:null!=m&&m})},{children:null===(x=null===(C=null==u?void 0:u.components)||void 0===C?void 0:C[1].cards)||void 0===x?void 0:x.map(((e,o)=>{var n,t;const i={components:e.components,mapping:null===(t=null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[o]};return r(l,{channel:c,currentTemplate:i,carouselCardIndex:o,isPreview:m,width:"100%"},o)}))}))}))]}))}));export{c as CarouselPreview};
|
|
@@ -2,6 +2,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
|
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
3
|
removeBottomBorder?: boolean | undefined;
|
|
4
4
|
borderRadius?: string | undefined;
|
|
5
|
+
hideBorder?: boolean | undefined;
|
|
5
6
|
}, never>;
|
|
6
7
|
export declare const CarouselSlickContainer: import("styled-components").StyledComponent<"div", any, {
|
|
7
8
|
cardCount: number;
|
|
@@ -4,7 +4,7 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
|
|
|
4
4
|
border-top-style: solid;
|
|
5
5
|
border-bottom-style: ${e=>e.removeBottomBorder?"unset":"solid"};
|
|
6
6
|
border-top-width: 1px;
|
|
7
|
-
border-bottom-width: 1px;
|
|
7
|
+
border-bottom-width: ${e=>e.hideBorder?"0px":"1px"};
|
|
8
8
|
background-repeat: no-repeat;
|
|
9
9
|
background-position: center;
|
|
10
10
|
background-size: cover;
|
|
@@ -5,7 +5,9 @@ export declare const ImageContainer: import("styled-components").StyledComponent
|
|
|
5
5
|
export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
6
|
hideHeader?: boolean | undefined;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
8
|
+
export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
applyBorderBottom?: boolean | undefined;
|
|
10
|
+
}, never>;
|
|
9
11
|
export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
12
|
export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
|
|
11
13
|
hideHeader?: boolean | undefined;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import r from"styled-components";import{COLORS as
|
|
1
|
+
import r from"styled-components";import{COLORS as o,BASE_COLORS as e}from"../../constants/Theme.js";const t=r.div`
|
|
2
2
|
padding: 16px;
|
|
3
3
|
padding-bottom: 12px;
|
|
4
4
|
border-top-left-radius: 4px;
|
|
5
5
|
border-top-right-radius: 4px;
|
|
6
|
-
border: 1px solid ${
|
|
7
|
-
`,
|
|
6
|
+
border: 1px solid ${o.stroke.primary};
|
|
7
|
+
`,d=r.div`
|
|
8
8
|
width: 100%;
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
justify-content: center;
|
|
12
|
-
border-left: 1px solid ${
|
|
13
|
-
border-right: 1px solid ${
|
|
14
|
-
border-top-color: ${
|
|
12
|
+
border-left: 1px solid ${o.stroke.primary};
|
|
13
|
+
border-right: 1px solid ${o.stroke.primary};
|
|
14
|
+
border-top-color: ${o.stroke.primary};
|
|
15
15
|
border-top-width: ${r=>r.hideHeader?"1px":"0px"};
|
|
16
16
|
overflow: scroll;
|
|
17
|
-
`,
|
|
17
|
+
`,i=r.div`
|
|
18
18
|
width: 100%;
|
|
19
19
|
height: 100%;
|
|
20
|
-
background-color: ${
|
|
21
|
-
`,
|
|
20
|
+
background-color: ${e.grayscale[100]};
|
|
21
|
+
`,p=r.div`
|
|
22
22
|
height: 100%;
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-direction: column;
|
|
@@ -26,20 +26,23 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
|
|
|
26
26
|
justify-content: center;
|
|
27
27
|
flex-grow: 1;
|
|
28
28
|
min-height: 180px;
|
|
29
|
-
border-left: 1px solid ${
|
|
30
|
-
border-right: 1px solid ${
|
|
31
|
-
|
|
29
|
+
border-left: 1px solid ${o.stroke.primary};
|
|
30
|
+
border-right: 1px solid ${o.stroke.primary};
|
|
31
|
+
|
|
32
|
+
border-radius: ${r=>r.applyBorderBottom?"0 0 8px 8px":"unset"};
|
|
33
|
+
border-bottom: ${r=>r.applyBorderBottom?`1px solid ${o.stroke.primary}`:""};
|
|
34
|
+
`,s=r.div`
|
|
32
35
|
display: flex;
|
|
33
36
|
justify-content: center;
|
|
34
37
|
width: 100%;
|
|
35
|
-
background: ${
|
|
38
|
+
background: ${o.surface.standard};
|
|
36
39
|
border-bottom-left-radius: 4px;
|
|
37
40
|
border-bottom-right-radius: 4px;
|
|
38
|
-
border: 1px solid ${
|
|
41
|
+
border: 1px solid ${o.stroke.primary};
|
|
39
42
|
`,a=r.div`
|
|
40
43
|
border-radius: 4px;
|
|
41
|
-
background-color: ${
|
|
44
|
+
background-color: ${o.surface.standard};
|
|
42
45
|
margin-top: ${r=>r.hideHeader?0:16};
|
|
43
46
|
display: flex;
|
|
44
47
|
flex-direction: column;
|
|
45
|
-
`;export{
|
|
48
|
+
`;export{i as CardLoadingContainer,a as EmailContainer,t as Header,p as IframeContainer,d as ImageContainer,s as ViewButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as s,Header as r,IframeContainer as o,ImageContainer as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as a}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as s,Header as r,IframeContainer as o,ImageContainer as p,CardLoadingContainer as i,ViewButton as l}from"./EmailTemplatePreview.styled.js";const d="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",c=c=>{let{template:m,handleViewTemplate:u,hideHeader:h,hideViewButton:y,containerStyle:b,emailHtmlContainerId:g,emailDisplayContent:f,applyBorderBottom:C}=c;return e(s,Object.assign({hideHeader:h,style:Object.assign({},null!=b?b:{})},{children:[!h&&t(r,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:m.name}))}),t(o,Object.assign({applyBorderBottom:C},{children:f?t("iframe",{title:"Email template preview",id:null!=g?g:"",width:"100%",srcDoc:(j=f,j.replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/src="<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{product.photoUrl}}<\/span><span> <\/span>"/g,`src=${d}`).replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/orderProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{##abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"").replace(/<span><\/span><span style="color: #731DCF; text-decoration: underline;">{{\/\/abandonedCartProducts}}<\/span><span>\s*<\/span>/g,"")),height:"100%",style:{pointerEvents:"none"}}):t(p,Object.assign({hideHeader:h},{children:t(i,{})}))})),!y&&t(l,{children:t(a,{buttonType:"tertiary",buttonText:"View",onClick:()=>{u&&u()}})})]}));var j};export{d as DEFAULT_IMAGE,c as default};
|
|
@@ -20,5 +20,6 @@ export interface TemplatePreviewProps {
|
|
|
20
20
|
carouselCardIndex?: number;
|
|
21
21
|
isWhatsappCarousel?: boolean;
|
|
22
22
|
isPreview?: boolean;
|
|
23
|
+
applyBorderBottom?: boolean;
|
|
23
24
|
}
|
|
24
|
-
export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, isWhatsappCarousel, isPreview, applyBorderBottom, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import a from"../../utils/StringUtils.js";import{COLORS as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useTemplateModalContext as i}from"../template-context-mapper/context/templateModalContext.js";import a from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:c,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:y,hideHeader:b,size:g,onlyTemplateContent:C,emailSpecificMeta:S,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:x,applyBorderBottom:W}=m;var H,O;const{setSelectedCarouselIndex:A}=i();return v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:y?16:0,border:y?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:c,hideHeader:b,onlyTemplateContent:C,size:null!=g?g:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent,uniqueId:null==j?void 0:j.uniqueId})})):v===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:y?16:0},null==S?void 0:S.templateContainerStyles)},{children:e(r,{template:c,handleViewTemplate:()=>{var e;null===(e=null==S?void 0:S.handleViewTemplate)||void 0===e||e.call(S)},hideHeader:b,hideViewButton:null==S?void 0:S.hideViewButtonForEmail,containerStyle:null==S?void 0:S.containerStyle,emailDisplayContent:null==S?void 0:S.emailDisplayContent,emailHtmlContainerId:null==S?void 0:S.emailHtmlContainerId,applyBorderBottom:W})})):v===s.WHATSAPP?l("div",Object.assign({style:Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),y?u.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(A&&w){if(-1===f&&!(null===(l=null===(e=null==c?void 0:c.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;A(null!=f?f:-1)}}},{children:[y?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:a.convertToTitleCase(null!==(H=null==c?void 0:c.label)&&void 0!==H?H:"")})})):e(t,{}),e(p,{showSampleValues:T,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:c,size:y?"small":null!=g?g:"large",containerStyle:Object.assign(Object.assign({borderWidth:y?0:1,borderTopWidth:1},null!==(O=null==h?void 0:h.containerStyle)&&void 0!==O?O:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:x})]})):e(t,{})},u={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
|