@bikdotai/bik-component-library 0.0.297-beta.8 → 0.0.297

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.
Files changed (23) hide show
  1. package/dist/cjs/components/add-variableV2/AddVariableV2SideModal.js +1 -1
  2. package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +1 -3
  3. package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
  4. package/dist/cjs/components/template-context-mapper/modalElements/Body.d.ts +0 -2
  5. package/dist/cjs/components/template-context-mapper/modalElements/Body.js +2 -2
  6. package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -3
  7. package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
  8. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -2
  9. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
  10. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts +1 -4
  11. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -24
  12. package/dist/esm/components/add-variableV2/AddVariableV2SideModal.js +1 -1
  13. package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +1 -3
  14. package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
  15. package/dist/esm/components/template-context-mapper/modalElements/Body.d.ts +0 -2
  16. package/dist/esm/components/template-context-mapper/modalElements/Body.js +4 -4
  17. package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -3
  18. package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
  19. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts +1 -2
  20. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
  21. package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts +1 -4
  22. package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -24
  23. package/package.json +1 -1
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react-dom"),r=require("./AddVariableV2.js"),d=require("../side-modal/SideModal.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(a);exports.AddVariableV2SideModal=a=>i.default.createPortal(e.jsx(d.SideModalStyle,Object.assign({zIndex:a.zIndex},{children:e.jsx(d.SideModalContainer,{children:e.jsx(r.AddVariableV2,{data:a.data,showVariable:a.showVariable,setShowVariable:a.setShowVariable,variableValue:a.variableValue,setVariableValue:a.setVariableValue,placeholder:"Add a variable",customTrigger:a.customTrigger,isModalState:!0})})})),document.body);
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react-dom"),r=require("./AddVariableV2.js"),d=require("../side-modal/SideModal.style.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(a);exports.AddVariableV2SideModal=a=>i.default.createPortal(e.jsx(d.SideModalStyle,Object.assign({zIndex:a.zIndex},{children:e.jsx(d.SideModalContainer,{children:e.jsx(r.AddVariableV2,{data:a.data,showVariable:a.showVariable,setShowVariable:a.setShowVariable,placeholder:"Add a variable",customTrigger:a.customTrigger,isModalState:!0})})})),document.body);
@@ -21,7 +21,5 @@ export interface TemplateContextMapperProps {
21
21
  showVariableModal?: boolean;
22
22
  variableList?: VariableListInterfaceV2[];
23
23
  onBackPress?: () => void;
24
- discountCode?: string;
25
- setDiscountCode?: (code: string) => void;
26
24
  }
27
- export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
25
+ export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, onBackPress, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
@@ -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"),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,{})]}))}))};
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"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),o=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:S,globalPlaceholders:v,showOnlyContent:b,whatsappSpecificPickerMeta:j,zIndex:M,showVariableModal:T,variableList:E,onBackPress:P}=d;var x,C;t.useEffect((()=>{q(h)}),[h]);const[L,f]=t.useState(m===r.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[w,q]=t.useState(h),[y,A]=t.useState(!1),[N,k]=t.useState(c),[V,_]=t.useState(null!=g?g:[]),[H,I]=t.useState(!1);const O=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:N,setTemplate:k,device:L,setDevice:f,display_content:w,setDisplayContent:q,originalVariableList:V,setOriginalVariableList:_,isError:y,setIsError:A,channel:m,globalNormalizedPlaceholders:O,templateSelectionTriggered:H,setTemplateSelectionTriggered:I}},{children:b?e.jsx(o.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:M,centralContainerStyles:{width:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==N?void 0:N.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(x=null==N?void 0:N.category)&&void 0!==x?x:"")} • ${null!==(C=null==N?void 0:N.templateCategory)&&void 0!==C?C:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(o.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:j,showVariableModal:T,variableList:E}),S?e.jsx(i.default,{onSelect:function(){const e=null==S?void 0:S(N,V,null!=w?w:"");e?A(!!e):I(!0)}}):e.jsx(e.Fragment,{})]}))}))};
@@ -6,8 +6,6 @@ export interface BodyProps {
6
6
  whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
7
7
  showVariableModal?: boolean;
8
8
  variableList?: VariableListInterfaceV2[];
9
- discountCode?: string;
10
- setDiscountCode?: (code: string) => void;
11
9
  }
12
10
  declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
