@bikdotai/bik-component-library 0.0.530-beta0.rt → 0.0.530-beta0.rt1
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/template-context-mapper/modalElements/Body.js +4 -4
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
- package/dist/cjs/components/template-preview/SmsTemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +6 -6
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
- package/dist/esm/components/template-preview/SmsTemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/helpers/SmsTemplateHelper.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),d=require("../utils/constants.js"),p=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),c=require("./DesktopPreview.js"),h=require("./EditWhatsAppTemplateV2.js"),m=require("./MobilePreview.js"),C=require("./VariableConnectorsPanel.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var P=v(i);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),d=require("../utils/constants.js"),p=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),c=require("./DesktopPreview.js"),h=require("./EditWhatsAppTemplateV2.js"),m=require("./MobilePreview.js"),C=require("./VariableConnectorsPanel.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var P=v(i);const g=P.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,
|
|
4
|
+
`,w=P.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
|
|
7
7
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
border-left: ${s.COLORS.stroke.primary} 1px solid;
|
|
12
12
|
border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
|
|
13
13
|
${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
|
|
14
|
-
`,
|
|
14
|
+
`,f=P.default.div`
|
|
15
15
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
16
16
|
flex: 1;
|
|
17
17
|
height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?`url(${d.BACKGROUND_PREVIEW_IMAGE});`:"none"};
|
|
20
20
|
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
|
|
21
21
|
align-items: flex-start;
|
|
22
|
-
`;exports.default=i=>{const{showVariableMapping:d,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:E,discountCode:b,setDiscountCode:A,variableListForImage:j,showSampleValues:N,fileName:T,setFileName:y}=i,L=t.useRef(),S=t.useRef(),{device:_,display_content:M,channel:W,template:H,setTemplate:O,isWhatsappCarousel:V,isProductCarouselType:I,hideDeviceContainerInPreview:q}=r.useTemplateModalContext();const k=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return console.log("
|
|
22
|
+
`;exports.default=i=>{const{showVariableMapping:d,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:E,discountCode:b,setDiscountCode:A,variableListForImage:j,showSampleValues:N,fileName:T,setFileName:y}=i,L=t.useRef(),S=t.useRef(),{device:_,display_content:M,channel:W,template:H,setTemplate:O,isWhatsappCarousel:V,isProductCarouselType:I,hideDeviceContainerInPreview:q}=r.useTemplateModalContext();console.log("device",_);const k=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return console.log("jhjk",W),e.jsxs(g,{children:[e.jsx(f,Object.assign({showOnlyContent:v,showVariableMapping:d,isWhatsappCarousel:V,hideDeviceContainerInPreview:q,channel:W},{children:"mobile"===_?e.jsx(m.default,{ref:S,display_content:null!=M?M:"",channel:W,template:H,showSampleValues:N}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(a.CarouselPreview,{ref:L,channel:W,template:H,showSampleValues:N,isPreview:!1,showArrows:!0}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(c.default,{ref:L,channel:W,display_content:null!=M?M:"",showSampleValues:N}):e.jsx(e.Fragment,{})})),(I||d)&&e.jsx(w,Object.assign({channel:W,isWhatsappCarousel:V,showVariableMapping:!0},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(C.default,{onFocus:W===o.CHANNEL_TYPE.EMAIL?function(e){var t,i,a;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===_?"template_html_mobile":"template_html_desktop"),n=p.getVariableNameForEmailByIndex(e+1),r=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),d=k(r),c=null==r?void 0:r.offsetLeft;"desktop"===_?d&&L.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_)):d&&S.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,d),u.highlightFor(n,s.COLORS.background.warning.light,2,W,_))}:void 0,showVariableModal:x,variableList:E,discountCode:b,setDiscountCode:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:x,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A}):e.jsx(h.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==O||O(e)},showVariableModal:x,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A,fileName:T,setFileName:y})})),W===o.CHANNEL_TYPE.WHATSAPP&&!d&&!I&&e.jsx(w,{children:e.jsx(n.BodySecondary,Object.assign({color:s.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),o=require("../utils/getPreviewDimension.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(t),p=l(i);const c=p.default.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
5
|
-
width: ${e=>
|
|
5
|
+
width: ${e=>o.getPreviewWidth(e.channel)}px;
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,h=n.default.forwardRef(((t,i)=>{let{display_content:
|
|
20
|
+
`,h=n.default.forwardRef(((t,i)=>{let{display_content:l,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),v={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:l},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:l,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return console.log("hideDeviceContainerInPreview",w,v),w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},v))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{children:[e.jsx("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:o.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},v))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
23
|
justify-content: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),n=require("../template-context-mapper/context/templateModalContext.js"),i=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:g}=c;var m;const v=null==u?void 0:u.content,{hideDeviceContainerInPreview:S}=n.useTemplateModalContext();return console.log("templateContent in smsTemplatePreview",
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),s=require("../../assets/icons/search.svg.js"),l=require("../../constants/Theme.js"),n=require("../template-context-mapper/context/templateModalContext.js"),i=require("../TypographyStyle.js"),a=require("./helpers/SmsTemplateHelper.js"),o=require("./SMS/SMSBubble.js"),d=require("./SmsTemplatePreview.styled.js");exports.default=c=>{let{template:u,variableStore:j,hideHeader:h,display_content:x,onlyTemplateContent:p,size:g}=c;var m;const v=null==u?void 0:u.content,{hideDeviceContainerInPreview:S}=n.useTemplateModalContext();return console.log("templateContent in smsTemplatePreview",j),S?e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!=x?x:a.renderVariableUIForPreview(v,null!=j?j:[])})})):e.jsxs(e.Fragment,{children:[!h&&!p&&e.jsx(d.SMSCardHeader,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:u.name}))}),!p&&e.jsx(d.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(i.Caption,{children:null===(m=null==u?void 0:u.headers)||void 0===m?void 0:m[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:l.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:l.COLORS.content.secondary})]}))]})}),e.jsx(d.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(o.default,{size:null!=g?g:"large",content:null!=x?x:a.renderVariableUIForPreview(v,null!=j?j:[])})}))]})};
|
|
@@ -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"),s=require("./models/Channels.js"),r=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:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return console.log("
|
|
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"),s=require("./models/Channels.js"),r=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:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return console.log("smsSpecificMeta",S),m===s.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(r.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})})):m===s.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})})):m===s.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(P&&y){if(-1===x&&!(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;P(null!=x?x:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(O=null==u?void 0:u.label)&&void 0!==O?O:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:b,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!==(w=null==c?void 0:c.containerStyle)&&void 0!==w?w:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T})]})):e.jsx(e.Fragment,{})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),r=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(t,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),r=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(t,a){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand;if(!a||!a.length){const e=[...t.matchAll(r.variablePatternGlobal)];let a="",l=0;return e.forEach(((e,r)=>{a+=t.slice(l,e.index)+`${e[0].slice(0,2)}<span id="connectors_variable_${r}" style="color: ${n}; text-decoration: underline; word-break: break-word;">${e[0].slice(2,-2)}</span><span> </span>`,l=e.index+e[0].length})),a+=t.slice(l),a}const l=a.reduce(((e,r)=>{let{variableName:t,updatedValue:a,index:n}=r;return void 0!==n?e[n]=a:e[t]=a,e}),{});r.variablePatternGlobal.lastIndex=0;const o=[...t.matchAll(r.variablePatternGlobal)];let i="",s=0;return o.forEach(((e,a)=>{var o,c;const d=e[0].match(r.variablePattern),b=d?d[0].slice(2,-2):e[0],u=null!==(c=null!==(o=l[a])&&void 0!==o?o:l[b])&&void 0!==c?c:e[0];i+=t.slice(s,e.index)+`<span id="connectors_variable_${a}" style="color: ${n}; text-decoration: underline; word-break: break-word;">${u}</span>`,s=e.index+e[0].length})),i+=t.slice(s),i};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import a from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as c}from"../utils/constants.js";import{getVariableNameForEmailByIndex as m}from"../utils/getVariableNameEmail.js";import{highlightFor as h}from"../utils/highlightFor.js";import u from"./DesktopPreview.js";import v from"./EditWhatsAppTemplateV2.js";import f from"./MobilePreview.js";import w from"./VariableConnectorsPanel.js";const g=a.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
4
|
`,b=a.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
|
-
max-width: ${e=>e.channel===
|
|
6
|
+
max-width: ${e=>e.channel===s.EMAIL?"400px":"450px"};
|
|
7
7
|
|
|
8
|
-
height: ${e=>e.channel===
|
|
8
|
+
height: ${e=>e.channel===s.WHATSAPP?"500px":"475px"};
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${p.stroke.primary} 1px solid;
|
|
@@ -16,7 +16,7 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
|
|
|
16
16
|
flex: 1;
|
|
17
17
|
height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
|
|
18
18
|
overflow-y: auto;
|
|
19
|
-
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===
|
|
20
|
-
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===
|
|
19
|
+
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?`url(${c});`:"none"};
|
|
20
|
+
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?"flex":"initial"};
|
|
21
21
|
align-items: flex-start;
|
|
22
|
-
`,P=a=>{const{showVariableMapping:
|
|
22
|
+
`,P=a=>{const{showVariableMapping:c,showOnlyContent:P,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:A,discountCode:j,setDiscountCode:S,variableListForImage:W,showSampleValues:M,fileName:T,setFileName:V}=a,I=i(),k=i(),{device:E,display_content:L,channel:$,template:D,setTemplate:F,isWhatsappCarousel:H,isProductCarouselType:_,hideDeviceContainerInPreview:O}=d();console.log("device",E);const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return console.log("jhjk",$),e(g,{children:[o(C,Object.assign({showOnlyContent:P,showVariableMapping:c,isWhatsappCarousel:H,hideDeviceContainerInPreview:O,channel:$},{children:"mobile"===E?o(f,{ref:k,display_content:null!=L?L:"",channel:$,template:D,showSampleValues:M}):$===s.WHATSAPP&&H?o(l,{ref:I,channel:$,template:D,showSampleValues:M,isPreview:!1,showArrows:!0}):$!==s.MESSAGE?o(u,{ref:I,channel:$,display_content:null!=L?L:"",showSampleValues:M}):o(t,{})})),(_||c)&&o(b,Object.assign({channel:$,isWhatsappCarousel:H,showVariableMapping:!0},{children:$!==s.WHATSAPP?o(w,{onFocus:$===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),l=m(e+1),n=$===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),r=N(n),d=null==n?void 0:n.offsetLeft;"desktop"===E?r&&I.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,r),h(l,p.background.warning.light,2,$,E)):r&&k.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,r),h(l,p.background.warning.light,2,$,E))}:void 0,showVariableModal:y,variableList:A,discountCode:j,setDiscountCode:S}):$===s.WHATSAPP&&H?o(n,{whatsappSpecificPickerMeta:x,template:D,showVariableModal:y,variableList:A,variableListForImage:W,discountCode:j,setDiscountCode:S}):o(v,{whatsappSpecificPickerMeta:x,template:D,onTemplateChange:e=>{null==F||F(e)},showVariableModal:y,variableList:A,variableListForImage:W,discountCode:j,setDiscountCode:S,fileName:T,setFileName:V})})),$===s.WHATSAPP&&!c&&!_&&o(b,{children:o(r,Object.assign({color:p.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{P as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import o from"react";import a from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=a.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
|
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
9
|
-
`,m=
|
|
9
|
+
`,m=a.div`
|
|
10
10
|
position: absolute;
|
|
11
11
|
flex: 1;
|
|
12
12
|
background-color: white;
|
|
@@ -17,7 +17,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,c=
|
|
20
|
+
`,c=o.forwardRef(((o,a)=>{let{display_content:c,channel:d,template:w,showSampleValues:f}=o;const{pod:b,hideDeviceContainerInPreview:g}=p(),v={showSampleValues:f,template:w,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==s.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return console.log("hideDeviceContainerInPreview",g,v),g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{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:l(d),height:443}}),e(m,Object.assign({ref:a},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=a.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
23
|
justify-content: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import l from"../../assets/icons/more_vertical.svg.js";import r from"../../assets/icons/search.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as m}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as g}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:v,variableStore:j,hideHeader:y,display_content:u,onlyTemplateContent:x,size:w}=f;var b;const S=null==v?void 0:v.content,{hideDeviceContainerInPreview:T}=s();return console.log("templateContent in smsTemplatePreview",
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import l from"../../assets/icons/more_vertical.svg.js";import r from"../../assets/icons/search.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as m}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as g}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:v,variableStore:j,hideHeader:y,display_content:u,onlyTemplateContent:x,size:w}=f;var b;const S=null==v?void 0:v.content,{hideDeviceContainerInPreview:T}=s();return console.log("templateContent in smsTemplatePreview",j),T?e(p,Object.assign({size:w},{children:e(d,{size:null!=w?w:"large",content:null!=u?u:m(S,null!=j?j:[])})})):t(n,{children:[!y&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:v.name}))}),!x&&e(g,{children:t(n,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:i.content.secondary}),e(c,{children:null===(b=null==v?void 0:v.headers)||void 0===b?void 0:b[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(r,{width:16,height:16,color:i.content.secondary}),e(l,{width:16,height:16,color:i.content.secondary})]}))]})}),e(p,Object.assign({size:w},{children:e(d,{size:null!=w?w:"large",content:null!=u?u:m(S,null!=j?j:[])})}))]})};export{f as default};
|
|
@@ -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 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:u,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:g,hideHeader:
|
|
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:u,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:g,hideHeader:S,size:b,onlyTemplateContent:C,emailSpecificMeta:y,smsSpecificMeta:j,showSampleValues:f,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:x}=m;var W,H;const{setSelectedCarouselIndex:O}=i();return console.log("smsSpecificMeta",j),v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:g?16:0,border:g?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:S,onlyTemplateContent:C,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):v===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:g?16:0},null==y?void 0:y.templateContainerStyles)},{children:e(r,{template:u,handleViewTemplate:()=>{var e;null===(e=null==y?void 0:y.handleViewTemplate)||void 0===e||e.call(y)},hideHeader:S,hideViewButton:null==y?void 0:y.hideViewButtonForEmail,containerStyle:null==y?void 0:y.containerStyle,emailDisplayContent:null==y?void 0:y.emailDisplayContent,emailHtmlContainerId:null==y?void 0:y.emailHtmlContainerId})})):v===s.WHATSAPP?l("div",Object.assign({style:Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),g?c.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(O&&w){if(-1===T&&!(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;O(null!=T?T:-1)}}},{children:[g?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:a.convertToTitleCase(null!==(W=null==u?void 0:u.label)&&void 0!==W?W:"")})})):e(t,{}),e(p,{showSampleValues:f,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:u,size:g?"small":null!=b?b:"large",containerStyle:Object.assign(Object.assign({borderWidth:g?0:1,borderTopWidth:1},null!==(H=null==h?void 0:h.containerStyle)&&void 0!==H?H:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:x})]})):e(t,{})},c={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{COLORS as e}from"../../../constants/Theme.js";import{variablePatternGlobal as n}from"../constants/regexPatterns.js";const
|
|
1
|
+
import{COLORS as e}from"../../../constants/Theme.js";import{variablePatternGlobal as n,variablePattern as t}from"../constants/regexPatterns.js";const r=function(r,o){let l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.content.brand;if(!o||!o.length){const e=[...r.matchAll(n)];let t="",o=0;return e.forEach(((e,n)=>{t+=r.slice(o,e.index)+`${e[0].slice(0,2)}<span id="connectors_variable_${n}" style="color: ${l}; text-decoration: underline; word-break: break-word;">${e[0].slice(2,-2)}</span><span> </span>`,o=e.index+e[0].length})),t+=r.slice(o),t}const a=o.reduce(((e,n)=>{let{variableName:t,updatedValue:r,index:o}=n;return void 0!==o?e[o]=r:e[t]=r,e}),{});n.lastIndex=0;const c=[...r.matchAll(n)];let s="",i=0;return c.forEach(((e,n)=>{var o,c;const d=e[0].match(t),u=d?d[0].slice(2,-2):e[0],h=null!==(c=null!==(o=a[n])&&void 0!==o?o:a[u])&&void 0!==c?c:e[0];s+=r.slice(i,e.index)+`<span id="connectors_variable_${n}" style="color: ${l}; text-decoration: underline; word-break: break-word;">${h}</span>`,i=e.index+e[0].length})),s+=r.slice(i),s};export{r as renderVariableUIForPreview};
|