@bikdotai/bik-component-library 0.0.570-beta-20 → 0.0.570-beta-22
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/assets/icons/halfRectangle.svg.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWebpushTemplate.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js +2 -2
- package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +2 -2
- package/dist/esm/assets/icons/halfRectangle.svg.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.js +2 -2
- package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}var a=e=>n.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 23"},e),t||(t=n.createElement("path",{fill:"currentColor",d:"M23 1v21L1 1h22Z"})),r||(r=n.createElement("path",{stroke:"#E0E0E0",strokeWidth:
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}var a=e=>n.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 23"},e),t||(t=n.createElement("path",{fill:"currentColor",d:"M23 1v21L1 1h22Z"})),r||(r=n.createElement("path",{stroke:"#E0E0E0",strokeWidth:5,d:"M23 1H1l22 21"})));exports.default=a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{let{selectedTemplate:v,closeDialog:m,showVariableMapping:h,channel:C,htmlContent:b,templateVariables:S,onTemplateSelect:E,globalPlaceholders:P,showOnlyContent:x,whatsappSpecificPickerMeta:f,zIndex:g,showVariableModal:T,variableList:L,discountCode:I,setDiscountCode:j,onBackPress:y,enabledCustomText:V,variableListForImage:w,showSampleValues:D,disableEditVariable:k,pod:A,extras:H,pickerConf:M,selectedCarouselProducts:N,disableEditExpiry:O,cardWidth:q,onDeleteSelectedProducts:B,fileName:F,setFileName:_,hideDeviceContainerInPreview:W,maxCharLimit:Y,onDefaultVariableSelect:R,skipDefaultVariableContent:z}=p;var U,$,G,J,K,Q,X,Z;l.useEffect((()=>{ie(b)}),[b]);const ee=C===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===($=null===(U=null==v?void 0:v.components)||void 0===U?void 0:U[1])||void 0===$?void 0:$.type),te=null==v?void 0:v.isProductCarouselType,[le,oe]=l.useState(C===s.CHANNEL_TYPE.EMAIL||C==s.CHANNEL_TYPE.WEBPUSH||ee?"desktop":"mobile"),[ae,re]=l.useState(!1),[se,ie]=l.useState(b),[ne,de]=l.useState(!1),[ue,ce]=l.useState([]),[pe,ve]=l.useState({}),[me,he]=l.useState(v),[Ce,be]=l.useState([]),[Se,Ee]=l.useState(null),[Pe,xe]=l.useState(!1),[fe,ge]=l.useState(null!=S?S:[]),[Te,Le]=l.useState(!1),[Ie,je]=l.useState(ee?(null===(J=null===(G=null==me?void 0:me.mapping)||void 0===G?void 0:G.body)||void 0===J?void 0:J.length)?-1:0:-1),[ye,Ve]=l.useState([]),[we,De]=l.useState(void 0),ke=l.useRef(null),[Ae,He]=l.useState(!1),[Me,Ne]=l.useState(!1),[Oe,qe]=l.useState(!1),[Be,Fe]=l.useState({});l.useEffect((()=>{N?Ve(N):te&&Ve([])}),[N]),l.useEffect((()=>{var e;if(!Pe&&te&&(!N||0===Ve.length)){const t=null===(e=null==me?void 0:me.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),be(l),xe(!0)}}),[Pe]);const _e=l.useMemo((()=>c.convertPlaceholdersToBikDropdown(P)),[P]);return l.useEffect((()=>{De(t.cloneDeep(L))}),[L]),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),r=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateSelectModalContent.js"),c=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=p=>{let{selectedTemplate:v,closeDialog:m,showVariableMapping:h,channel:C,htmlContent:b,templateVariables:S,onTemplateSelect:E,globalPlaceholders:P,showOnlyContent:x,whatsappSpecificPickerMeta:f,zIndex:g,showVariableModal:T,variableList:L,discountCode:I,setDiscountCode:j,onBackPress:y,enabledCustomText:V,variableListForImage:w,showSampleValues:D,disableEditVariable:k,pod:A,extras:H,pickerConf:M,selectedCarouselProducts:N,disableEditExpiry:O,cardWidth:q,onDeleteSelectedProducts:B,fileName:F,setFileName:_,hideDeviceContainerInPreview:W,maxCharLimit:Y,onDefaultVariableSelect:R,skipDefaultVariableContent:z}=p;var U,$,G,J,K,Q,X,Z;l.useEffect((()=>{ie(b)}),[b]);const ee=C===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===($=null===(U=null==v?void 0:v.components)||void 0===U?void 0:U[1])||void 0===$?void 0:$.type),te=null==v?void 0:v.isProductCarouselType,[le,oe]=l.useState(C===s.CHANNEL_TYPE.EMAIL||C==s.CHANNEL_TYPE.WEBPUSH||ee?"desktop":"mobile"),[ae,re]=l.useState(!1),[se,ie]=l.useState(b),[ne,de]=l.useState(!1),[ue,ce]=l.useState([]),[pe,ve]=l.useState({}),[me,he]=l.useState(v),[Ce,be]=l.useState([]),[Se,Ee]=l.useState(null),[Pe,xe]=l.useState(!1),[fe,ge]=l.useState(null!=S?S:[]),[Te,Le]=l.useState(!1),[Ie,je]=l.useState(ee?(null===(J=null===(G=null==me?void 0:me.mapping)||void 0===G?void 0:G.body)||void 0===J?void 0:J.length)?-1:0:-1),[ye,Ve]=l.useState([]),[we,De]=l.useState(void 0),ke=l.useRef(null),[Ae,He]=l.useState(!1),[Me,Ne]=l.useState(!1),[Oe,qe]=l.useState(!1),[Be,Fe]=l.useState({});l.useEffect((()=>{N?Ve(N):te&&Ve([])}),[N]),l.useEffect((()=>{var e;if(!Pe&&te&&(!N||0===Ve.length)){const t=null===(e=null==me?void 0:me.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),be(l),xe(!0)}}),[Pe]);const _e=l.useMemo((()=>c.convertPlaceholdersToBikDropdown(P)),[P]);return l.useEffect((()=>{De(t.cloneDeep(L))}),[L]),e.jsx(n.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:Oe,setHideFooterButton:qe,hideCrossButton:Me,setHideCrossButton:Ne,variableList:we,setVariableList:De,variableCallback:Se,setVariableCallback:Ee,showVariablePicker:ae,setShowVariablePicker:re,template:me,setTemplate:he,device:le,setDevice:oe,display_content:se,setDisplayContent:ie,originalVariableList:fe,setOriginalVariableList:ge,isError:ne,setIsError:de,channel:C,globalNormalizedPlaceholders:_e,templateSelectionTriggered:Te,setTemplateSelectionTriggered:Le,enabledCustomText:V,disableEditVariable:k,pod:A,extras:H,isWhatsappCarousel:ee,selectedCarouselIndex:Ie,setSelectedCarouselIndex:je,isProductCarouselType:te,templateErrorIndexes:pe,cardCount:ee?null===(Q=null===(K=v.components)||void 0===K?void 0:K[1].cards)||void 0===Q?void 0:Q.length:void 0,errorIndexes:ue,setErrorIndexes:ce,pickerConf:M,carouselProducts:ye,setCarouselProducts:Ve,disableEditExpiry:O,cardWidth:q,cardImages:Ce,onDeleteSelectedProducts:B,hideDeviceContainerInPreview:W,sliderRef:ke,isCarouselHovered:Ae,setIsCarouselHovered:He,maxCharLimit:Y,ctaOptionsErrors:Be,setCtaOptionsErrors:Fe,onDefaultVariableSelect:R}},{children:x?e.jsx(u.default,{variableListFromProps:L,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:Me,zIndex:g,centralContainerStyles:{width:ee?900:C===s.CHANNEL_TYPE.EMAIL&&h?1e3:800},open:!0,onClose:()=>{null==m||m()},headingTitle:null==me?void 0:me.label,headingSubtitle:C===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(X=null==me?void 0:me.category)&&void 0!==X?X:"")} • ${null!==(Z=null==me?void 0:me.templateCategory)&&void 0!==Z?Z:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(u.default,{variableListFromProps:L,showSampleValues:D,showVariableMapping:h,channel:C,whatsappSpecificPickerMeta:f,showVariableModal:T,discountCode:I,setDiscountCode:j,variableListForImage:w&&(null==w?void 0:w.length)>0?w:we,fileName:F,setFileName:e=>{null==_||_(e)},skipDefaultVariableContent:z}),E?e.jsx(d.default,{isWhatsappCarousel:null!=ee&&ee,onSelect:function(){var e;if((null==ye?void 0:ye.length)<1&&te)return void de(!0);if(Object.keys(Be).length>0&&A!==i.POD.CHATBOT)return void de(!0);const t=null==E?void 0:E(me,fe,null!=se?se:"",ye);ve(null!==(e=null==t?void 0:t.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==t?void 0:t.errorIndexes)||(null==t?void 0:t.error)?((null==t?void 0:t.errorIndexes)&&ce(t.errorIndexes),(null==t?void 0:t.error)&&de(!!(null==t?void 0:t.error))):Le(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -2,7 +2,7 @@ import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
|
2
2
|
import { BUTTON_TYPE, CUSTOM_VARIABLE } from "../../template-preview";
|
|
3
3
|
import { WebPushTemplateComponent, WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
|
|
4
4
|
declare const useWebPushTemplate: () => {
|
|
5
|
-
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[]) => Promise<{
|
|
5
|
+
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[], disableEditVariable?: boolean) => Promise<{
|
|
6
6
|
templateVariableMapping: {
|
|
7
7
|
body: CUSTOM_VARIABLE[];
|
|
8
8
|
title: CUSTOM_VARIABLE[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var t=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var i=require("../../template-preview/constants/TemplateConstants.js"),a=require("../../../utils/variableUtils.js");exports.default=()=>{function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var t=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var i=require("../../template-preview/constants/TemplateConstants.js"),a=require("../../../utils/variableUtils.js");exports.default=()=>{function l(e,t,i,l){const r=t.map(((t,r)=>{const s=n(t);if(l)return{variableName:t,isEditableVariable:!1,updatedValue:t,index:r,variableValue:t,type:"string"};const u=function(e,t,i){const l=i&&i.length?i:a.extractVariables(e);if(!l||!l.length)return[];const n=[];return l.forEach(((e,i)=>{const a=o(t,`{{${e}}}`);if(a){const{actualValue:e,defaultValue:t,variableText:l}=a;n.push({editable:"editableVariable"===l,variableVal:t,editableDefaultValues:t,variableName:e,idx:i})}})),n}(s?t:i,e);if(u.length>0){const e=u[0];return{variableName:e.variableName,isEditableVariable:!0,updatedValue:s?e.variableName:t,index:r,variableValue:e.variableVal,type:"string"}}return null})).filter((e=>null!==e));return r}const n=e=>e.includes("{{")&&e.includes("}}"),r=e=>e&&e.length?e.flatMap((e=>n(e)?a.extractVariables(e).map((e=>`{{${e}}}`))||[]:e)):[];const o=(e,t)=>{for(const i of e)for(const e in i.variables){const a=i.variables[e];if(a.actualValue===t)return a}return null};return{processWebpushTemplate:function(o,s,u){var b,p,d,c,v,m;return e.__awaiter(this,void 0,void 0,(function*(){const e=Object.assign({},o);e.components=function(e){let t;if("string"==typeof e)try{t=JSON.parse(e)}catch(e){console.error("Error parsing webpush component JSON:",e),t={}}else t=e;return t}(e.components);const{components:{title:f,body:h,buttons:V,icon:g,image:w},webpushBroadcastConfig:L}=e;let _={title:r(null!==(b=null==L?void 0:L.title)&&void 0!==b?b:[]),body:r(null!==(p=null==L?void 0:L.body)&&void 0!==p?p:[]),buttonsW:null!==(d=null==L?void 0:L.buttons)&&void 0!==d?d:[]};if(!e.webpushBroadcastConfig){const t=null!==(c=null==h?void 0:h.text)&&void 0!==c?c:"string"==typeof h?h:"",i=V&&(null==V?void 0:V.length)?V.map((e=>null==e?void 0:e.websiteLink)).filter((e=>void 0!==e)):[];_={title:a.extractVariables(f).map((e=>`{{${e}}}`)),body:a.extractVariables(t).map((e=>`{{${e}}}`)),buttonsW:[]};const l={title:null!==(v=_.title)&&void 0!==v?v:[],body:null!==(m=_.body)&&void 0!==m?m:[],buttons:i,icon:g?[g]:void 0,image:w?[w]:void 0};e.webpushBroadcastConfig=l}const y=V&&V.length?V.map(((e,a)=>({type:t.BUTTON_TYPE.URL,text:null==e?void 0:e.text,url:"https://d.bik.ai/{{1}}",example:_.buttonsW&&_.buttonsW.length?n(_.buttonsW[a])?[""]:[_.buttonsW[a]]:e.redirectionLink?[e.redirectionLink]:void 0,buttonVariable:_.buttonsW&&_.buttonsW.length?n(_.buttonsW[a])?_.buttonsW[a]:i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink?e.websiteLink==i.CUSTOM_URL_PLACEHOLDER?i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink:i.CUSTOM_URL_PLACEHOLDER_VAR,index:a}))):[],x={title:l(s,_.title,f,u),body:l(s,_.body,(null==h?void 0:h.text)||"",u),buttons:y};return{templateVariableMapping:{body:x.body,title:x.title,buttons:x.buttons,icon:[],header:[]},webpushBroadcastConfig:e.webpushBroadcastConfig,template:e}}))}}};
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.CHANNEL_TYPE.WHATSAPP?`url(${h.BACKGROUND_PREVIEW_IMAGE});`:"none"};
|
|
20
20
|
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
|
|
21
21
|
align-items: flex-start;
|
|
22
|
-
`;exports.default=l=>{const{showVariableMapping:h,showOnlyContent:f,whatsappSpecificPickerMeta:x,showVariableModal:T,discountCode:N,setDiscountCode:S,variableListForImage:y,showSampleValues:k,variableListFromProps:L,fileName:V,setFileName:H,skipDefaultVariableContent:W}=l,q=i.useRef(),M=i.useRef(),{variableList:_,setVariableList:D,variableCallback:O,showVariablePicker:I,setShowVariablePicker:Y,device:B,display_content:F,channel:$,template:R,setTemplate:G,isWhatsappCarousel:U,isProductCarouselType:K,hideDeviceContainerInPreview:z,onDefaultVariableSelect:J}=c.useTemplateModalContext();const Q=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return
|
|
22
|
+
`;exports.default=l=>{const{showVariableMapping:h,showOnlyContent:f,whatsappSpecificPickerMeta:x,showVariableModal:T,discountCode:N,setDiscountCode:S,variableListForImage:y,showSampleValues:k,variableListFromProps:L,fileName:V,setFileName:H,skipDefaultVariableContent:W}=l,q=i.useRef(),M=i.useRef(),{variableList:_,setVariableList:D,variableCallback:O,showVariablePicker:I,setShowVariablePicker:Y,device:B,display_content:F,channel:$,template:R,setTemplate:G,isWhatsappCarousel:U,isProductCarouselType:K,hideDeviceContainerInPreview:z,onDefaultVariableSelect:J}=c.useTemplateModalContext();const Q=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(j,{children:[e.jsx(A,Object.assign({showOnlyContent:f,showVariableMapping:h,isWhatsappCarousel:U,hideDeviceContainerInPreview:z,channel:$,skipDefaultVariableContent:W},{children:"mobile"===B?e.jsx(b.default,{ref:M,display_content:null!=F?F:"",channel:$,template:R,showSampleValues:k}):$===p.CHANNEL_TYPE.WHATSAPP&&U?e.jsx(r.CarouselPreview,{ref:q,channel:$,template:R,showSampleValues:k,isPreview:!1,showArrows:!0}):$===p.CHANNEL_TYPE.WEBPUSH?e.jsx(o.TemplatePreview,{showSampleValues:k,channel:$,hideHeader:!0,template:R}):$!==p.CHANNEL_TYPE.MESSAGE?e.jsx(w.default,{ref:q,channel:$,display_content:null!=F?F:"",showSampleValues:k}):e.jsx(e.Fragment,{})})),(K||h)&&e.jsxs(g,Object.assign({channel:$,isWhatsappCarousel:U,showVariableMapping:!0},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:"whatsapp"===$?428:400,display:I?"block":"none"}},{children:e.jsx(u.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{D(t.cloneDeep(L)),Y(!1)},onSelect:e=>{O(e),D(t.cloneDeep(L)),Y(!1)},type:a.PickerType.EMBEDDED,data:null!=_?_:[],onDefaultVariableSelect:J,skipDefaultVariableContent:W},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===$||"webpush"==$?428:400,display:I?"none":"block"}},{children:$!==p.CHANNEL_TYPE.WHATSAPP?$==p.CHANNEL_TYPE.WEBPUSH?e.jsx(C.default,{whatsappSpecificPickerMeta:x,template:R,onTemplateChange:e=>{null==G||G(e)},showVariableModal:T}):e.jsx(E.default,{onFocus:$===p.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),r=m.getVariableNameForEmailByIndex(e+1),s=$===p.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(r):document.getElementById(r),o=Q(s),d=null==s?void 0:s.offsetLeft;"desktop"===B?o&&q.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,o),v.highlightFor(r,n.COLORS.background.warning.light,2,$,B)):o&&M.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,o),v.highlightFor(r,n.COLORS.background.warning.light,2,$,B))}:void 0,showVariableModal:T,discountCode:N,setDiscountCode:S}):$===p.CHANNEL_TYPE.WHATSAPP&&U?e.jsx(s.default,{whatsappSpecificPickerMeta:x,template:R,showVariableModal:T,variableListForImage:y,discountCode:N,setDiscountCode:S}):e.jsx(P.default,{whatsappSpecificPickerMeta:x,template:R,onTemplateChange:e=>{null==G||G(e)},showVariableModal:T,variableListForImage:y,discountCode:N,setDiscountCode:S,fileName:V,setFileName:H})}))]})),[p.CHANNEL_TYPE.WHATSAPP,p.CHANNEL_TYPE.SMS].includes($)&&!h&&!K&&e.jsx(g,{children:e.jsx(d.BodySecondary,Object.assign({color:n.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),a=require("react"),i=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),n=require("../helpers/WebpushTemplateHelper.js"),o=require("../utils/getDataFromTemplateComponent.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js"),r=require("./EditMediaV2.style.js"),p=require("./useEditWhtasappTemplateMedia.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),c=require("./VariableEditorHeader.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),a=require("react"),i=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),n=require("../helpers/WebpushTemplateHelper.js"),o=require("../utils/getDataFromTemplateComponent.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js"),r=require("./EditMediaV2.style.js"),p=require("./useEditWhtasappTemplateMedia.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),c=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=h=>{let{template:g,onTemplateChange:M,whatsappSpecificPickerMeta:f,showVariableModal:E}=h;var T,j,C;const[v,x]=a.useState(null),[V,y]=a.useState(null),{variableList:I,disableEditVariable:q}=l.useTemplateModalContext(),{processWebpushTemplate:w}=n.default(),[O,A]=a.useState(null),[L,R]=a.useState(null);a.useEffect((()=>{I&&w(g,I,q).then((e=>{let{templateVariableMapping:t,template:a,webpushBroadcastConfig:i}=e;x(t),null==M||M(Object.assign({},a)),y(i)}))}),[I,q]);const{descriptionComponents:S,bodyVariables:W,titleVariables:D}=a.useMemo((()=>{if(v&&V){const e=o.getAllDataFromWebpushTemplateComponent(V,v);return O||A(e.iconImage),L||R(e.bannerImage),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[v,V]),{uploadMediaLink:B,uploadMediaFiles:H,validateMimeType:F}=f,k=a.useRef(null),P=p.useEditWhatsappTemplateMedia({uploadMediaLink:B,uploadMediaFiles:H,updateTemplateImageUrl:e=>U(e,"icon"),validateMimeType:F,mediaComponent:O,fileRef:k}),_=p.useEditWhatsappTemplateMedia({uploadMediaLink:B,uploadMediaFiles:H,updateTemplateImageUrl:e=>U(e,"image"),validateMimeType:F,mediaComponent:L,fileRef:k});function U(e,a){const i=Object.assign({},g),l=t.cloneDeep(i);"icon"===a?(l.webpushBroadcastConfig.icon=[e],A([e])):"image"===a&&(l.webpushBroadcastConfig.image=[e],R([e])),null==M||M(Object.assign({},l))}function G(e,a,i){var l;const n=Object.assign({},g),o=t.cloneDeep(n),s="custom"===a&&"string"==typeof e,d=null===(l=null==o?void 0:o.webpushBroadcastConfig)||void 0===l?void 0:l.buttons;if(d&&d.length>0){d[i]=s?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},o.webpushBroadcastConfig),{buttons:d});o.webpushBroadcastConfig=t}null==M||M(o)}const Y=P.openEditMedia?P:_.openEditMedia?_:null;return Y?e.jsx(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(s.default,{mediaComponentFormat:i.HEADER_TYPES.IMAGE,uploadMedia:Y.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:Y,setOpenEditMedia:Y.setOpenEditMedia,openEditMedia:Y.openEditMedia,editIconRef:Y.editIconRef,fileRef:k,skipAddVariable:!0})})):e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[O&&O.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:O,handleImageChange:P.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:P.error,isLoading:P.loading,setOpenEditMedia:P.setOpenEditMedia})}):null,L&&L.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:L,handleImageChange:_.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,(null==W?void 0:W.length)||(null==D?void 0:D.length)?e.jsx(c.default,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==S?void 0:S.map(((t,a)=>e.jsx(m.default,{originalVariableList:v,type:t.type,descriptionComponent:t.component,showVariableModal:E},a))),(null===(j=null===(T=null==v?void 0:v.buttons)||void 0===T?void 0:T.filter((e=>"URL"===e.type)))||void 0===j?void 0:j.length)>0&&e.jsx(c.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(C=null==v?void 0:v.buttons)||void 0===C?void 0:C.map(((t,a)=>e.jsx(b.default,{variableListIndex:a,CTAoptions:null==f?void 0:f.CTAoptions,button:t,currentVariableList:v,updateSelectedURLTemplateBtn:G},`${a}`)))]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),s=require("./Body.js"),t=require("./Header.js");exports.default=i=>{let{channel:r,showVariableMapping:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../template-preview/models/Channels.js"),s=require("./Body.js"),t=require("./Header.js");exports.default=i=>{let{channel:r,showVariableMapping:l,variableListFromProps:o,showOnlyContent:n,whatsappSpecificPickerMeta:d,showVariableModal:p,discountCode:u,setDiscountCode:c,variableListForImage:h,showSampleValues:m,fileName:b,setFileName:w,skipDefaultVariableContent:C}=i;return e.jsx("div",Object.assign({style:{paddingBottom:0}},{children:e.jsxs("div",{children:[r===a.CHANNEL_TYPE.EMAIL&&e.jsx(t.default,{showOnlyContent:n}),e.jsx(s.default,{variableListFromProps:o,whatsappSpecificPickerMeta:d,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:p,discountCode:u,setDiscountCode:c,variableListForImage:h,showSampleValues:m,fileName:b,setFileName:w,skipDefaultVariableContent:C})]})}))};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
position: absolute;
|
|
3
3
|
width: 8px;
|
|
4
4
|
height: 8px;
|
|
5
|
-
left: -
|
|
6
|
-
top: -
|
|
5
|
+
left: -7.7px;
|
|
6
|
+
top: -8px;
|
|
7
7
|
`;exports.default=a=>{const{bodyText:j,footerText:m,headerMediaType:y,headerText:g,headerAssetLink:S,headerAssetName:f,quickReplybtn:v,ctaBtn:q,actionTypes:E,textType:b,extras:w,showHeader:C,imagePreviewStyles:A,size:N,children:F,isPreview:O}=a,M=new l.WhatsAppFormatToHTML,P=i.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:C?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,Object.assign({isPreview:O},{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===c.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:g}):y!==c.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:S,headerAssetName:f,mediaType:y,imagePreviewStyles:y===c.HEADER_TYPES.IMAGE?A:{}}):e.jsx(e.Fragment,{}),!!j&&e.jsx(e.Fragment,{children:F?e.jsx(e.Fragment,{children:F}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:P,dangerouslySetInnerHTML:{__html:M.convertToHTML(j)}}):e.jsx(n.BodySecondary,{children:j})})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(p.FooterText,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(p.TimeStamp,{children:"16:48"})]}),E===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):E===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map(((t,i)=>e.jsx(h.ChatBtn,{textTypography:C?n.Caption:n.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:N},i)))}):e.jsx(e.Fragment,{})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as t from"react";var e,r;function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},a.apply(this,arguments)}var n=n=>t.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 23"},n),e||(e=t.createElement("path",{fill:"currentColor",d:"M23 1v21L1 1h22Z"})),r||(r=t.createElement("path",{stroke:"#E0E0E0",strokeWidth:
|
|
1
|
+
import*as t from"react";var e,r;function a(){return a=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},a.apply(this,arguments)}var n=n=>t.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 23"},n),e||(e=t.createElement("path",{fill:"currentColor",d:"M23 1v21L1 1h22Z"})),r||(r=t.createElement("path",{stroke:"#E0E0E0",strokeWidth:5,d:"M23 1H1l22 21"})));export{n as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as r,useState as i,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as u}from"../modals/styledModal.js";import{CHANNEL_TYPE as c}from"../template-preview/models/Channels.js";import{POD as p}from"../template-preview/models/WhatsAppTemplate.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import v from"./modalElements/Footer.js";import h from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as b}from"./utils/convertPlaceholdersToBikDropdown.js";const C=C=>{let{selectedTemplate:f,closeDialog:g,showVariableMapping:P,channel:x,htmlContent:E,templateVariables:S,onTemplateSelect:I,globalPlaceholders:T,showOnlyContent:V,whatsappSpecificPickerMeta:y,zIndex:w,showVariableModal:k,variableList:L,discountCode:D,setDiscountCode:j,onBackPress:M,enabledCustomText:A,variableListForImage:B,showSampleValues:H,disableEditVariable:F,pod:O,extras:W,pickerConf:N,selectedCarouselProducts:z,disableEditExpiry:R,cardWidth:U,onDeleteSelectedProducts:$,fileName:_,setFileName:q,hideDeviceContainerInPreview:G,maxCharLimit:J,onDefaultVariableSelect:K,skipDefaultVariableContent:Q}=C;var X,Y,Z,ee,le,oe,te,re;r((()=>{pe(E)}),[E]);const ie=x===c.WHATSAPP&&"CAROUSEL"===(null===(Y=null===(X=null==f?void 0:f.components)||void 0===X?void 0:X[1])||void 0===Y?void 0:Y.type),ae=null==f?void 0:f.isProductCarouselType,[se,ne]=i(x===c.EMAIL||x==c.WEBPUSH||ie?"desktop":"mobile"),[de,ue]=i(!1),[ce,pe]=i(E),[me,ve]=i(!1),[he,be]=i([]),[Ce,fe]=i({}),[ge,Pe]=i(f),[xe,Ee]=i([]),[Se,Ie]=i(null),[Te,Ve]=i(!1),[ye,we]=i(null!=S?S:[]),[ke,Le]=i(!1),[De,je]=i(ie?(null===(ee=null===(Z=null==ge?void 0:ge.mapping)||void 0===Z?void 0:Z.body)||void 0===ee?void 0:ee.length)?-1:0:-1),[Me,Ae]=i([]),[Be,He]=i(void 0),Fe=a(null),[Oe,We]=i(!1),[Ne,ze]=i(!1),[Re,Ue]=i(!1),[$e,_e]=i({});r((()=>{z?Ae(z):ae&&Ae([])}),[z]),r((()=>{var e;if(!Te&&ae&&(!z||0===Ae.length)){const l=null===(e=null==ge?void 0:ge.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),Ee(o),Ve(!0)}}),[Te]);const qe=s((()=>b(T)),[T]);return r((()=>{He(t(L))}),[L]),e(m.Provider,Object.assign({value:{hideFooterButton:Re,setHideFooterButton:Ue,hideCrossButton:Ne,setHideCrossButton:ze,variableList:Be,setVariableList:He,variableCallback:Se,setVariableCallback:Ie,showVariablePicker:de,setShowVariablePicker:ue,template:ge,setTemplate:Pe,device:se,setDevice:ne,display_content:ce,setDisplayContent:pe,originalVariableList:ye,setOriginalVariableList:we,isError:me,setIsError:ve,channel:x,globalNormalizedPlaceholders:qe,templateSelectionTriggered:ke,setTemplateSelectionTriggered:Le,enabledCustomText:A,disableEditVariable:F,pod:O,extras:W,isWhatsappCarousel:ie,selectedCarouselIndex:De,setSelectedCarouselIndex:je,isProductCarouselType:ae,templateErrorIndexes:Ce,cardCount:ie?null===(oe=null===(le=f.components)||void 0===le?void 0:le[1].cards)||void 0===oe?void 0:oe.length:void 0,errorIndexes:he,setErrorIndexes:be,pickerConf:N,carouselProducts:Me,setCarouselProducts:Ae,disableEditExpiry:R,cardWidth:U,cardImages:xe,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:G,sliderRef:Fe,isCarouselHovered:Oe,setIsCarouselHovered:We,maxCharLimit:J,ctaOptionsErrors:$e,setCtaOptionsErrors:_e,onDefaultVariableSelect:K}},{children:V?e(h,{variableListFromProps:L,channel:c.EMAIL,hideHeader:!0}):l(u,Object.assign({hideCrossButton:Ne,zIndex:w,centralContainerStyles:{width:ie?900:x===c.EMAIL&&P?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==ge?void 0:ge.label,headingSubtitle:x===c.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(te=null==ge?void 0:ge.category)&&void 0!==te?te:"")} • ${null!==(re=null==ge?void 0:ge.templateCategory)&&void 0!==re?re:""}`:"",onBackPress:()=>{null==M||M()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(h,{variableListFromProps:L,showSampleValues:H,showVariableMapping:P,channel:x,whatsappSpecificPickerMeta:y,showVariableModal:k,discountCode:D,setDiscountCode:j,variableListForImage:B&&(null==B?void 0:B.length)>0?B:Be,fileName:_,setFileName:e=>{null==q||q(e)},skipDefaultVariableContent:Q}),I?e(v,{isWhatsappCarousel:null!=ie&&ie,onSelect:function(){var e;if((null==Me?void 0:Me.length)<1&&ae)return void ve(!0);if(Object.keys($e).length>0&&O!==p.CHATBOT)return void ve(!0);const l=null==I?void 0:I(ge,ye,null!=ce?ce:"",Me);fe(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&be(l.errorIndexes),(null==l?void 0:l.error)&&ve(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{C as TemplateContextMapper};
|
|
@@ -2,7 +2,7 @@ import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
|
2
2
|
import { BUTTON_TYPE, CUSTOM_VARIABLE } from "../../template-preview";
|
|
3
3
|
import { WebPushTemplateComponent, WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
|
|
4
4
|
declare const useWebPushTemplate: () => {
|
|
5
|
-
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[]) => Promise<{
|
|
5
|
+
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[], disableEditVariable?: boolean) => Promise<{
|
|
6
6
|
templateVariableMapping: {
|
|
7
7
|
body: CUSTOM_VARIABLE[];
|
|
8
8
|
title: CUSTOM_VARIABLE[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as t}from"../../../_virtual/_tslib.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{BUTTON_TYPE as e}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{CUSTOM_URL_PLACEHOLDER_VAR as i,CUSTOM_URL_PLACEHOLDER as
|
|
1
|
+
import{__awaiter as t}from"../../../_virtual/_tslib.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{BUTTON_TYPE as e}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{CUSTOM_URL_PLACEHOLDER_VAR as i,CUSTOM_URL_PLACEHOLDER as n}from"../../template-preview/constants/TemplateConstants.js";import{extractVariables as o}from"../../../utils/variableUtils.js";const l=()=>{function l(t,e,i,n){const l=e.map(((e,l)=>{const s=a(e);if(n)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:l,variableValue:e,type:"string"};const u=function(t,e,i){const n=i&&i.length?i:o(t);if(!n||!n.length)return[];const l=[];return n.forEach(((t,i)=>{const n=r(e,`{{${t}}}`);if(n){const{actualValue:t,defaultValue:e,variableText:o}=n;l.push({editable:"editableVariable"===o,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),l}(s?e:i,t);if(u.length>0){const t=u[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:s?t.variableName:e,index:l,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return l}const a=t=>t.includes("{{")&&t.includes("}}"),s=t=>t&&t.length?t.flatMap((t=>a(t)?o(t).map((t=>`{{${t}}}`))||[]:t)):[];const r=(t,e)=>{for(const i of t)for(const t in i.variables){const n=i.variables[t];if(n.actualValue===e)return n}return null};return{processWebpushTemplate:function(r,u,p){var b,d,m,c,v,f;return t(this,void 0,void 0,(function*(){const t=Object.assign({},r);t.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(t.components);const{components:{title:h,body:g,buttons:w,icon:y,image:V},webpushBroadcastConfig:W}=t;let j={title:s(null!==(b=null==W?void 0:W.title)&&void 0!==b?b:[]),body:s(null!==(d=null==W?void 0:W.body)&&void 0!==d?d:[]),buttonsW:null!==(m=null==W?void 0:W.buttons)&&void 0!==m?m:[]};if(!t.webpushBroadcastConfig){const e=null!==(c=null==g?void 0:g.text)&&void 0!==c?c:"string"==typeof g?g:"",i=w&&(null==w?void 0:w.length)?w.map((t=>null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[];j={title:o(h).map((t=>`{{${t}}}`)),body:o(e).map((t=>`{{${t}}}`)),buttonsW:[]};const n={title:null!==(v=j.title)&&void 0!==v?v:[],body:null!==(f=j.body)&&void 0!==f?f:[],buttons:i,icon:y?[y]:void 0,image:V?[V]:void 0};t.webpushBroadcastConfig=n}const x=w&&w.length?w.map(((t,o)=>({type:e.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:j.buttonsW&&j.buttonsW.length?a(j.buttonsW[o])?[""]:[j.buttonsW[o]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:j.buttonsW&&j.buttonsW.length?a(j.buttonsW[o])?j.buttonsW[o]:i:t.websiteLink?t.websiteLink==n?i:t.websiteLink:i,index:o}))):[],k={title:l(u,j.title,h,p),body:l(u,j.body,(null==g?void 0:g.text)||"",p),buttons:x};return{templateVariableMapping:{body:k.body,title:k.title,buttons:k.buttons,icon:[],header:[]},webpushBroadcastConfig:t.webpushBroadcastConfig,template:t}}))}}};export{l as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as i}from"../../variable-picker-v3/model.js";import{cloneDeep as o}from"lodash";import{useRef as l}from"react";import r from"styled-components";import{CarouselPreview as n}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{VariablePicker as h}from"../../variable-picker-v3/VariablePicker.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as w}from"../utils/constants.js";import{getVariableNameForEmailByIndex as v}from"../utils/getVariableNameEmail.js";import{highlightFor as f}from"../utils/highlightFor.js";import b from"./DesktopPreview.js";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as i}from"../../variable-picker-v3/model.js";import{cloneDeep as o}from"lodash";import{useRef as l}from"react";import r from"styled-components";import{CarouselPreview as n}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{TemplatePreview as p}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{VariablePicker as h}from"../../variable-picker-v3/VariablePicker.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as w}from"../utils/constants.js";import{getVariableNameForEmailByIndex as v}from"../utils/getVariableNameEmail.js";import{highlightFor as f}from"../utils/highlightFor.js";import b from"./DesktopPreview.js";import P from"./EditWebpushTemplate.js";import g from"./EditWhatsAppTemplateV2.js";import C from"./MobilePreview.js";import k from"./VariableConnectorsPanel.js";const S=r.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
4
|
`,j=r.div`
|
|
@@ -19,4 +19,4 @@ import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import"../../cur
|
|
|
19
19
|
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===d.WHATSAPP?`url(${w});`:"none"};
|
|
20
20
|
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===d.WHATSAPP?"flex":"initial"};
|
|
21
21
|
align-items: flex-start;
|
|
22
|
-
`,y=r=>{const{showVariableMapping:w,showOnlyContent:y,whatsappSpecificPickerMeta:V,showVariableModal:A,discountCode:W,setDiscountCode:M,variableListForImage:T,showSampleValues:D,variableListFromProps:E,fileName:I,setFileName:H,skipDefaultVariableContent:L}=r,$=l(),B=l(),{variableList:F,setVariableList:O,variableCallback:_,showVariablePicker:N,setShowVariablePicker:U,device:G,display_content:q,channel:z,template:J,setTemplate:K,isWhatsappCarousel:Q,isProductCarouselType:R,hideDeviceContainerInPreview:X,onDefaultVariableSelect:Y}=u();const Z=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return
|
|
22
|
+
`,y=r=>{const{showVariableMapping:w,showOnlyContent:y,whatsappSpecificPickerMeta:V,showVariableModal:A,discountCode:W,setDiscountCode:M,variableListForImage:T,showSampleValues:D,variableListFromProps:E,fileName:I,setFileName:H,skipDefaultVariableContent:L}=r,$=l(),B=l(),{variableList:F,setVariableList:O,variableCallback:_,showVariablePicker:N,setShowVariablePicker:U,device:G,display_content:q,channel:z,template:J,setTemplate:K,isWhatsappCarousel:Q,isProductCarouselType:R,hideDeviceContainerInPreview:X,onDefaultVariableSelect:Y}=u();const Z=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(S,{children:[t(x,Object.assign({showOnlyContent:y,showVariableMapping:w,isWhatsappCarousel:Q,hideDeviceContainerInPreview:X,channel:z,skipDefaultVariableContent:L},{children:"mobile"===G?t(C,{ref:B,display_content:null!=q?q:"",channel:z,template:J,showSampleValues:D}):z===d.WHATSAPP&&Q?t(n,{ref:$,channel:z,template:J,showSampleValues:D,isPreview:!1,showArrows:!0}):z===d.WEBPUSH?t(p,{showSampleValues:D,channel:z,hideHeader:!0,template:J}):z!==d.MESSAGE?t(b,{ref:$,channel:z,display_content:null!=q?q:"",showSampleValues:D}):t(a,{})})),(R||w)&&e(j,Object.assign({channel:z,isWhatsappCarousel:Q,showVariableMapping:!0},{children:[t("div",Object.assign({style:{height:"100%",width:"whatsapp"===z?428:400,display:N?"block":"none"}},{children:t(h,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{O(o(E)),U(!1)},onSelect:e=>{_(e),O(o(E)),U(!1)},type:i.EMBEDDED,data:null!=F?F:[],onDefaultVariableSelect:Y,skipDefaultVariableContent:L},Math.random())})),t("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===z||"webpush"==z?428:400,display:N?"none":"block"}},{children:z!==d.WHATSAPP?z==d.WEBPUSH?t(P,{whatsappSpecificPickerMeta:V,template:J,onTemplateChange:e=>{null==K||K(e)},showVariableModal:A}):t(k,{onFocus:z===d.EMAIL?function(e){var t,a,i;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),l=v(e+1),r=z===d.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(l):document.getElementById(l),n=Z(r),s=null==r?void 0:r.offsetLeft;"desktop"===G?n&&$.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=s?s:0,n),f(l,m.background.warning.light,2,z,G)):n&&B.current&&(null===(i=null==o?void 0:o.contentWindow)||void 0===i||i.scrollTo(null!=s?s:0,n),f(l,m.background.warning.light,2,z,G))}:void 0,showVariableModal:A,discountCode:W,setDiscountCode:M}):z===d.WHATSAPP&&Q?t(s,{whatsappSpecificPickerMeta:V,template:J,showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M}):t(g,{whatsappSpecificPickerMeta:V,template:J,onTemplateChange:e=>{null==K||K(e)},showVariableModal:A,variableListForImage:T,discountCode:W,setDiscountCode:M,fileName:I,setFileName:H})}))]})),[d.WHATSAPP,d.SMS].includes(z)&&!w&&!R&&t(j,{children:t(c,Object.assign({color:m.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};export{y as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cloneDeep as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cloneDeep as i}from"lodash";import{useState as a,useEffect as o,useMemo as n,useRef as l}from"react";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import s from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as p}from"../utils/getDataFromTemplateComponent.js";import m from"./EditMediaModal.js";import u from"./EditMediaV2.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as b}from"./useEditWhtasappTemplateMedia.js";import{Container as h}from"./VariableConnectorsPanel.js";import g from"./VariableConnectorWhatsApp.js";import f from"./VariableEditorHeader.js";import M from"./WhatsAppTemplateCardButtonV2.js";const v=v=>{let{template:C,onTemplateChange:T,whatsappSpecificPickerMeta:E,showVariableModal:V}=v;var j,y,I;const[w,x]=a(null),[O,L]=a(null),{variableList:A,disableEditVariable:B}=r(),{processWebpushTemplate:R}=s(),[W,k]=a(null),[F,H]=a(null);o((()=>{A&&R(C,A,B).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;x(t),null==T||T(Object.assign({},i)),L(a)}))}),[A,B]);const{descriptionComponents:U,bodyVariables:D,titleVariables:G}=n((()=>{if(w&&O){const e=p(O,w);return W||k(e.iconImage),F||H(e.bannerImage),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[w,O]),{uploadMediaLink:S,uploadMediaFiles:N,validateMimeType:P}=E,$=l(null),q=b({uploadMediaLink:S,uploadMediaFiles:N,updateTemplateImageUrl:e=>J(e,"icon"),validateMimeType:P,mediaComponent:W,fileRef:$}),z=b({uploadMediaLink:S,uploadMediaFiles:N,updateTemplateImageUrl:e=>J(e,"image"),validateMimeType:P,mediaComponent:F,fileRef:$});function J(e,t){const a=Object.assign({},C),o=i(a);"icon"===t?(o.webpushBroadcastConfig.icon=[e],k([e])):"image"===t&&(o.webpushBroadcastConfig.image=[e],H([e])),null==T||T(Object.assign({},o))}function K(e,t,a){var o;const n=Object.assign({},C),l=i(n),d="custom"===t&&"string"==typeof e,r=null===(o=null==l?void 0:l.webpushBroadcastConfig)||void 0===o?void 0:o.buttons;if(r&&r.length>0){r[a]=d?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:r});l.webpushBroadcastConfig=t}null==T||T(l)}const Q=q.openEditMedia?q:z.openEditMedia?z:null;return Q?e(h,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(m,{mediaComponentFormat:d.IMAGE,uploadMedia:Q.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:Q,setOpenEditMedia:Q.setOpenEditMedia,openEditMedia:Q.openEditMedia,editIconRef:Q.editIconRef,fileRef:$,skipAddVariable:!0})})):t(h,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[W&&W.length?e(c,{children:e(u,{imageName:W,handleImageChange:q.handleImageChange,mediaType:d.IMAGE,error:q.error,isLoading:q.loading,setOpenEditMedia:q.setOpenEditMedia})}):null,F&&F.length?e(c,{children:e(u,{imageName:F,handleImageChange:z.handleImageChange,mediaType:d.IMAGE,error:z.error,isLoading:z.loading,setOpenEditMedia:z.setOpenEditMedia})}):null,(null==D?void 0:D.length)||(null==G?void 0:G.length)?e(f,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==U?void 0:U.map(((t,i)=>e(g,{originalVariableList:w,type:t.type,descriptionComponent:t.component,showVariableModal:V},i))),(null===(y=null===(j=null==w?void 0:w.buttons)||void 0===j?void 0:j.filter((e=>"URL"===e.type)))||void 0===y?void 0:y.length)>0&&e(f,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==w?void 0:w.buttons)||void 0===I?void 0:I.map(((t,i)=>e(M,{variableListIndex:i,CTAoptions:null==E?void 0:E.CTAoptions,button:t,currentVariableList:w,updateSelectedURLTemplateBtn:K},`${i}`)))]}))};export{v as default};
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as
|
|
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 s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:a("div",{children:[r===t.EMAIL&&e(o,{showOnlyContent:p}),e(i,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C})]})}))};export{s as default};
|
|
@@ -2,6 +2,6 @@ import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import o from"..
|
|
|
2
2
|
position: absolute;
|
|
3
3
|
width: 8px;
|
|
4
4
|
height: 8px;
|
|
5
|
-
left: -
|
|
6
|
-
top: -
|
|
5
|
+
left: -7.7px;
|
|
6
|
+
top: -8px;
|
|
7
7
|
`,S=n=>{const{bodyText:S,footerText:N,headerMediaType:A,headerText:M,headerAssetLink:C,headerAssetName:L,quickReplybtn:k,ctaBtn:z,actionTypes:B,textType:E,extras:I,showHeader:P,imagePreviewStyles:R,size:W,children:H,isPreview:O}=n,_=new c,U=a((()=>({color:l.content.primary,margin:12,fontSize:P?h.caption.fontSize:h.bodySecondary.fontSize,fontWeight:h.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e(x,Object.assign({isPreview:O},{children:[t(u,{children:t(o,{color:"white",height:8,width:8})}),A===f.TEXT?t(b,{bold:!0,text:M}):A!==f.NONE?t(w,{headerAssetLink:C,headerAssetName:L,mediaType:A,imagePreviewStyles:A===f.IMAGE?R:{}}):t(r,{}),!!S&&t(r,{children:t(r,H?{children:H}:{children:"html"===E?t("div",{className:"richTextEditor",style:U,dangerouslySetInnerHTML:{__html:_.convertToHTML(S)}}):t(p,{children:S})})}),e(g,{children:[t(m,Object.assign({body:null!=N?N:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:N}))})),t(v,{children:"16:48"})]}),B===y.QUICK_REPLY?t("div",{children:null==k?void 0:k.map(((e,r)=>t(T,{text:e.text},r)))}):B===y.CTA_BTN?t("div",{children:null==z?void 0:z.map(((e,r)=>t(T,{textTypography:P?d:p,extraContent:I?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:W},r)))}):t(r,{})]}))};export{S as default};
|