13
11
  export default Body;
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),a=require("../utils/getVariableNameEmail.js"),r=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),c=require("./VariableConnectorsPanel.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(l);const m=h.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),a=require("../utils/getVariableNameEmail.js"),r=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),p=require("./VariableConnectorsPanel.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(l);const m=h.default.div`
2
2
  display: flex;
3
3
  // height: 100%;
4
4
  `,f=h.default.div`
@@ -15,4 +15,4 @@
15
15
  flex: 1;
16
16
  height: 475px;
17
17
  overflow-y: auto;
18
- `;exports.default=l=>{const{showVariableMapping:p,showOnlyContent:h,whatsappSpecificPickerMeta:g,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:w}=l,C=t.useRef(),E=t.useRef(),{device:y,display_content:P,channel:T,template:L,setTemplate:M}=i.useTemplateModalContext();const _=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:p},{children:"mobile"===y?e.jsx(u.default,{ref:E,display_content:null!=P?P:"",channel:T,template:L}):T!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:C,channel:T,display_content:null!=P?P:""}):e.jsx(e.Fragment,{})})),p&&e.jsx(f,Object.assign({channel:T},{children:T!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(c.default,{onFocus:T===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),d=a.getVariableNameForEmailByIndex(e+1),u=T===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),c=_(u),p=null==u?void 0:u.offsetLeft;"desktop"===y?c&&C.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=p?p:0,c),r.highlightFor(d,o.COLORS.background.warning.light,2,T,y)):c&&E.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=p?p:0,c),r.highlightFor(d,o.COLORS.background.warning.light,2,T,y))}:void 0,showVariableModal:v,variableList:b,discountCode:j,setDiscountCode:w}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:L,onTemplateChange:e=>{null==M||M(e)},showVariableModal:v,variableList:b})}))]})};
18
+ `;exports.default=l=>{const{showVariableMapping:c,showOnlyContent:h,whatsappSpecificPickerMeta:g,showVariableModal:v,variableList:b}=l,j=t.useRef(),w=t.useRef(),{device:E,display_content:y,channel:C,template:P,setTemplate:T}=i.useTemplateModalContext();const L=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:c},{children:"mobile"===E?e.jsx(u.default,{ref:w,display_content:null!=y?y:"",channel:C,template:P}):C!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:j,channel:C,display_content:null!=y?y:""}):e.jsx(e.Fragment,{})})),c&&e.jsx(f,Object.assign({channel:C},{children:C!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(p.default,{onFocus:C===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),d=a.getVariableNameForEmailByIndex(e+1),u=C===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),p=L(u),c=null==u?void 0:u.offsetLeft;"desktop"===E?p&&j.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),r.highlightFor(d,o.COLORS.background.warning.light,2,C,E)):p&&w.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),r.highlightFor(d,o.COLORS.background.warning.light,2,C,E))}:void 0,showVariableModal:v,variableList:b}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:P,onTemplateChange:e=>{null==T||T(e)},showVariableModal:v,variableList:b})}))]})};
@@ -9,8 +9,6 @@ export interface TemplateSelectModalContentProps {
9
9
  whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
10
10
  showVariableModal?: boolean;
11
11
  variableList?: VariableListInterfaceV2[];
12
- discountCode?: string;
13
- setDiscountCode?: (code: string) => void;
14
12
  }
15
- declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
13
+ declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
16
14
  export default TemplateSelectModalContent;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../template-preview/models/Channels.js"),s=require("./Body.js"),a=require("./Header.js");exports.default=i=>{let{channel:r,showVariableMapping:o,showOnlyContent:n,whatsappSpecificPickerMeta:l,showVariableModal:d,variableList:c,discountCode:p,setDiscountCode:u}=i;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[r===t.CHANNEL_TYPE.EMAIL&&e.jsx(a.default,{showOnlyContent:n}),e.jsx(s.default,{whatsappSpecificPickerMeta:l,showVariableMapping:!!o,showOnlyContent:n,showVariableModal:d,variableList:c,discountCode:p,setDiscountCode:u})]})}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),t=require("./Body.js"),i=require("./Header.js");exports.default=r=>{let{channel:s,showVariableMapping:l,showOnlyContent:n,whatsappSpecificPickerMeta:o,showVariableModal:d,variableList:p}=r;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[s===a.CHANNEL_TYPE.EMAIL&&e.jsx(i.default,{showOnlyContent:n}),e.jsx(t.default,{whatsappSpecificPickerMeta:o,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:d,variableList:p})]})}))};
@@ -12,7 +12,6 @@ export interface VariableConnectorProps {
12
12
  index: number;
13
13
  showVariableModal?: boolean;
14
14
  variableList?: VariableListInterfaceV2[];
15
- setShowDiscountCheckBox?: any;
16
15
  }
17
- declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
16
+ declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
18
17
  export default VariableConnector;
@@ -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"},E={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:_,index:h,showVariableModal:j,variableList:A,setShowDiscountCheckBox:N}=a;var P;const[T,y]=t.useState(!1),[C,L]=t.useState(""),[f,O]=t.useState([]),[S,k]=t.useState(),[V,H]=t.useState(!1),{device:M,channel:q,isError:w,originalVariableList:I,template:Y,templateSelectionTriggered:W,setTemplate:B,setDisplayContent:R,setOriginalVariableList:U,globalNormalizedPlaceholders:$}=v.useTemplateModalContext();function D(e,l){var t,a,n;const i=e;L(""),k(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=_.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==F||F(null!==(n=_.index)&&void 0!==n?n:0,_.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,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(h+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:_.variableName);const u=I.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U(u)}if(q===s.CHANNEL_TYPE.WHATSAPP){const l=null===(a=I.body)||void 0===a?void 0:a.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U((e=>Object.assign(Object.assign({},e),{body:l,buttons:I.buttons})))}}function F(e,l){var t;const a=Object.assign({},Y),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==B||B(a)}return t.useEffect((()=>{T&&(null==b||b())}),[T]),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))}()}),[W]),t.useEffect((()=>{var e;const l=[];let t=[];if(q===s.CHANNEL_TYPE.MESSAGE){const e=null!=$?$:[];O([{label:"",options:[E,x]},...e]),t=[{label:"",options:[E,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,E]}),k(x)):(l.push({label:"",options:[x,E]}),k(E));const e=null!=$?$:[];O([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:d.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)&&_.updatedValue)if(u.placeHolderNamePattern.test(_.updatedValue)&&q===s.CHANNEL_TYPE.WHATSAPP||_.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("}}","");j?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}(_,t,q);e.value&&k(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(k(x),L(_.updatedValue.split("https://")[1])):(k(E),L(_.updatedValue))}),[]),e.jsxs(g,Object.assign({channel:q,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=_.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.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(l.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}-${h}`,value:C,errorMessage:w?C?"custom_link"!==S.value||m.validateIsUrl(C)?"":"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"===_.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;L(l);const a="custom_link"===(null==S?void 0:S.value)?`https://${l}`:l;z(a,e),q===s.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(t=_.index)&&void 0!==t?t: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"},E={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:_,index:h,showVariableModal:j,variableList:A}=a;var N;const[P,T]=t.useState(!1),[y,C]=t.useState(""),[L,f]=t.useState([]),[O,S]=t.useState(),[k,V]=t.useState(!1),{device:H,channel:M,isError:q,originalVariableList:I,template:w,templateSelectionTriggered:Y,setTemplate:W,setDisplayContent:B,setOriginalVariableList:R,globalNormalizedPlaceholders:U}=v.useTemplateModalContext();function $(e,l){var t,a,n;const i=e;C(""),S(i),M===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(D(null!==(t=i.value)&&void 0!==t?t:"","string"),null==z||z(null!==(a=_.index)&&void 0!==a?a:0,`[[${i.value}]]`)):(null==z||z(null!==(n=_.index)&&void 0!==n?n:0,_.variableName),D("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?D(i.value,"url"===i.bikPlaceholderType?"link":"string"):(C(""),D("",i.value))}function D(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(M!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(h+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===H?"template_html_mobile":"template_html_desktop"),o=M===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:_.variableName);const u=I.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R(u)}if(M===s.CHANNEL_TYPE.WHATSAPP){const l=null===(a=I.body)||void 0===a?void 0:a.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R((e=>Object.assign(Object.assign({},e),{body:l,buttons:I.buttons})))}}function z(e,l){var t;const a=Object.assign({},w),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==W||W(a)}return t.useEffect((()=>{P&&(null==b||b())}),[P]),t.useEffect((()=>{!function(){var e,l,t,a,n;const i="mobile"===H?"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);M===s.CHANNEL_TYPE.EMAIL&&(null==B||B(u))}()}),[Y]),t.useEffect((()=>{var e;const l=[];let t=[];if(M===s.CHANNEL_TYPE.MESSAGE){const e=null!=U?U:[];f([{label:"",options:[E,x]},...e]),t=[{label:"",options:[E,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,E]}),S(x)):(l.push({label:"",options:[x,E]}),S(E));const e=null!=U?U:[];f([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:d.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((M===s.CHANNEL_TYPE.WHATSAPP||M===s.CHANNEL_TYPE.EMAIL||M===s.CHANNEL_TYPE.MESSAGE)&&_.updatedValue)if(u.placeHolderNamePattern.test(_.updatedValue)&&M===s.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&M!==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("}}","");j?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}(_,t,M);e.value&&S(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(S(x),C(_.updatedValue.split("https://")[1])):(S(E),C(_.updatedValue))}),[]),e.jsxs(g,Object.assign({channel:M,focused:P,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:q&&!O?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(N=_.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsx(o.Input,{state:"none",value:O?O.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>e.jsx(l.default,{onClick:()=>{V(!k)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(i.Dropdown,{options:L,isSearchable:!1,onSelect:$,defaultOptions:O?[Object.assign(Object.assign({},O),{selected:!0})]:[]})})),("custom_text"===(null==O?void 0:O.value)||"custom_link"===(null==O?void 0:O.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==O?void 0:O.value)?"Custom text value":"custom_link"===(null==O?void 0:O.value)?"Custom URL value":"",id:`variable-value-${null==O?void 0:O.value}-${h}`,value:y,errorMessage:q?y?"custom_link"!==O.value||m.validateIsUrl(y)?"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==O?void 0:O.value)?void 0:30,prefixText:"custom_link"===(null==O?void 0:O.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===O.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;C(l);const a="custom_link"===(null==O?void 0:O.value)?`https://${l}`:l;D(a,e),M===s.CHANNEL_TYPE.WHATSAPP&&(null==z||z(null!==(t=_.index)&&void 0!==t?t:0,a))}(O.value,e)}),k&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:k,setShowVariable:V,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?$({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?$({label:e.displayName,selected:!0,value:"custom_text"}):$({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
@@ -4,9 +4,6 @@ export interface VariableConnectorsProps {
4
4
  onFocus?: (variableIndex: number) => void;
5
5
  showVariableModal?: boolean;
6
6
  variableList?: VariableListInterfaceV2[];
7
- discountCode?: string;
8
- setDiscountCode?: (code: string) => void;
9
7
  }
10
- declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
8
+ declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
11
9
  export default VariableConnectors;
12
- export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -1,28 +1,6 @@
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"),l=require("../../add-variableV2/AddVariableV2SideModal.js"),s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var r=require("../../input/Input.js"),o=require("../../tooltips/Tooltip.js"),n=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"),p=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const g=b.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/info.svg.js"),i=require("styled-components"),s=require("../../input/Input.js"),a=require("../../template-preview/models/Channels.js"),l=require("../../tooltips/Tooltip.js"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),o=require("../context/templateModalContext.js"),d=require("./VariableConnector.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=c(i).default.div`
2
2
  overflow-y: auto;
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  height: 100%;
6
- `,j=b.default.button`
7
- padding: 2px 8px;
8
- cursor: pointer;
9
- color: white;
10
- background-color: black;
11
- width: fit-content;
12
- float: right;
13
- margin-top: 0px;
14
- font-family: Inter;
15
- font-style: normal;
16
- font-weight: 600;
17
- font-size: 14px;
18
- line-height: 20px;
19
- align-self: flex-end;
20
- border-radius: 4px;
21
- border: 1px solid #ccc;
22
- margin-right: 1px;
23
-
24
- .add {
25
- display: flex;
26
- align-items: center;
27
- }
28
- `;exports.AddVariableStyled=j,exports.Container=g,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[w,S]=t.useState(!1),[k,q]=t.useState(!1),[T,L]=t.useState(!1),[B,E]=t.useState(""),A=t.useRef(),M=t.useRef();return t.useEffect((()=>{y&&y(v+B)}),[B]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&C(!0)})),console.log("showDiscountCheckBox: ",O)}),[m]),t.useEffect((()=>{console.log("showDiscountCheckBox22: ",O)}),[O]),e.jsxs(g,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(o.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",{children:e.jsx(a.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:n.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(p.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(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:n.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(r.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:!1,onValueChange:()=>{S(!w)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),w&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(r.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)?(A.current&&A.current.focus(),q(!0)):(q(!1),L(!1))}}),k&&e.jsx(j,Object.assign({ref:M,id:"addVar",onClick:e=>{e.stopPropagation(),L(!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"}))]}))}))]})),T&&e.jsx(l.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:T,setShowVariable:L,variableValue:B,setVariableValue:E,placeholder:"Add a variable",customTrigger:e=>{E(e.actualValue),q(!1)}})]})};
6
+ `;exports.Container=u,exports.default=i=>{let{onFocus:c,showVariableModal:p,variableList:h}=i;const{originalVariableList:j,channel:x}=o.useTemplateModalContext();return e.jsxs(u,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8}},{children:[e.jsx(r.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(l.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",{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.placeholder})})}))]})),e.jsx(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==j?void 0:j.map(((t,i)=>x!==a.CHANNEL_TYPE.EMAIL||t.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(d.default,{index:i,variable:t,onFocus:()=>null==c?void 0:c(i),showVariableModal:p,variableList:h})}),i):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:["Locked variable ",i+1]})),e.jsx(s.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),i)))]})};
@@ -1 +1 @@
1
- import{jsx as a}from"react/jsx-runtime";import e from"react-dom";import{AddVariableV2 as r}from"./AddVariableV2.js";import{SideModalStyle as o,SideModalContainer as t}from"../side-modal/SideModal.style.js";const i=i=>e.createPortal(a(o,Object.assign({zIndex:i.zIndex},{children:a(t,{children:a(r,{data:i.data,showVariable:i.showVariable,setShowVariable:i.setShowVariable,variableValue:i.variableValue,setVariableValue:i.setVariableValue,placeholder:"Add a variable",customTrigger:i.customTrigger,isModalState:!0})})})),document.body);export{i as AddVariableV2SideModal};
1
+ import{jsx as e}from"react/jsx-runtime";import a from"react-dom";import{AddVariableV2 as r}from"./AddVariableV2.js";import{SideModalStyle as o,SideModalContainer as t}from"../side-modal/SideModal.style.js";const d=d=>a.createPortal(e(o,Object.assign({zIndex:d.zIndex},{children:e(t,{children:e(r,{data:d.data,showVariable:d.showVariable,setShowVariable:d.setShowVariable,placeholder:"Add a variable",customTrigger:d.customTrigger,isModalState:!0})})})),document.body);export{d as AddVariableV2SideModal};
@@ -21,7 +21,5 @@ export interface TemplateContextMapperProps {
21
21
  showVariableModal?: boolean;
22
22
  variableList?: VariableListInterfaceV2[];
23
23
  onBackPress?: () => void;
24
- discountCode?: string;
25
- setDiscountCode?: (code: string) => void;
26
24
  }
27
- export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
25
+ export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, onBackPress, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
@@ -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 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};
1
+ import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import r from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:g,closeDialog:u,showVariableMapping:b,channel:v,htmlContent:f,templateVariables:M,onTemplateSelect:S,globalPlaceholders:j,showOnlyContent:w,whatsappSpecificPickerMeta:P,zIndex:T,showVariableModal:C,variableList:L,onBackPress:y}=h;var E,V;o((()=>{A(f)}),[f]);const[k,x]=a(v===s.EMAIL?"desktop":"mobile"),[I,A]=a(f),[O,D]=a(!1),[z,B]=a(g),[F,H]=a(null!=M?M:[]),[$,N]=a(!1);const U=i((()=>d(j)),[j]);return e(c.Provider,Object.assign({value:{template:z,setTemplate:B,device:k,setDevice:x,display_content:I,setDisplayContent:A,originalVariableList:F,setOriginalVariableList:H,isError:O,setIsError:D,channel:v,globalNormalizedPlaceholders:U,templateSelectionTriggered:$,setTemplateSelectionTriggered:N}},{children:w?e(p,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:T,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==z?void 0:z.label,headingSubtitle:v===s.WHATSAPP?`${r.capitaliseFirstLetterOfString(null!==(E=null==z?void 0:z.category)&&void 0!==E?E:"")} • ${null!==(V=null==z?void 0:z.templateCategory)&&void 0!==V?V:""}`:"",onBackPress:()=>{null==y||y()}},{children:[e(p,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:P,showVariableModal:C,variableList:L}),S?e(m,{onSelect:function(){const e=null==S?void 0:S(z,F,null!=I?I:"");e?D(!!e):N(!0)}}):e(t,{})]}))}))};export{h as TemplateContextMapper};
@@ -6,8 +6,6 @@ export interface BodyProps {
6
6
  whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
7
7
  showVariableModal?: boolean;
8
8
  variableList?: VariableListInterfaceV2[];
9
- discountCode?: string;
10
- setDiscountCode?: (code: string) => void;
11
9
  }
12
10
  declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
13
11
  export default Body;
@@ -1,7 +1,7 @@
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 d}from"../utils/highlightFor.js";import p from"./DesktopPreview.js";import m from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const u=l.div`
1
+ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as l}from"react";import n 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 p}from"../utils/getVariableNameEmail.js";import{highlightFor as s}from"../utils/highlightFor.js";import m from"./DesktopPreview.js";import d from"./EditWhatsAppTemplateV2.js";import c from"./MobilePreview.js";import h from"./VariableConnectorsPanel.js";const f=n.div`
2
2
  display: flex;
3
3
  // height: 100%;
4
- `,f=l.div`
4
+ `,u=n.div`
5
5
  padding: 16px 14px;
6
6
  border-left-width: 1px;
7
7
  border-left-color: ${a.stroke.primary};
@@ -10,9 +10,9 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
10
10
  height: ${e=>e.channel===i.WHATSAPP?"500px":"475px"};
11
11
  overflow-y: 'auto';
12
12
  padding-bottom: 24px;
13
- `,v=l.div`
13
+ `,v=n.div`
14
14
  padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
15
15
  flex: 1;
16
16
  height: 475px;
17
17
  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(p,{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),p=k===i.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),m=_(p),c=null==p?void 0:p.offsetLeft;"desktop"===E?m&&C.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,m),d(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),d(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};
18
+ `,g=n=>{const{showVariableMapping:g,showOnlyContent:w,whatsappSpecificPickerMeta:b,showVariableModal:x,variableList:y}=n,j=l(),M=l(),{device:P,display_content:E,channel:T,template:k,setTemplate:A}=r();const V=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(f,{children:[t(v,Object.assign({showOnlyContent:w,showVariableMapping:g},{children:"mobile"===P?t(c,{ref:M,display_content:null!=E?E:"",channel:T,template:k}):T!==i.MESSAGE?t(m,{ref:j,channel:T,display_content:null!=E?E:""}):t(o,{})})),g&&t(u,Object.assign({channel:T},{children:T!==i.WHATSAPP?t(h,{onFocus:T===i.EMAIL?function(e){var t,o,l;const n=null===document||void 0===document?void 0:document.getElementById("mobile"===P?"template_html_mobile":"template_html_desktop"),r=p(e+1),m=T===i.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),d=V(m),c=null==m?void 0:m.offsetLeft;"desktop"===P?d&&j.current&&(null===(o=null==n?void 0:n.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,d),s(r,a.background.warning.light,2,T,P)):d&&M.current&&(null===(l=null==n?void 0:n.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,d),s(r,a.background.warning.light,2,T,P))}:void 0,showVariableModal:x,variableList:y}):t(d,{whatsappSpecificPickerMeta:b,template:k,onTemplateChange:e=>{null==A||A(e)},showVariableModal:x,variableList:y})}))]})};export{g as default};
@@ -9,8 +9,6 @@ export interface TemplateSelectModalContentProps {
9
9
  whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
10
10
  showVariableModal?: boolean;
11
11
  variableList?: VariableListInterfaceV2[];
12
- discountCode?: string;
13
- setDiscountCode?: (code: string) => void;
14
12
  }
