@bikdotai/bik-component-library 0.0.314-beta.30 → 0.0.314-beta.32
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/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +0 -4
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +3 -3
- package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +0 -4
- package/dist/esm/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +3 -3
- package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),o=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:C,globalPlaceholders:S,showOnlyContent:v,whatsappSpecificPickerMeta:b,zIndex:j,showVariableModal:M,variableList:T,discountCode:E,setDiscountCode:P,onBackPress:x}=d;var L,f;t.useEffect((()=>{A(h)}),[h]);const[w,q]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[y,A]=t.useState(h),[N,k]=t.useState(!1),[D,V]=t.useState(c),[_,H]=t.useState(null!=g?g:[]),[I,O]=t.useState(!1);const B=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(S)),[S]);return e.jsx(o.TemplateModalContext.Provider,Object.assign({value:{template:D,setTemplate:V,device:w,setDevice:q,display_content:y,setDisplayContent:A,originalVariableList:_,setOriginalVariableList:H,isError:N,setIsError:k,channel:m,globalNormalizedPlaceholders:B,templateSelectionTriggered:I,setTemplateSelectionTriggered:O}},{children:v?e.jsx(r.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:j,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==D?void 0:D.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(L=null==D?void 0:D.category)&&void 0!==L?L:"")} • ${null!==(f=null==D?void 0:D.templateCategory)&&void 0!==f?f:""}`:"",onBackPress:()=>{null==x||x()}},{children:[e.jsx(r.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:M,variableList:T,discountCode:E,setDiscountCode:P}),C?e.jsx(i.default,{onSelect:function(){const e=null==C?void 0:C(D,_,null!=y?y:"");e?k(!!e):O(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -21,8 +21,6 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
21
21
|
globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
|
|
22
22
|
templateSelectionTriggered: boolean;
|
|
23
23
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
24
|
-
isChecked: boolean;
|
|
25
|
-
setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
26
24
|
}>;
|
|
27
25
|
export declare const useTemplateModalContext: () => {
|
|
28
26
|
device: DEVICE_TYPES;
|
|
@@ -40,6 +38,4 @@ export declare const useTemplateModalContext: () => {
|
|
|
40
38
|
globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
|
|
41
39
|
templateSelectionTriggered: boolean;
|
|
42
40
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
43
|
-
isChecked: boolean;
|
|
44
|
-
setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
45
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),i=require("../../dropdown/Dropdown.js"),o=require("../../input/Input.js"),u=require("../../template-preview/constants/regexPatterns.js"),s=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),r=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),v=require("../context/templateModalContext.js"),p=require("../utils/getVariableNameEmail.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const b=m(a).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
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
|
-
`,g={value:"custom_link",label:"Custom URL"},
|
|
7
|
+
`,g={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"};exports.Container=b,exports.default=a=>{let{onFocus:m,variable:h,index:E,showVariableModal:_,variableList:j,setShowDiscountCheckBox:A}=a;var y;const[f,P]=t.useState(!1),[T,N]=t.useState(""),[C,L]=t.useState([]),[k,O]=t.useState(),[S,V]=t.useState(!1),[H,w]=t.useState(!1),{device:M,channel:q,isError:Y,originalVariableList:W,template:I,templateSelectionTriggered:B,setTemplate:$,setDisplayContent:R,setOriginalVariableList:z,globalNormalizedPlaceholders:D}=v.useTemplateModalContext();function U(e,l){var t,a,n;const i=e;N(""),O(i),q===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(Z(null!==(t=i.value)&&void 0!==t?t:"","string"),null==F||F(null!==(a=h.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==F||F(null!==(n=h.index)&&void 0!==n?n:0,h.variableName),Z("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?Z(i.value,"url"===i.bikPlaceholderType?"link":"string"):(N(""),Z("",i.value))}function Z(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(q!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(E+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===M?"template_html_mobile":"template_html_desktop"),o=q===s.CHANNEL_TYPE.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:h.variableName);const u=W.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==z||z(u)}if(q===s.CHANNEL_TYPE.WHATSAPP){const l=null===(a=W.body)||void 0===a?void 0:a.map(((l,t)=>t===E?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==z||z((e=>Object.assign(Object.assign({},e),{body:l,buttons:W.buttons})))}}function F(e,l){var t;const a=Object.assign({},I),n=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,n,i,o,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const t=[...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:[]];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=n,null==$||$(a)}return t.useEffect((()=>{f&&(null==m||m())}),[f]),t.useEffect((()=>{!function(){var e,l,t,a,n;const i="mobile"===M?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(t=null===(l=null===(e=null==o?void 0:o.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===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);q===s.CHANNEL_TYPE.EMAIL&&(null==R||R(u))}()}),[B]),t.useEffect((()=>{var e;const l=[];let t=[];if(q===s.CHANNEL_TYPE.MESSAGE){const e=null!=D?D:[];L([{label:"",options:[x,g]},...e]),t=[{label:"",options:[x,g]},...e]}else{"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[g,x]}),O(g)):(l.push({label:"",options:[g,x]}),O(x));const e=null!=D?D:[];L([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:r.default.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((q===s.CHANNEL_TYPE.WHATSAPP||q===s.CHANNEL_TYPE.EMAIL||q===s.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(u.placeHolderNamePattern.test(h.updatedValue)&&q===s.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&q!==s.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const i=t===s.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");_?n={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())===i.trim()&&(n=e)}))}));return n}(h,t,q);e.value&&O(e)}else(null===(e=h.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(O(g),N(h.updatedValue.split("https://")[1])):(O(x),N(h.updatedValue))}),[]),t.useEffect((()=>{M&&k&&T&&setTimeout((()=>{Z("custom_link"===(null==k?void 0:k.value)?`https://${T}`:T,k.value)}),100)}),[M]),t.useEffect((()=>{!H&&k&&h.updatedValue&&setTimeout((()=>{Z("custom_link"===(null==k?void 0:k.value)?`https://${h.updatedValue}`:h.updatedValue,k.value),w(!0)}),100)}),[k]),e.jsxs(b,Object.assign({channel:q,focused:f,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(d.BodySecondary,Object.assign({style:{color:Y&&!k?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(y=h.variableName)||void 0===y?void 0:y.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:_?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==k?void 0:k.label)?"space-between":"flex-end"}},{children:[e.jsx(d.BodyPrimary,{children:null==k?void 0:k.label}),e.jsx(l.default,{onClick:()=>{V(!S)},width:24,height:24,color:c.COLORS.content.primary})]})):e.jsx(i.Dropdown,{options:C,isSearchable:!1,onSelect:U,defaultOptions:k?[Object.assign(Object.assign({},k),{selected:!0})]:[]})})),("custom_text"===(null==k?void 0:k.value)||"custom_link"===(null==k?void 0:k.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==k?void 0:k.value)?"Custom text value":"custom_link"===(null==k?void 0:k.value)?"Custom URL value":"",id:`variable-value-${null==k?void 0:k.value}-${E}`,value:T,errorMessage:Y?T&&0!==T.trim().length?"custom_link"!==k.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${T.trim()}`)&&0!==T.trim().length?"custom_link"!==k.value&&T.length>30?"Length cannot be more that 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==k?void 0:k.value)?void 0:30,prefixText:"custom_link"===(null==k?void 0:k.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===k.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{console.log("valuevalue3: ",e),function(e,l){var t;N(l);const a="custom_link"===(null==k?void 0:k.value)?`https://${l}`:l;Z(a,e),q===s.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(t=h.index)&&void 0!==t?t:0,a))}(k.value,e)}}),S&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=j?j:[],showVariable:S,setShowVariable:V,placeholder:"Add a variable",customTrigger:e=>{A(!1),"{{custom.url}}"===e.actualValue?U({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?U({label:e.displayName,selected:!0,value:"custom_text"}):U({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),r=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"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),x=require("./VariableConnector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=p(i);const j=b.default.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
height: 100%;
|
|
6
|
-
`,
|
|
6
|
+
`,g=b.default.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|
|
@@ -25,4 +25,4 @@
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
|
-
`;exports.AddVariableStyled=
|
|
28
|
+
`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,T]=t.useState(!1),[k,L]=t.useState(""),[B,A]=t.useState(!1),E=t.useRef(),M=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&A&&A(!0))}))}),[m]),e.jsxs(j,{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==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):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))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{A&&A(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),q(!0)):(q(!1),T(!1))},errorMessage:""}),S&&e.jsx(g,Object.assign({ref:M,id:"addVar",onClick:e=>{e.stopPropagation(),T(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:w,setShowVariable:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../shimmer/ShimmerComponent/BikShimmer.js"),r=require("../button/Button.js"),n=require("../TypographyStyle.js"),a=require("./EmailTemplatePreview.styled.js");exports.default=s=>{let{template:l,handleViewTemplate:o,hideHeader:d,hideViewButton:m,containerStyle:h,emailHtmlContainerId:u,emailDisplayContent:j}=s;const[c,x]=t.useState(!1);return e.jsxs(a.EmailContainer,Object.assign({hideHeader:d,style:Object.assign({},null!=h?h:{})},{children:[!d&&e.jsx(a.Header,{children:e.jsx(n.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:l.name}))}),e.jsx(a.IframeContainer,{children:j?c?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:j,height:"100%",style:{pointerEvents:"none"},onLoad:()=>x(!0)}):e.jsx(i.BikShimmer,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]}):e.jsx(a.ImageContainer,Object.assign({hideHeader:d},{children:e.jsx(a.CardLoadingContainer,{})}))}),!m&&e.jsx(a.ViewButton,{children:e.jsx(r.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{o&&o()}})})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import d from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:u,closeDialog:g,showVariableMapping:b,channel:v,htmlContent:f,templateVariables:C,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:j,whatsappSpecificPickerMeta:w,zIndex:P,showVariableModal:T,variableList:L,discountCode:y,setDiscountCode:E,onBackPress:V}=h;var k,x;o((()=>{O(f)}),[f]);const[D,I]=i(v===s.EMAIL?"desktop":"mobile"),[A,O]=i(f),[z,B]=i(!1),[F,H]=i(u),[$,N]=i(null!=C?C:[]),[U,W]=i(!1);const _=a((()=>p(S)),[S]);return e(c.Provider,Object.assign({value:{template:F,setTemplate:H,device:D,setDevice:I,display_content:A,setDisplayContent:O,originalVariableList:$,setOriginalVariableList:N,isError:z,setIsError:B,channel:v,globalNormalizedPlaceholders:_,templateSelectionTriggered:U,setTemplateSelectionTriggered:W}},{children:j?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:P,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==F?void 0:F.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(k=null==F?void 0:F.category)&&void 0!==k?k:"")} • ${null!==(x=null==F?void 0:F.templateCategory)&&void 0!==x?x:""}`:"",onBackPress:()=>{null==V||V()}},{children:[e(m,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:w,showVariableModal:T,variableList:L,discountCode:y,setDiscountCode:E}),M?e(d,{onSelect:function(){const e=null==M?void 0:M(F,$,null!=A?A:"");e?B(!!e):W(!0)}}):e(l,{})]}))}))};export{h as TemplateContextMapper};
|
|
@@ -21,8 +21,6 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
21
21
|
globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
|
|
22
22
|
templateSelectionTriggered: boolean;
|
|
23
23
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
24
|
-
isChecked: boolean;
|
|
25
|
-
setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
26
24
|
}>;
|
|
27
25
|
export declare const useTemplateModalContext: () => {
|
|
28
26
|
device: DEVICE_TYPES;
|
|
@@ -40,6 +38,4 @@ export declare const useTemplateModalContext: () => {
|
|
|
40
38
|
globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
|
|
41
39
|
templateSelectionTriggered: boolean;
|
|
42
40
|
setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
43
|
-
isChecked: boolean;
|
|
44
|
-
setIsChecked?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
|
|
45
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1
|
|
1
|
+
import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as o}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as u}from"../../dropdown/Dropdown.js";import{Input as s}from"../../input/Input.js";import{placeHolderNamePattern as d}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as c,BodyPrimary as m}from"../../TypographyStyle.js";import v from"../../../utils/StringUtils.js";import{COLORS as p}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as g}from"../utils/getVariableNameEmail.js";const h=n.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===r.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===r.EMAIL?p.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},f=n=>{let{onFocus:f,variable:j,index:y,showVariableModal:k,variableList:V,setShowDiscountCheckBox:A}=n;var O;const[T,E]=a(!1),[P,S]=a(""),[w,L]=a([]),[C,M]=a(),[W,$]=a(!1),[H,I]=a(!1),{device:B,channel:N,isError:z,originalVariableList:R,template:U,templateSelectionTriggered:D,setTemplate:Z,setDisplayContent:G,setOriginalVariableList:q,globalNormalizedPlaceholders:F}=b();function Y(e,l){var t,a,o;const n=e;S(""),M(n),N===r.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(J(null!==(t=n.value)&&void 0!==t?t:"","string"),null==K||K(null!==(a=j.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==K||K(null!==(o=j.index)&&void 0!==o?o:0,j.variableName),J("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?J(n.value,"url"===n.bikPlaceholderType?"link":"string"):(S(""),J("",n.value))}function J(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(N!==r.WHATSAPP){const a=g(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),i=N===r.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:j.variableName);const u=R.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==q||q(u)}if(N===r.WHATSAPP){const l=null===(a=R.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:R.buttons})))}}function K(e,l){var t;const a=Object.assign({},U),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==Z||Z(a)}return o((()=>{T&&(null==f||f())}),[T]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===B?"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);N===r.EMAIL&&(null==G||G(u))}()}),[D]),o((()=>{var e;const l=[];let t=[];if(N===r.MESSAGE){const e=null!=F?F:[];L([{label:"",options:[_,x]},...e]),t=[{label:"",options:[_,x]},...e]}else{"link"===(null==j?void 0:j.type)?(l.push({label:"",options:[x,_]}),M(x)):(l.push({label:"",options:[x,_]}),M(_));const e=null!=F?F:[];L([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:v.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((N===r.WHATSAPP||N===r.EMAIL||N===r.MESSAGE)&&j.updatedValue)if(d.test(j.updatedValue)&&N===r.WHATSAPP||j.updatedValue.startsWith("{{")&&N!==r.WHATSAPP){const e=function(e,l,t){var a;let o={label:"",value:""};const n=t===r.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}(j,t,N);e.value&&M(e)}else(null===(e=j.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(M(x),S(j.updatedValue.split("https://")[1])):(M(_),S(j.updatedValue))}),[]),o((()=>{B&&C&&P&&setTimeout((()=>{J("custom_link"===(null==C?void 0:C.value)?`https://${P}`:P,C.value)}),100)}),[B]),o((()=>{!H&&C&&j.updatedValue&&setTimeout((()=>{J("custom_link"===(null==C?void 0:C.value)?`https://${j.updatedValue}`:j.updatedValue,C.value),I(!0)}),100)}),[C]),e(h,Object.assign({channel:N,focused:T,onMouseEnter:()=>E(!0),onMouseLeave:()=>E(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:z&&!C?p.content.negative:p.content.primary}},{children:[null===(O=j.variableName)||void 0===O?void 0:O.replace("{{","").replace("}}","")," ","link"===(null==j?void 0:j.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==C?void 0:C.label)?"space-between":"flex-end"}},{children:[l(m,{children:null==C?void 0:C.label}),l(t,{onClick:()=>{$(!W)},width:24,height:24,color:p.content.primary})]})):l(u,{options:w,isSearchable:!1,onSelect:Y,defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),("custom_text"===(null==C?void 0:C.value)||"custom_link"===(null==C?void 0:C.value))&&l(s,{labelText:"custom_text"===(null==C?void 0:C.value)?"Custom text value":"custom_link"===(null==C?void 0:C.value)?"Custom URL value":"",id:`variable-value-${null==C?void 0:C.value}-${y}`,value:P,errorMessage:z?P&&0!==P.trim().length?"custom_link"!==C.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${P.trim()}`)&&0!==P.trim().length?"custom_link"!==C.value&&P.length>30?"Length cannot be more that 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==C?void 0:C.value)?void 0:30,prefixText:"custom_link"===(null==C?void 0:C.value)?"https://":"",placeholder:"link"===j.type||"custom_link"===C.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{console.log("valuevalue3: ",e),function(e,l){var t;S(l);const a="custom_link"===(null==C?void 0:C.value)?`https://${l}`:l;J(a,e),N===r.WHATSAPP&&(null==K||K(null!==(t=j.index)&&void 0!==t?t:0,a))}(C.value,e)}}),W&&l(i,{zIndex:2e3,data:null!=V?V:[],showVariable:W,setShowVariable:$,placeholder:"Add a variable",customTrigger:e=>{A(!1),"{{custom.url}}"===e.actualValue?Y({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Y({label:e.displayName,selected:!0,value:"custom_text"}):Y({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,f as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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 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{TitleRegular as h,BodySecondary as m,TitleSmall as g}from"../../TypographyStyle.js";import{CheckBox as b}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const
|
|
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 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{TitleRegular as h,BodySecondary as m,TitleSmall as g}from"../../TypographyStyle.js";import{CheckBox as b}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=l.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
height: 100%;
|
|
6
|
-
`,
|
|
6
|
+
`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[L,B]=a(!1),[A,I]=a(!1),[M,E]=a(!1),[S,D]=a(""),[F,N]=a(!1),z=o(),P=o();return r((()=>{k&&k(O+S)}),[S]),r((()=>{console.log("originalVariableList: ",C),C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),O&&N&&N(!0))}))}),[C]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,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(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((t,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:B})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a))),(L||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(b,{isChecked:F,onValueChange:()=>{N&&N(!F)}}),i(g,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),F&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{I(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),I(!0)):(I(!1),E(!1))},errorMessage:""}),A&&i(j,Object.assign({ref:P,id:"addVar",onClick:e=>{e.stopPropagation(),E(!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"}))]}))}))]})),M&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:M,setShowVariable:E,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),I(!1)}})]})},j=l.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|
|
@@ -25,4 +25,4 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
|
-
`;export{j as AddVariableStyled,
|
|
28
|
+
`;export{j as AddVariableStyled,x as Container,y as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import{BikShimmer as r}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Button as n}from"../button/Button.js";import{TitleRegular as o}from"../TypographyStyle.js";import{EmailContainer as m,Header as l,IframeContainer as a,ImageContainer as s,CardLoadingContainer as d,ViewButton as h}from"./EmailTemplatePreview.styled.js";const p=p=>{let{template:c,handleViewTemplate:y,hideHeader:u,hideViewButton:j,containerStyle:b,emailHtmlContainerId:f,emailDisplayContent:g}=p;const[w,x]=i(!1);return e(m,Object.assign({hideHeader:u,style:Object.assign({},null!=b?b:{})},{children:[!u&&t(l,{children:t(o,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),t(a,{children:g?w?t("iframe",{title:"Email template preview",id:null!=f?f:"",width:"100%",srcDoc:g,height:"100%",style:{pointerEvents:"none"},onLoad:()=>x(!0)}):t(r,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]}):t(s,Object.assign({hideHeader:u},{children:t(d,{})}))}),!j&&t(h,{children:t(n,{buttonType:"tertiary",buttonText:"View",onClick:()=>{y&&y()}})})]}))};export{p as default};
|