@bikdotai/bik-component-library 0.0.314-beta.15 → 0.0.314-beta.17
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/template-context-mapper/modalElements/Body.js +1 -2
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js +1 -0
- package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +3 -4
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js +6 -5
- package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/package.json +1 -1
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
// height: 100%;
|
|
4
4
|
`,f=h.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
|
-
border-left-width: 1px;
|
|
7
|
-
border-left-color: ${o.COLORS.stroke.primary};
|
|
8
6
|
max-width: 350px;
|
|
9
7
|
|
|
10
8
|
height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
|
|
11
9
|
overflow-y: 'auto';
|
|
12
10
|
padding-bottom: 24px;
|
|
11
|
+
border-left: ${o.COLORS.stroke.primary} 1px solid;
|
|
13
12
|
`,x=h.default.div`
|
|
14
13
|
padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
15
14
|
flex: 1;
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===s.CHANNEL_TYPE.EMAIL?c.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:A,setShowDiscountCheckBox:N}=a;var P;const[T,y]=l.useState(!1),[C,L]=l.useState(""),[f,O]=l.useState([]),[S,k]=l.useState(),[V,H]=l.useState(!1),{device:q,channel:M,isError:w,originalVariableList:I,template:Y,templateSelectionTriggered:W,setTemplate:B,setDisplayContent:R,setOriginalVariableList:U,globalNormalizedPlaceholders:$}=v.useTemplateModalContext();function D(e,t){var l,a,n;const i=e;L(""),k(i),M===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(z(null!==(l=i.value)&&void 0!==l?l:"","string"),null==F||F(null!==(a=E.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==F||F(null!==(n=E.index)&&void 0!==n?n:0,E.variableName),z("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?z(i.value,"url"===i.bikPlaceholderType?"link":"string"):(L(""),z("",i.value))}function z(e,t){var l,a;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(M!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(_+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),o=M===s.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const u=I.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U(u)}if(M===s.CHANNEL_TYPE.WHATSAPP){const t=null===(a=I.body)||void 0===a?void 0:a.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U((e=>Object.assign(Object.assign({},e),{body:t,buttons:I.buttons})))}}function F(e,t){var l;const a=Object.assign({},Y),n=null===(l=null==a?void 0:a.components)||void 0===l?void 0:l.map((l=>{var a,n,i,o,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(u=null===(o=null===(i=s.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:a})}return l}));a.components=n,null==B||B(a)}return l.useEffect((()=>{T&&(null==b||b())}),[T]),l.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);M===s.CHANNEL_TYPE.EMAIL&&(null==R||R(u))}()}),[W]),l.useEffect((()=>{var e;const t=[];let l=[];if(M===s.CHANNEL_TYPE.MESSAGE){const e=null!=$?$:[];O([{label:"",options:[h,x]},...e]),l=[{label:"",options:[h,x]},...e]}else{"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[x,h]}),k(x)):(t.push({label:"",options:[x,h]}),k(h));const e=null!=$?$:[];O([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:d.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((M===s.CHANNEL_TYPE.WHATSAPP||M===s.CHANNEL_TYPE.EMAIL||M===s.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(u.placeHolderNamePattern.test(E.updatedValue)&&M===s.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&M!==s.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===s.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,l,M);e.value&&k(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(k(x),L(E.updatedValue.split("https://")[1])):(k(h),L(E.updatedValue))}),[]),e.jsxs(g,Object.assign({channel:M,focused:T,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:w&&!S?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(P=E.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsx(o.Input,{state:"none",value:S?S.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>e.jsx(t.default,{onClick:()=>{H(!V)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(i.Dropdown,{options:f,isSearchable:!1,onSelect:D,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:w?C?"custom_link"!==S.value||m.validateIsUrl(C)&&0!==C.trim().length?C.length>30?"Length cannot be more that 30":30===C.trim().length?"Required field":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;L(t);const a="custom_link"===(null==S?void 0:S.value)?`https://${t}`:t;z(a,e),M===s.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(l=E.index)&&void 0!==l?l:0,a))}(S.value,e)}),V&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:V,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{N(!1),"{{custom.url}}"===e.actualValue?D({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?D({label:e.displayName,selected:!0,value:"custom_text"}):D({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:A,setShowDiscountCheckBox:N}=a;var P;const[T,y]=l.useState(!1),[C,L]=l.useState(""),[f,O]=l.useState([]),[S,k]=l.useState(),[V,H]=l.useState(!1),{device:q,channel:M,isError:w,originalVariableList:I,template:Y,templateSelectionTriggered:W,setTemplate:B,setDisplayContent:R,setOriginalVariableList:U,globalNormalizedPlaceholders:$}=v.useTemplateModalContext();function D(e,t){var l,a,n;const i=e;L(""),k(i),M===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(z(null!==(l=i.value)&&void 0!==l?l:"","string"),null==F||F(null!==(a=E.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==F||F(null!==(n=E.index)&&void 0!==n?n:0,E.variableName),z("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?z(i.value,"url"===i.bikPlaceholderType?"link":"string"):(L(""),z("",i.value))}function z(e,t){var l,a;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(M!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(_+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),o=M===s.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const u=I.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U(u)}if(M===s.CHANNEL_TYPE.WHATSAPP){const t=null===(a=I.body)||void 0===a?void 0:a.map(((t,l)=>l===_?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==U||U((e=>Object.assign(Object.assign({},e),{body:t,buttons:I.buttons})))}}function F(e,t){var l;const a=Object.assign({},Y),n=null===(l=null==a?void 0:a.components)||void 0===l?void 0:l.map((l=>{var a,n,i,o,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(u=null===(o=null===(i=s.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:a})}return l}));a.components=n,null==B||B(a)}return l.useEffect((()=>{T&&(null==b||b())}),[T]),l.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);M===s.CHANNEL_TYPE.EMAIL&&(null==R||R(u))}()}),[W]),l.useEffect((()=>{var e;const t=[];let l=[];if(M===s.CHANNEL_TYPE.MESSAGE){const e=null!=$?$:[];O([{label:"",options:[h,x]},...e]),l=[{label:"",options:[h,x]},...e]}else{"link"===(null==E?void 0:E.type)?(t.push({label:"",options:[x,h]}),k(x)):(t.push({label:"",options:[x,h]}),k(h));const e=null!=$?$:[];O([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:d.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}if((M===s.CHANNEL_TYPE.WHATSAPP||M===s.CHANNEL_TYPE.EMAIL||M===s.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(u.placeHolderNamePattern.test(E.updatedValue)&&M===s.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&M!==s.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===s.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,l,M);e.value&&k(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(k(x),L(E.updatedValue.split("https://")[1])):(k(h),L(E.updatedValue))}),[]),e.jsxs(g,Object.assign({channel:M,focused:T,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:w&&!S?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(P=E.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsx(o.Input,{state:"none",value:S?S.label:"Custom text",onChangeText:()=>{},onFocus:()=>{H(!V)},rightIcon:{icon:()=>e.jsx(t.default,{onClick:()=>{H(!V)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(i.Dropdown,{options:f,isSearchable:!1,onSelect:D,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:w?C?"custom_link"!==S.value||m.validateIsUrl(C)&&0!==C.trim().length?C.length>30?"Length cannot be more that 30":30===C.trim().length?"Required field":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,t){var l;L(t);const a="custom_link"===(null==S?void 0:S.value)?`https://${t}`:t;z(a,e),M===s.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(l=E.index)&&void 0!==l?l:0,a))}(S.value,e)}),V&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:V,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{N(!1),"{{custom.url}}"===e.actualValue?D({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?D({label:e.displayName,selected:!0,value:"custom_text"}):D({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("./EmailTemplatePreview.styled.js");exports.default=n=>{let{template:a,handleViewTemplate:l,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:j}=n;return e.jsxs(r.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(r.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:a.name}))}),e.jsx(r.IframeContainer,{children:j?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:j,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx(r.CardLoadingContainer,{})}))}),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{l&&l()}})})]}))};
|
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import l from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import l from"styled-components";import{CHANNEL_TYPE as i}from"../../template-preview/models/Channels.js";import{COLORS as a}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as s}from"../utils/getVariableNameEmail.js";import{highlightFor as p}from"../utils/highlightFor.js";import d from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const u=l.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
4
|
`,f=l.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
|
-
border-left-width: 1px;
|
|
7
|
-
border-left-color: ${a.stroke.primary};
|
|
8
6
|
max-width: 350px;
|
|
9
7
|
|
|
10
8
|
height: ${e=>e.channel===i.WHATSAPP?"500px":"475px"};
|
|
11
9
|
overflow-y: 'auto';
|
|
12
10
|
padding-bottom: 24px;
|
|
11
|
+
border-left: ${a.stroke.primary} 1px solid;
|
|
13
12
|
`,v=l.div`
|
|
14
13
|
padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
15
14
|
flex: 1;
|
|
16
15
|
height: 475px;
|
|
17
16
|
overflow-y: auto;
|
|
18
|
-
`,g=l=>{const{showVariableMapping:g,showOnlyContent:w,whatsappSpecificPickerMeta:b,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}=l,C=n(),P=n(),{device:E,display_content:T,channel:k,template:A,setTemplate:V}=r();const _=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(u,{children:[t(v,Object.assign({showOnlyContent:w,showVariableMapping:g},{children:"mobile"===E?t(c,{ref:P,display_content:null!=T?T:"",channel:k,template:A}):k!==i.MESSAGE?t(
|
|
17
|
+
`,g=l=>{const{showVariableMapping:g,showOnlyContent:w,whatsappSpecificPickerMeta:b,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}=l,C=n(),P=n(),{device:E,display_content:T,channel:k,template:A,setTemplate:V}=r();const _=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(u,{children:[t(v,Object.assign({showOnlyContent:w,showVariableMapping:g},{children:"mobile"===E?t(c,{ref:P,display_content:null!=T?T:"",channel:k,template:A}):k!==i.MESSAGE?t(d,{ref:C,channel:k,display_content:null!=T?T:""}):t(o,{})})),g&&t(f,Object.assign({channel:k},{children:k!==i.WHATSAPP?t(h,{onFocus:k===i.EMAIL?function(e){var t,o,n;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),r=s(e+1),d=k===i.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=_(d),c=null==d?void 0:d.offsetLeft;"desktop"===E?m&&C.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,E)):m&&P.current&&(null===(n=null==l?void 0:l.contentWindow)||void 0===n||n.scrollTo(null!=c?c:0,m),p(r,a.background.warning.light,2,k,E))}:void 0,showVariableModal:x,variableList:y,discountCode:j,setDiscountCode:M}):t(m,{whatsappSpecificPickerMeta:b,template:A,onTemplateChange:e=>{null==V||V(e)},showVariableModal:x,variableList:y})}))]})};export{g as default};
|
|
@@ -4,4 +4,4 @@ import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===d.EMAIL?v.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:_,index:y,showVariableModal:k,variableList:V,setShowDiscountCheckBox:A}=n;var O;const[T,P]=a(!1),[S,E]=a(""),[L,C]=a([]),[w,M]=a(),[W,I]=a(!1),{device:H,channel:B,isError:N,originalVariableList:$,template:R,templateSelectionTriggered:U,setTemplate:D,setDisplayContent:z,setOriginalVariableList:q,globalNormalizedPlaceholders:
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:_,index:y,showVariableModal:k,variableList:V,setShowDiscountCheckBox:A}=n;var O;const[T,P]=a(!1),[S,E]=a(""),[L,C]=a([]),[w,M]=a(),[W,I]=a(!1),{device:H,channel:B,isError:N,originalVariableList:$,template:R,templateSelectionTriggered:U,setTemplate:D,setDisplayContent:z,setOriginalVariableList:q,globalNormalizedPlaceholders:F}=p();function G(e,l){var t,a,o;const n=e;E(""),M(n),B===d.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(Y(null!==(t=n.value)&&void 0!==t?t:"","string"),null==Z||Z(null!==(a=_.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==Z||Z(null!==(o=_.index)&&void 0!==o?o:0,_.variableName),Y("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Y(n.value,"url"===n.bikPlaceholderType?"link":"string"):(E(""),Y("",n.value))}function Y(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(B!==d.WHATSAPP){const a=b(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===H?"template_html_mobile":"template_html_desktop"),i=B===d.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const u=$.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==q||q(u)}if(B===d.WHATSAPP){const l=null===(a=$.body)||void 0===a?void 0:a.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==q||q((e=>Object.assign(Object.assign({},e),{body:l,buttons:$.buttons})))}}function Z(e,l){var t;const a=Object.assign({},R),o=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,o,n,i,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(o=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===o?void 0:o[0])){const t=[...null!==(u=null===(i=null===(n=s.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));a.components=o,null==D||D(a)}return o((()=>{T&&(null==j||j())}),[T]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===H?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),u=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);B===d.EMAIL&&(null==z||z(u))}()}),[U]),o((()=>{var e;const l=[];let t=[];if(B===d.MESSAGE){const e=null!=F?F:[];C([{label:"",options:[f,x]},...e]),t=[{label:"",options:[f,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,f]}),M(x)):(l.push({label:"",options:[x,f]}),M(f));const e=null!=F?F:[];C([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:m.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}if((B===d.WHATSAPP||B===d.EMAIL||B===d.MESSAGE)&&_.updatedValue)if(r.test(_.updatedValue)&&B===d.WHATSAPP||_.updatedValue.startsWith("{{")&&B!==d.WHATSAPP){const e=function(e,l,t){var a;let o={label:"",value:""};const n=t===d.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?o={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(o=e)}))}));return o}(_,t,B);e.value&&M(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(M(x),E(_.updatedValue.split("https://")[1])):(M(f),E(_.updatedValue))}),[]),e(h,Object.assign({channel:B,focused:T,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:N&&!w?v.content.negative:v.content.primary}},{children:[null===(O=_.variableName)||void 0===O?void 0:O.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?l(s,{state:"none",value:w?w.label:"Custom text",onChangeText:()=>{},onFocus:()=>{I(!W)},rightIcon:{icon:()=>l(t,{onClick:()=>{I(!W)},width:24,height:24,color:v.content.primary})}}):l(u,{options:L,isSearchable:!1,onSelect:G,defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),("custom_text"===(null==w?void 0:w.value)||"custom_link"===(null==w?void 0:w.value))&&l(s,{labelText:"custom_text"===(null==w?void 0:w.value)?"Custom text value":"custom_link"===(null==w?void 0:w.value)?"Custom URL value":"",id:`variable-value-${null==w?void 0:w.value}-${y}`,value:S,errorMessage:N?S?"custom_link"!==w.value||g(S)&&0!==S.trim().length?S.length>30?"Length cannot be more that 30":30===S.trim().length?"Required field":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==w?void 0:w.value)?void 0:30,prefixText:"custom_link"===(null==w?void 0:w.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===w.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;E(l);const a="custom_link"===(null==w?void 0:w.value)?`https://${l}`:l;Y(a,e),B===d.WHATSAPP&&(null==Z||Z(null!==(t=_.index)&&void 0!==t?t:0,a))}(w.value,e)}),W&&l(i,{zIndex:2e3,data:null!=V?V:[],showVariable:W,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{A(!1),"{{custom.url}}"===e.actualValue?G({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?G({label:e.displayName,selected:!0,value:"custom_text"}):G({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,j as default};
|
|
@@ -4,7 +4,7 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
|
|
|
4
4
|
border-top-left-radius: 4px;
|
|
5
5
|
border-top-right-radius: 4px;
|
|
6
6
|
border: 1px solid ${e.stroke.primary};
|
|
7
|
-
`,
|
|
7
|
+
`,i=r.div`
|
|
8
8
|
width: 100%;
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
@@ -14,7 +14,7 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
|
|
|
14
14
|
border-top-color: ${e.stroke.primary};
|
|
15
15
|
border-top-width: ${r=>r.hideHeader?"1px":"0px"};
|
|
16
16
|
overflow: scroll;
|
|
17
|
-
`,
|
|
17
|
+
`,d=r.div`
|
|
18
18
|
width: 100%;
|
|
19
19
|
height: 100%;
|
|
20
20
|
background-color: ${o.grayscale[100]};
|
|
@@ -25,7 +25,8 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
|
|
|
25
25
|
align-items: center;
|
|
26
26
|
justify-content: center;
|
|
27
27
|
flex-grow: 1;
|
|
28
|
-
|
|
28
|
+
min-height: 180px;
|
|
29
|
+
`,p=r.div`
|
|
29
30
|
display: flex;
|
|
30
31
|
justify-content: center;
|
|
31
32
|
width: 100%;
|
|
@@ -33,10 +34,10 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
|
|
|
33
34
|
border-bottom-left-radius: 4px;
|
|
34
35
|
border-bottom-right-radius: 4px;
|
|
35
36
|
border: 1px solid ${e.stroke.primary};
|
|
36
|
-
`,
|
|
37
|
+
`,a=r.div`
|
|
37
38
|
border-radius: 4px;
|
|
38
39
|
background-color: ${e.surface.standard};
|
|
39
40
|
margin-top: ${r=>r.hideHeader?0:16};
|
|
40
41
|
display: flex;
|
|
41
42
|
flex-direction: column;
|
|
42
|
-
`;export{
|
|
43
|
+
`;export{d as CardLoadingContainer,a as EmailContainer,t as Header,s as IframeContainer,i as ImageContainer,p as ViewButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as l,IframeContainer as a,ImageContainer as o,CardLoadingContainer as m,ViewButton as s}from"./EmailTemplatePreview.styled.js";const d=d=>{let{template:
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as l,IframeContainer as a,ImageContainer as o,CardLoadingContainer as m,ViewButton as s}from"./EmailTemplatePreview.styled.js";const d=d=>{let{template:c,handleViewTemplate:h,hideHeader:p,hideViewButton:y,containerStyle:u,emailHtmlContainerId:j,emailDisplayContent:b}=d;return e(r,Object.assign({hideHeader:p,style:Object.assign({},null!=u?u:{})},{children:[!p&&t(l,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),t(a,{children:b?t("iframe",{title:"Email template preview",id:null!=j?j:"",width:"100%",srcDoc:b,height:"100%",style:{pointerEvents:"none"}}):t(o,Object.assign({hideHeader:p},{children:t(m,{})}))}),!y&&t(s,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{h&&h()}})})]}))};export{d as default};
|