15
- declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, discountCode, setDiscountCode, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
13
+ declare const TemplateSelectModalContent: ({ channel, showVariableMapping, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, variableList, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
16
14
  export default TemplateSelectModalContent;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import a from"./Header.js";const s=s=>{let{channel:n,showVariableMapping:r,showOnlyContent:l,whatsappSpecificPickerMeta:d,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:t("div",{children:[n===o.EMAIL&&e(a,{showOnlyContent:l}),e(i,{whatsappSpecificPickerMeta:d,showVariableMapping:!!r,showOnlyContent:l,showVariableModal:p,variableList:c,discountCode:h,setDiscountCode:m})]})}))};export{s as default};
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as t}from"../../template-preview/models/Channels.js";import i from"./Body.js";import o from"./Header.js";const r=r=>{let{channel:n,showVariableMapping:s,showOnlyContent:l,whatsappSpecificPickerMeta:p,showVariableModal:h,variableList:c}=r;return e("div",Object.assign({style:{paddingBottom:0}},{children:a("div",{children:[n===t.EMAIL&&e(o,{showOnlyContent:l}),e(i,{whatsappSpecificPickerMeta:p,showVariableMapping:!!s,showOnlyContent:l,showVariableModal:h,variableList:c})]})}))};export{r as default};
@@ -12,7 +12,6 @@ export interface VariableConnectorProps {
12
12
  index: number;
13
13
  showVariableModal?: boolean;
14
14
  variableList?: VariableListInterfaceV2[];
15
- setShowDiscountCheckBox?: any;
16
15
  }
