@bikdotai/bik-component-library 0.0.530-beta0.rt → 0.0.530-beta0.rt10
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 +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.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.d.ts +3 -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 +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/DesktopPreview.js +6 -6
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- 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.d.ts +3 -1
- package/dist/esm/components/template-preview/helpers/SmsTemplateHelper.js +1 -1
- package/package.json +1 -1
|
@@ -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
|
+
`,x=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:
|
|
22
|
+
`;exports.default=i=>{const{showVariableMapping:d,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:g,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 e.jsxs(w,{children:[e.jsx(x,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(f,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:g,variableList:E,discountCode:b,setDiscountCode:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A}):e.jsx(h.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==O||O(e)},showVariableModal:g,variableList:E,variableListForImage:j,discountCode:b,setDiscountCode:A,fileName:T,setFileName:y})})),W===o.CHANNEL_TYPE.WHATSAPP&&!d&&!I&&e.jsx(f,{children:e.jsx(n.BodySecondary,Object.assign({color:s.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
height: 6px;
|
|
18
18
|
background: #d9d9d9;
|
|
19
19
|
border-radius: 3px;
|
|
20
|
-
`,h=d.default.forwardRef(((r,t)=>{let{display_content:s,showSampleValues:l}=r;return
|
|
20
|
+
`,h=d.default.forwardRef(((r,t)=>{let{display_content:s,showSampleValues:l}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(m,{}),e.jsx(m,{}),e.jsx(m,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{showSampleValues:l,channel:p.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));h.displayName="DesktopPreview",exports.default=h;
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
height: 100%;
|
|
5
|
-
`,
|
|
5
|
+
`,j=b.default.button`
|
|
6
6
|
padding: 2px 8px;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
color: white;
|
|
@@ -25,4 +25,4 @@
|
|
|
25
25
|
align-items: center;
|
|
26
26
|
gap: 5px;
|
|
27
27
|
}
|
|
28
|
-
`;exports.AddVariableStyled=
|
|
28
|
+
`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[q,S]=t.useState(!1),[C,w]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),w(!1))},noErrorHint:!0,validate:e=>[!0,""]}),q&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),w(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),C&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:C,setShowVariable:w,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};
|
|
@@ -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"),
|
|
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"),i=require("../template-context-mapper/context/templateModalContext.js"),n=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,originalVariableList:b}=i.useTemplateModalContext();return console.log("templateContent in smsTemplatePreview",b),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(n.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(n.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:[],b)})}))]})};
|
|
@@ -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"),
|
|
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:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=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})})):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})})):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(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,2 +1,4 @@
|
|
|
1
1
|
import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
|
|
2
|
-
|
|
2
|
+
import { WhatsAppCarouselTemplateVariables } from '../models/WhatsappCarouselTemplate';
|
|
3
|
+
import { WhatsAppTemplateVariables } from '../models/WhatsAppTemplate';
|
|
4
|
+
export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], originalVariables?: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, brandColor?: string) => string;
|
|
@@ -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,n){let
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),r=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(t,n,a){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:e.COLORS.content.brand;if(!a||a&&Array.isArray(a)&&0===a.length)return t;let l,i=0,o="";for(;null!==(l=r.variablePattern.exec(t));){const e=l[1];o+=t.slice(i,l.index);const n=a&&Array.isArray(a)&&a.length&&a.find((r=>r.variableName===`{{${e}}}`));o+=n?`<span style="color: ${s};">${n.updatedValue||`{{${e}}}`}</span>`:`<span style="color: ${s};">{{${e}}}</span>`,i=r.variablePattern.lastIndex}return o+=t.slice(i),o};
|
|
@@ -19,4 +19,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
|
|
|
19
19
|
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===r.WHATSAPP?`url(${m});`:"none"};
|
|
20
20
|
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===r.WHATSAPP?"flex":"initial"};
|
|
21
21
|
align-items: flex-start;
|
|
22
|
-
`,P=a=>{const{showVariableMapping:m,showOnlyContent:P,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:A,discountCode:S,setDiscountCode:W,variableListForImage:j,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();const N=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return
|
|
22
|
+
`,P=a=>{const{showVariableMapping:m,showOnlyContent:P,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:A,discountCode:S,setDiscountCode:W,variableListForImage:j,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();const N=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(g,{children:[t(C,Object.assign({showOnlyContent:P,showVariableMapping:m,isWhatsappCarousel:H,hideDeviceContainerInPreview:O,channel:$},{children:"mobile"===E?t(f,{ref:k,display_content:null!=L?L:"",channel:$,template:D,showSampleValues:M}):$===r.WHATSAPP&&H?t(l,{ref:I,channel:$,template:D,showSampleValues:M,isPreview:!1,showArrows:!0}):$!==r.MESSAGE?t(u,{ref:I,channel:$,display_content:null!=L?L:"",showSampleValues:M}):t(o,{})})),(_||m)&&t(b,Object.assign({channel:$,isWhatsappCarousel:H,showVariableMapping:!0},{children:$!==r.WHATSAPP?t(w,{onFocus:$===r.EMAIL?function(e){var t,o,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),l=c(e+1),n=$===r.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),s=N(n),d=null==n?void 0:n.offsetLeft;"desktop"===E?s&&I.current&&(null===(o=null==a?void 0:a.contentWindow)||void 0===o||o.scrollTo(null!=d?d:0,s),h(l,p.background.warning.light,2,$,E)):s&&k.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,s),h(l,p.background.warning.light,2,$,E))}:void 0,showVariableModal:y,variableList:A,discountCode:S,setDiscountCode:W}):$===r.WHATSAPP&&H?t(n,{whatsappSpecificPickerMeta:x,template:D,showVariableModal:y,variableList:A,variableListForImage:j,discountCode:S,setDiscountCode:W}):t(v,{whatsappSpecificPickerMeta:x,template:D,onTemplateChange:e=>{null==F||F(e)},showVariableModal:y,variableList:A,variableListForImage:j,discountCode:S,setDiscountCode:W,fileName:T,setFileName:V})})),$===r.WHATSAPP&&!m&&!_&&t(b,{children:t(s,Object.assign({color:p.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{P as default};
|
|
@@ -1,20 +1,20 @@
|
|
|
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
|
|
2
|
-
background: ${
|
|
3
|
-
border: 1px solid ${
|
|
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 a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as o}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";const m=i.div`
|
|
2
|
+
background: ${o.surface.standard};
|
|
3
|
+
border: 1px solid ${o.stroke.primary};
|
|
4
4
|
border-radius: 8px;
|
|
5
5
|
overflow-y: auto;
|
|
6
6
|
/* max-height: 420px; */
|
|
7
7
|
scroll-behavior: smooth;
|
|
8
8
|
height: 100%;
|
|
9
|
-
`,
|
|
9
|
+
`,l=i.div`
|
|
10
10
|
padding: 18px 24px 12px;
|
|
11
11
|
display: flex;
|
|
12
12
|
gap: 4px;
|
|
13
13
|
border-bottom-width: 1px;
|
|
14
|
-
border-bottom-color: ${
|
|
14
|
+
border-bottom-color: ${o.stroke.primary};
|
|
15
15
|
`,d=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:
|
|
20
|
+
`,n=r.forwardRef(((r,i)=>{let{display_content:o,showSampleValues:n}=r;return e(m,Object.assign({ref:i},{children:[e(l,{children:[t(d,{}),t(d,{}),t(d,{})]}),t("div",{children:o?t(a,{showSampleValues:n,channel:s.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(p,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleRegular as m,BodySecondary as h,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
height: 100%;
|
|
5
|
-
`,j=l=>{let{onFocus:j,showVariableModal:y,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=u(),[T,B]=
|
|
5
|
+
`,j=l=>{let{onFocus:j,showVariableModal:y,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=u(),[T,B]=a(!1),[E,L]=a(!1),[A,I]=a(!1),[S,M]=a(""),[D,F]=a(!1),N=o(),z=o();return r((()=>{O&&O(w+S)}),[S]),r((()=>{k.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),w&&F&&F(!0))}))}),[k]),e(v,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(m,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(h,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,a)=>!t.isEditableVariable||C?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(h,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a):i("div",Object.assign({style:{marginTop:16}},{children:i(f,{index:a,variable:t,onFocus:()=>null==j?void 0:j(a),showVariableModal:y,variableList:V,setShowDiscountCheckBox:B})}),a))),(T||w)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:D,onValueChange:()=>{D&&O&&O(""),F(!D)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),D&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:w,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):(L(!1),I(!1))},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(x,Object.assign({ref:z,id:"addVar",onClick:e=>{e.stopPropagation(),I(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),A&&i(n,{zIndex:2e3,data:null!=V?V:[],showVariable:A,setShowVariable:I,variableValue:S,setVariableValue:M,placeholder:"Add a variable",customTrigger:e=>{M(e.actualValue),L(!1)}})]})},x=l.button`
|
|
6
6
|
padding: 2px 8px;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
color: white;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/more_vertical.svg.js";import o from"../../assets/icons/search.svg.js";import{COLORS as r}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:b}=f;var w;const S=null==v?void 0:v.content,{hideDeviceContainerInPreview:T,originalVariableList:z}=s();return console.log("templateContent in smsTemplatePreview",z),T?e(p,Object.assign({size:b},{children:e(d,{size:null!=b?b:"large",content:null!=u?u:m(S,null!=j?j:[])})})):t(i,{children:[!y&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:v.name}))}),!x&&e(g,{children:t(i,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(l,{width:16,height:16,color:r.content.secondary}),e(c,{children:null===(w=null==v?void 0:v.headers)||void 0===w?void 0:w[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:r.content.secondary}),e(n,{width:16,height:16,color:r.content.secondary})]}))]})}),e(p,Object.assign({size:b},{children:e(d,{size:null!=b?b:"large",content:null!=u?u:m(S,null!=j?j:[],z)})}))]})};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
|
|
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 n}from"../../constants/Theme.js";import{TitleRegular as o}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:b,hideHeader:g,size:C,onlyTemplateContent:S,emailSpecificMeta:y,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:f,isWhatsappCarousel:w,isPreview:x}=m;var W,H;const{setSelectedCarouselIndex:O}=i();return v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${n.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:c,hideHeader:g,onlyTemplateContent:S,size:null!=C?C:"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:b?16:0},null==y?void 0:y.templateContainerStyles)},{children:e(r,{template:c,handleViewTemplate:()=>{var e;null===(e=null==y?void 0:y.handleViewTemplate)||void 0===e||e.call(y)},hideHeader:g,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),b?u.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(O&&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;O(null!=f?f:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(o,{children:a.convertToTitleCase(null!==(W=null==c?void 0:c.label)&&void 0!==W?W:"")})})):e(t,{}),e(p,{showSampleValues:T,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:c,size:b?"small":null!=C?C:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?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:f,isWhatsappCarousel:w,isPreview:x})]})):e(t,{})},u={WhatsAppWrapper:{backgroundColor:n.surface.standard,borderRadius:4,border:`1px solid ${n.background.inactive}`,marginTop:16}};export{m as TemplatePreview};
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
|
|
2
|
-
|
|
2
|
+
import { WhatsAppCarouselTemplateVariables } from '../models/WhatsappCarouselTemplate';
|
|
3
|
+
import { WhatsAppTemplateVariables } from '../models/WhatsAppTemplate';
|
|
4
|
+
export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], originalVariables?: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, brandColor?: string) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{COLORS as e}from"../../../constants/Theme.js";import{
|
|
1
|
+
import{COLORS as e}from"../../../constants/Theme.js";import{variablePattern as n}from"../constants/regexPatterns.js";const t=function(t,r,s){let a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:e.content.brand;if(!s||s&&Array.isArray(s)&&0===s.length)return t;let o,l=0,c="";for(;null!==(o=n.exec(t));){const e=o[1];c+=t.slice(l,o.index);const r=s&&Array.isArray(s)&&s.length&&s.find((n=>n.variableName===`{{${e}}}`));c+=r?`<span style="color: ${a};">${r.updatedValue||`{{${e}}}`}</span>`:`<span style="color: ${a};">{{${e}}}</span>`,l=n.lastIndex}return c+=t.slice(l),c};export{t as renderVariableUIForPreview};
|