17
- declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
16
+ declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
18
17
  export default VariableConnector;
@@ -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(""),[C,L]=a([]),[w,M]=a(),[W,I]=a(!1),{device:H,channel:B,isError:N,originalVariableList:$,template:U,templateSelectionTriggered:R,setTemplate:D,setDisplayContent:z,setOriginalVariableList:G,globalNormalizedPlaceholders:q}=p();function F(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==G||G(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==G||G((e=>Object.assign(Object.assign({},e),{body:l,buttons:$.buttons})))}}function Z(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==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))}()}),[R]),o((()=>{var e;const l=[];let t=[];if(B===d.MESSAGE){const e=null!=q?q:[];L([{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!=q?q:[];L([...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:()=>{},rightIcon:{icon:()=>l(t,{onClick:()=>{I(!W)},width:24,height:24,color:v.content.primary})}}):l(u,{options:C,isSearchable:!1,onSelect:F,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)?"":"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?F({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?F({label:e.displayName,selected:!0,value:"custom_text"}):F({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,j as default};
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}=n;var A;const[O,T]=a(!1),[P,S]=a(""),[E,L]=a([]),[C,w]=a(),[M,W]=a(!1),{device:I,channel:H,isError:B,originalVariableList:N,template:$,templateSelectionTriggered:U,setTemplate:R,setDisplayContent:z,setOriginalVariableList:D,globalNormalizedPlaceholders:G}=p();function q(e,l){var t,a,o;const n=e;S(""),w(n),H===d.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(F(null!==(t=n.value)&&void 0!==t?t:"","string"),null==Y||Y(null!==(a=_.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==Y||Y(null!==(o=_.index)&&void 0!==o?o:0,_.variableName),F("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?F(n.value,"url"===n.bikPlaceholderType?"link":"string"):(S(""),F("",n.value))}function F(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(H!==d.WHATSAPP){const a=b(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),i=H===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=N.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==D||D(u)}if(H===d.WHATSAPP){const l=null===(a=N.body)||void 0===a?void 0:a.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==D||D((e=>Object.assign(Object.assign({},e),{body:l,buttons:N.buttons})))}}function Y(e,l){var t;const a=Object.assign({},$),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==R||R(a)}return o((()=>{O&&(null==j||j())}),[O]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===I?"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);H===d.EMAIL&&(null==z||z(u))}()}),[U]),o((()=>{var e;const l=[];let t=[];if(H===d.MESSAGE){const e=null!=G?G:[];L([{label:"",options:[f,x]},...e]),t=[{label:"",options:[f,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,f]}),w(x)):(l.push({label:"",options:[x,f]}),w(f));const e=null!=G?G:[];L([...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((H===d.WHATSAPP||H===d.EMAIL||H===d.MESSAGE)&&_.updatedValue)if(r.test(_.updatedValue)&&H===d.WHATSAPP||_.updatedValue.startsWith("{{")&&H!==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,H);e.value&&w(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(w(x),S(_.updatedValue.split("https://")[1])):(w(f),S(_.updatedValue))}),[]),e(h,Object.assign({channel:H,focused:O,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:B&&!C?v.content.negative:v.content.primary}},{children:[null===(A=_.variableName)||void 0===A?void 0:A.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?l(s,{state:"none",value:C?C.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>l(t,{onClick:()=>{W(!M)},width:24,height:24,color:v.content.primary})}}):l(u,{options:E,isSearchable:!1,onSelect:q,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:B?P?"custom_link"!==C.value||g(P)?"":"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"===_.type||"custom_link"===C.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;S(l);const a="custom_link"===(null==C?void 0:C.value)?`https://${l}`:l;F(a,e),H===d.WHATSAPP&&(null==Y||Y(null!==(t=_.index)&&void 0!==t?t:0,a))}(C.value,e)}),M&&l(i,{zIndex:2e3,data:null!=V?V:[],showVariable:M,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?q({label:e.displayName,selected:!0,value:"custom_text"}):q({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,j as default};
@@ -4,9 +4,6 @@ export interface VariableConnectorsProps {
4
4
  onFocus?: (variableIndex: number) => void;
5
5
  showVariableModal?: boolean;
6
6
  variableList?: VariableListInterfaceV2[];
7
- discountCode?: string;
8
- setDiscountCode?: (code: string) => void;
9
7
  }
10
- declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
8
+ declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
11
9
  export default VariableConnectors;
12
- export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -1,28 +1,6 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import a from"../../../assets/icons/info.svg.js";import{useState as i,useRef as t,useEffect as l}from"react";import r 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 c}from"../../input/Input.js";import{Tooltip as d}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as u,TitleSmall as m}from"../../TypographyStyle.js";import{CheckBox as b}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as g}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=r.div`
1
+ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import o from"styled-components";import{Input as a}from"../../input/Input.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{Tooltip as r}from"../../tooltips/Tooltip.js";import{TitleRegular as n,BodySecondary as s}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import m from"./VariableConnector.js";const p=o.div`
2
2
  overflow-y: auto;
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  height: 100%;
6
- `,j=r=>{let{onFocus:j,showVariableModal:V,variableList:w,discountCode:k,setDiscountCode:C}=r;const{originalVariableList:O,channel:T}=f(),[B,L]=i(!1),[A,D]=i(!1),[E,I]=i(!1),[M,S]=i(!1),[F,N]=i(""),z=t(),U=t();return l((()=>{C&&C(k+F)}),[F]),l((()=>{console.log("originalVariableList: ",O),O.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&L(!0)})),console.log("showDiscountCheckBox: ",B)}),[O]),l((()=>{console.log("showDiscountCheckBox22: ",B)}),[B]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[o(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),o(d,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:o("div",{children:o(a,{width:20,height:20,color:p.content.placeholder})})}))]})),o(u,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==O?void 0:O.map(((a,i)=>T!==g.EMAIL||a.isEditableVariable?o("div",Object.assign({style:{marginTop:16}},{children:o(v,{index:i,variable:a,onFocus:()=>null==j?void 0:j(i),showVariableModal:V,variableList:w,setShowDiscountCheckBox:L})}),i):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(u,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",i+1]})),o(c,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),i))),B&&k&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[o(b,{isChecked:!1,onValueChange:()=>{D(!A)}}),o(m,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),A&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[o(c,{placeholder:"Enter your discount code",onChangeText:e=>{C&&C(e)},value:k,onFocus:()=>{I(!0)},onBlur:e=>{var o;"addVar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?(z.current&&z.current.focus(),I(!0)):(I(!1),S(!1))}}),E&&o(y,Object.assign({ref:U,id:"addVar",onClick:e=>{e.stopPropagation(),S(!0)}},{children:e("div",Object.assign({className:"add"},{children:[o(s,{width:20,height:20,color:"white"}),o("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),M&&o(n,{zIndex:2e3,data:null!=w?w:[],showVariable:M,setShowVariable:S,variableValue:F,setVariableValue:N,placeholder:"Add a variable",customTrigger:e=>{N(e.actualValue),I(!1)}})]})},y=r.button`
7
- padding: 2px 8px;
8
- cursor: pointer;
9
- color: white;
10
- background-color: black;
11
- width: fit-content;
12
- float: right;
13
- margin-top: 0px;
14
- font-family: Inter;
15
- font-style: normal;
16
- font-weight: 600;
17
- font-size: 14px;
18
- line-height: 20px;
19
- align-self: flex-end;
20
- border-radius: 4px;
21
- border: 1px solid #ccc;
22
- margin-right: 1px;
23
-
24
- .add {
25
- display: flex;
26
- align-items: center;
27
- }
28
- `;export{y as AddVariableStyled,x as Container,j as default};
6
+ `,h=o=>{let{onFocus:h,showVariableModal:b,variableList:v}=o;const{originalVariableList:y,channel:g}=d();return e(p,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[i(n,Object.assign({style:{color:c.content.primary}},{children:"Edit variables and links"})),i(r,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",{children:i(t,{width:20,height:20,color:c.content.placeholder})})}))]})),i(s,Object.assign({style:{color:c.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((t,o)=>g!==l.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(m,{index:o,variable:t,onFocus:()=>null==h?void 0:h(o),showVariableModal:b,variableList:v})}),o):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(s,Object.assign({style:{color:c.content.primary}},{children:["Locked variable ",o+1]})),i(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),o)))]})};export{p as Container,h as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.297-beta.8",
3
+ "version": "0.0.297",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",