@bikdotai/bik-component-library 0.0.570-beta-25 → 0.0.570-beta-27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.d.ts +4 -4
- package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWebpushTemplate.d.ts +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWebpushTemplate.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.d.ts +4 -4
- package/dist/esm/components/template-context-mapper/helpers/WebpushTemplateHelper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.d.ts +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/package.json +1 -1
|
@@ -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]),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);
|
|
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,{})]}))}))};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
-
import { BUTTON_TYPE, CUSTOM_VARIABLE } from "../../template-preview";
|
|
2
|
+
import { AllTemplateVariables, 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[], disableEditVariable?: boolean) => Promise<{
|
|
5
|
+
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[], originalVar?: AllTemplateVariables, disableEditVariable?: boolean) => Promise<{
|
|
6
6
|
templateVariableMapping: {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
title: any;
|
|
8
|
+
body: any;
|
|
9
9
|
buttons: {
|
|
10
10
|
type: BUTTON_TYPE;
|
|
11
11
|
text: string;
|
|
@@ -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"),
|
|
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"),l=require("../../../utils/variableUtils.js");exports.default=()=>{function a(e,t,i,a){const r=t.map(((t,r)=>{const s=n(t);if(a)return{variableName:t,isEditableVariable:!1,updatedValue:t,index:r,variableValue:t,type:"string"};const u=function(e,t,i){const a=i&&i.length?i:l.extractVariables(e);if(!a||!a.length)return[];const n=[];return a.forEach(((e,i)=>{const l=o(t,`{{${e}}}`);if(l){const{actualValue:e,defaultValue:t,variableText:a}=l;n.push({editable:"editableVariable"===a,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)?l.extractVariables(e).map((e=>`{{${e}}}`))||[]:e)):[];const o=(e,t)=>{for(const i of e)for(const e in i.variables){const l=i.variables[e];if(l.actualValue===t)return l}return null};return{processWebpushTemplate:function(o,s,u,b){var d,p,c,v,m,f,h,g;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:V,body:w,buttons:L,icon:y,image:_},webpushBroadcastConfig:x}=e;let C={title:r(null!==(d=null==x?void 0:x.title)&&void 0!==d?d:[]),body:r(null!==(p=null==x?void 0:x.body)&&void 0!==p?p:[]),buttonsW:null!==(c=null==x?void 0:x.buttons)&&void 0!==c?c:[]};if(!e.webpushBroadcastConfig){const t=null!==(v=null==w?void 0:w.text)&&void 0!==v?v:"string"==typeof w?w:"",i=L&&(null==L?void 0:L.length)?L.map((e=>null==e?void 0:e.websiteLink)).filter((e=>void 0!==e)):[];C={title:l.extractVariables(V).map((e=>`{{${e}}}`)),body:l.extractVariables(t).map((e=>`{{${e}}}`)),buttonsW:[]};const a={title:null!==(m=C.title)&&void 0!==m?m:[],body:null!==(f=C.body)&&void 0!==f?f:[],buttons:i,icon:y?[y]:void 0,image:_?[_]:void 0};e.webpushBroadcastConfig=a}const W=L&&L.length?L.map(((e,l)=>({type:t.BUTTON_TYPE.URL,text:null==e?void 0:e.text,url:"https://d.bik.ai/{{1}}",example:C.buttonsW&&C.buttonsW.length?n(C.buttonsW[l])?[""]:[C.buttonsW[l]]:e.redirectionLink?[e.redirectionLink]:void 0,buttonVariable:C.buttonsW&&C.buttonsW.length?n(C.buttonsW[l])?C.buttonsW[l]: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:l}))):[],j={title:a(s,C.title,V,b),body:a(s,C.body,(null==w?void 0:w.text)||"",b),buttons:W};return{templateVariableMapping:{title:(null===(h=null==u?void 0:u.title)||void 0===h?void 0:h.length)?u.title:j.title,body:(null===(g=null==u?void 0:u.body)||void 0===g?void 0:g.length)?u.body:j.body,buttons:j.buttons,icon:[],header:[]},webpushBroadcastConfig:e.webpushBroadcastConfig,template:e}}))}}};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
|
|
2
2
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
|
-
export interface
|
|
3
|
+
export interface EditWebpushTemplateV2Props {
|
|
4
4
|
whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
|
|
5
5
|
template: WebpushTemplateType;
|
|
6
6
|
onTemplateChange?: (template: WebpushTemplateType) => void;
|
|
7
7
|
showVariableModal?: boolean;
|
|
8
8
|
}
|
|
9
|
-
declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal
|
|
9
|
+
declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export default EditWebpushTemplate;
|
|
@@ -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"),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:
|
|
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:O,originalVariableList:q,setOriginalVariableList:w}=l.useTemplateModalContext(),{processWebpushTemplate:L}=n.default(),[A,R]=a.useState(null),[S,W]=a.useState(null);a.useEffect((()=>{I&&L(g,I,q,O).then((e=>{let{templateVariableMapping:t,template:a,webpushBroadcastConfig:i}=e;x(t),null==w||w(t),null==M||M(Object.assign({},a)),y(i)}))}),[I,O]);const{descriptionComponents:D,bodyVariables:B,titleVariables:H}=a.useMemo((()=>{if(v&&V){const e=o.getAllDataFromWebpushTemplateComponent(V,v);return A||R(e.iconImage),S||W(e.bannerImage),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[v,V]),{uploadMediaLink:F,uploadMediaFiles:k,validateMimeType:P}=f,_=a.useRef(null),U=p.useEditWhatsappTemplateMedia({uploadMediaLink:F,uploadMediaFiles:k,updateTemplateImageUrl:e=>Y(e,"icon"),validateMimeType:P,mediaComponent:A,fileRef:_}),G=p.useEditWhatsappTemplateMedia({uploadMediaLink:F,uploadMediaFiles:k,updateTemplateImageUrl:e=>Y(e,"image"),validateMimeType:P,mediaComponent:S,fileRef:_});function Y(e,a){const i=Object.assign({},g),l=t.cloneDeep(i);"icon"===a?(l.webpushBroadcastConfig.icon=[e],R([e])):"image"===a&&(l.webpushBroadcastConfig.image=[e],W([e])),null==M||M(Object.assign({},l))}function N(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 $=U.openEditMedia?U:G.openEditMedia?G:null;return $?e.jsx(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(s.default,{mediaComponentFormat:i.HEADER_TYPES.IMAGE,uploadMedia:$.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:$,setOpenEditMedia:$.setOpenEditMedia,openEditMedia:$.openEditMedia,editIconRef:$.editIconRef,fileRef:_,skipAddVariable:!0})})):e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[A&&A.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:A,handleImageChange:U.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:U.error,isLoading:U.loading,setOpenEditMedia:U.setOpenEditMedia})}):null,S&&S.length?e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(d.default,{imageName:S,handleImageChange:G.handleImageChange,mediaType:i.HEADER_TYPES.IMAGE,error:G.error,isLoading:G.loading,setOpenEditMedia:G.setOpenEditMedia})}):null,(null==B?void 0:B.length)||(null==H?void 0:H.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==D?void 0:D.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:N},`${a}`)))]}))};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WebpushTemplate.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),O=require("../context/templateModalContext.js"),j=require("../custom-hooks/useAdditionalVariables.js"),y=require("../utils/getVariableNameEmail.js"),x=require("./QueryParamsComponent.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../custom-date-time/CustomDateTime.js"),o=require("../../dropdown/Dropdown.js"),u=require("../../input/Input.js"),d=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),c=require("../../template-preview/models/Channels.js"),p=require("../../template-preview/models/WebpushTemplate.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),O=require("../context/templateModalContext.js"),j=require("../custom-hooks/useAdditionalVariables.js"),y=require("../utils/getVariableNameEmail.js"),x=require("./QueryParamsComponent.js");function E(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _=E(n);const T=_.default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,h=
|
|
7
|
+
`,h=_.default.div`
|
|
8
8
|
position: absolute;
|
|
9
9
|
top: 0;
|
|
10
10
|
left: 0;
|
|
@@ -13,4 +13,4 @@
|
|
|
13
13
|
background-color: rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
15
15
|
cursor: not-allowed;
|
|
16
|
-
`,f={value:"custom_link",label:"Custom URL"},C={value:"custom_text",label:"Custom text"},N={value:"static_expiry",label:"Static Expiry"};exports.Container=T,exports.default=n=>{let{onFocus:_,variable:E,index:P,showVariableModal:L,setShowDiscountCheckBox:A,componentType:S,CTAoptions:V,buttonType:k}=n;var B,D,H,Y,U,w,q,W,R;const[I,M]=i.useState(!1),[$,z]=i.useState(""),[Z,F]=i.useState([]),[G,Q]=i.useState(),[K,J]=i.useState(!1),{variableList:X,setVariableList:ee,setVariableCallback:te,setShowVariablePicker:le,device:ae,channel:ie,isError:ne,originalVariableList:se,template:oe,templateSelectionTriggered:ue,setTemplate:de,setDisplayContent:re,setOriginalVariableList:ce,globalNormalizedPlaceholders:pe,enabledCustomText:me,pod:ve,selectedCarouselIndex:be,isProductCarouselType:ge,isWhatsappCarousel:Oe,disableEditVariable:je,disableEditExpiry:ye,templateErrorIndexes:xe,maxCharLimit:_e}=O.useTemplateModalContext();function Ee(e,t){var l,a,i,n;const s=e;z(""),Q(s),ie===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==s.value&&"custom_link"!==s.value&&"static_expiry"!==s.value?(he(null!==(l=s.value)&&void 0!==l?l:"","string"),null==fe||fe(null!==(a=E.index)&&void 0!==a?a:0,s.value,!0)):(null==fe||fe(null!==(i=E.index)&&void 0!==i?i:0,"",!0,s.value),he("","url"===s.bikPlaceholderType?"link":"string")):"custom_text"!==s.value&&"custom_link"!==s.value?(he(s.value,"url"===s.bikPlaceholderType?"link":"string"),ie==c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(n=E.index)&&void 0!==n?n:0,s.value))):(z(""),he("",s.value))}function Te(e,t){var l,a;z(t);const i="custom_link"===(null==G?void 0:G.value)&&t?t.includes("https")?t:`https://${t}`:t;he(i,"static_expiry"===e?"string":e),ie===c.CHANNEL_TYPE.WHATSAPP&&(null==fe||fe(null!==(l=E.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),ie===c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(a=E.index)&&void 0!==a?a:0,i))}function he(e,t,l){var i,n,s,o,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(ie!==c.CHANNEL_TYPE.WHATSAPP&&ie!==c.CHANNEL_TYPE.WEBPUSH){const l=y.getVariableNameForEmailByIndex(P+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===ae?"template_html_mobile":"template_html_desktop"),n=ie===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const s=se.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t));null==ce||ce(s)}if(ie===c.CHANNEL_TYPE.WEBPUSH){const l=se,a=t=>null==t?void 0:t.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)),i={BODY:"BODY"===S?a(l.body):l.body,TITLE:S===p.WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()?a(l.title):l.title};"custom_link"!=t&&"custom_text"!=t||null==Ne||Ne(null!==(n=E.index)&&void 0!==n?n:0,e),null==ce||ce((e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:l.buttons})))}if(ie===c.CHANNEL_TYPE.WHATSAPP){if(null!=be&&be>-1&&ge){const l=Object.assign({},se).cards.map(((l,a)=>{var i,n;return"BODY"===S?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>P===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"BUTTONS"===S?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===P?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ce||ce((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=be&&be>-1?se.cards[be]:se;let n=i.body,r=i.header,c=i.buttons;if("BODY"===S?n=null===(s=i.body)||void 0===s?void 0:s.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"HEADER"===S?r=null===(o=i.header)||void 0===o?void 0:o.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"BUTTONS"===S&&(c=null===(u=i.buttons)||void 0===u?void 0:u.map(((a,i)=>i===P?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=be&&be>-1){const e=a.cloneDeep(se.cards);e[be]={header:r,body:n,buttons:c},null==ce||ce((t=>Object.assign(Object.assign({},t),{cards:e})))}else console.log("not hereeee"),null==ce||ce((e=>Object.assign(Object.assign({},e),{header:r,body:n,buttons:c})))}}function fe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=be&&be>-1&&ge){const s=Object.assign({},oe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(oe);if(l){const l=null===(n=Object.assign({},oe).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===S)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===S&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=oe.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==de||de(o))}const p=null!=be&&be>-1?{components:null===(s=Object.assign({},oe).components[1].cards)||void 0===s?void 0:s[be].components,mapping:null===(o=Object.assign({},oe).mapping.cards)||void 0===o?void 0:o[be]}:Object.assign({},oe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=be&&be>-1&&oe){const e=a.cloneDeep(oe);e.components[1].cards[be].components=p.components,e.mapping.cards[be]=p.mapping,null==de||de(e)}else null==de||de(Object.assign({},p))}i.useEffect((()=>{I&&(null==_||_())}),[I]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===ae?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ie===c.CHANNEL_TYPE.EMAIL&&(null==re||re(o))}()}),[ue]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ie!==c.CHANNEL_TYPE.MESSAGE||me){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[f,C]}),Q(f)):"date_time"===(null==E?void 0:E.type)?(l.push({label:"",options:[f,C]}),Q(N)):(l.push({label:"",options:[f,C,N]}),Q(C));const e=null!=pe?pe:[];F([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=pe?pe:[];F([{label:"",options:[C,f]},...e]),a=[{label:"",options:[C,f]},...e]}if((ie===c.CHANNEL_TYPE.WHATSAPP||ie===c.CHANNEL_TYPE.EMAIL||ie===c.CHANNEL_TYPE.MESSAGE||ie===c.CHANNEL_TYPE.WEBPUSH)&&E.updatedValue)if(r.placeHolderNamePattern.test(E.updatedValue)&&ie===c.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&ie!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(L){let t=e.updatedValue;if(ve===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(E,a,ie);e.value&&Q(e)}else"date_time"===E.type?(Q(N),z(E.updatedValue),fe(null!==(e=E.index)&&void 0!==e?e:0,E.updatedValue)):(null===(t=E.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Q(f),z(E.updatedValue.split("https://")[1])):(Q(C),z(E.updatedValue))}()}),[be]),i.useEffect((()=>{ae&&G&&$&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&$?$.includes("https")?$:`https://${$}`:$,G.value)}),100)}),[ae]),i.useEffect((()=>{!K&&G&&E.updatedValue&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&E.updatedValue?E.updatedValue.includes("https")?E.updatedValue:`https://${E.updatedValue}`:E.updatedValue,G.value),J(!0)}),100)}),[G]);const Ce=e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?Ee({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Ee({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Ee({label:e.displayName,selected:!0,value:"static_expiry"}):Ee({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ne(e,t){var l;const i=a.cloneDeep(oe),n=S.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[n])&&(i.webpushBroadcastConfig[n][e]=t),null==de||de(Object.assign({},i))}return e.jsxs(T,Object.assign({channel:ie,focused:I,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:ne&&!G?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(B=E.variableName)||void 0===B?void 0:B.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:L?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==G?void 0:G.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ve===m.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==G?void 0:G.value)&&void 0!==D?D:"")?null==G?void 0:G.label:null==G?void 0:G.value:d.truncate(null!==(H=null==G?void 0:G.label)&&void 0!==H?H:"",20,!0)})),je||"date_time"===(null==E?void 0:E.type)&&ye?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(k===m.BUTTON_TYPE.URL&&ve===m.POD.CHATBOT){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ee(e)}else if("limited_time_offer"===S){const e=j.updateVariables({variableList:X,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ee(e)}else if(k===m.BUTTON_TYPE.COPY_CODE){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ee(e)}})(),te((()=>Ce)),le(!0)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:je,options:Z,isSearchable:!1,onSelect:Ee,defaultOptions:G?[Object.assign(Object.assign({},G),{selected:!0})]:[]})})),("custom_text"===(null==G?void 0:G.value)||"custom_link"===(null==G?void 0:G.value))&&e.jsx(u.Input,{state:je?"disabled":"none",labelText:"custom_text"===(null==G?void 0:G.value)?"Custom text value":"custom_link"===(null==G?void 0:G.value)?"Custom URL value":"",id:`variable-value-${null==G?void 0:G.value}-${P}`,value:$,errorMessage:ne&&(null===(Y=null==xe?void 0:xe.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==E?void 0:E.index)&&void 0!==U?U:-1))?$&&0!==$.trim().length?"custom_link"!==G.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${$.trim()}`)&&0!==$.trim().length?"custom_link"!==G.value&&$.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==G.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:_e||("custom_link"===(null==G?void 0:G.value)?2e3:"BUTTONS"===S?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==G?void 0:G.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===G.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Te(G.value,e)}}),"static_expiry"===(null==G?void 0:G.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[je&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:$?l.format(new Date($),"hh:mm a"):l.format(new Date,"hh:mm a"),date:$?new Date($):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Te("static_expiry",e.toISOString())}})]})),"link"===E.type&&"custom_link"!==(null==G?void 0:G.value)&&!ge&&!Oe&&ve===m.POD.CHATBOT&&e.jsx(x.QueryParamsComponent,{isError:null!==(W=null===(w=null==xe?void 0:xe.buttons)||void 0===w?void 0:w.includes(null!==(q=null==E?void 0:E.index)&&void 0!==q?q:-1))&&void 0!==W&&W,params:null!==(R=E.queryParams)&&void 0!==R?R:[],onChange:e=>{he(E.updatedValue,"link",e)},variableValue:E.updatedValue})]}))};
|
|
16
|
+
`,f={value:"custom_link",label:"Custom URL"},C={value:"custom_text",label:"Custom text"},N={value:"static_expiry",label:"Static Expiry"};exports.Container=T,exports.default=n=>{let{onFocus:E,variable:_,index:P,showVariableModal:L,setShowDiscountCheckBox:A,componentType:S,CTAoptions:V,buttonType:k}=n;var B,D,H,Y,U,w,q,W,R;const[I,M]=i.useState(!1),[$,z]=i.useState(""),[Z,F]=i.useState([]),[G,Q]=i.useState(),[K,J]=i.useState(!1),{variableList:X,setVariableList:ee,setVariableCallback:te,setShowVariablePicker:le,device:ae,channel:ie,isError:ne,originalVariableList:se,template:oe,templateSelectionTriggered:ue,setTemplate:de,setDisplayContent:re,setOriginalVariableList:ce,globalNormalizedPlaceholders:pe,enabledCustomText:me,pod:ve,selectedCarouselIndex:be,isProductCarouselType:ge,isWhatsappCarousel:Oe,disableEditVariable:je,disableEditExpiry:ye,templateErrorIndexes:xe,maxCharLimit:Ee}=O.useTemplateModalContext();function _e(e,t){var l,a,i,n;const s=e;z(""),Q(s),ie===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==s.value&&"custom_link"!==s.value&&"static_expiry"!==s.value?(he(null!==(l=s.value)&&void 0!==l?l:"","string"),null==fe||fe(null!==(a=_.index)&&void 0!==a?a:0,s.value,!0)):(null==fe||fe(null!==(i=_.index)&&void 0!==i?i:0,"",!0,s.value),he("","url"===s.bikPlaceholderType?"link":"string")):"custom_text"!==s.value&&"custom_link"!==s.value?(he(s.value,"url"===s.bikPlaceholderType?"link":"string"),ie==c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(n=_.index)&&void 0!==n?n:0,s.value))):(z(""),he("",s.value))}function Te(e,t){var l,a;z(t);const i="custom_link"===(null==G?void 0:G.value)&&t?t.includes("https")?t:`https://${t}`:t;he(i,"static_expiry"===e?"string":e),ie===c.CHANNEL_TYPE.WHATSAPP&&(null==fe||fe(null!==(l=_.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),ie===c.CHANNEL_TYPE.WEBPUSH&&(null==Ne||Ne(null!==(a=_.index)&&void 0!==a?a:0,i))}function he(e,t,l){var i,n,s,o;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(ie!==c.CHANNEL_TYPE.WHATSAPP&&ie!==c.CHANNEL_TYPE.WEBPUSH){const l=y.getVariableNameForEmailByIndex(P+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===ae?"template_html_mobile":"template_html_desktop"),n=ie===c.CHANNEL_TYPE.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:_.variableName);const s=se.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==ce||ce(s)}if(ie===c.CHANNEL_TYPE.WEBPUSH){const t=se,l=t=>null==t?void 0:t.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),a={BODY:"BODY"===S?l(t.body):t.body,TITLE:S===p.WEB_PUSH_COMPONENT_TYPE.TITLE.toUpperCase()?l(t.title):t.title};null==ce||ce((e=>Object.assign(Object.assign({},e),{title:a.TITLE,body:a.BODY,buttons:t.buttons})))}if(ie===c.CHANNEL_TYPE.WHATSAPP){if(null!=be&&be>-1&&ge){const l=Object.assign({},se).cards.map(((l,a)=>{var i,n;return"BODY"===S?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>P===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===S?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===P?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ce||ce((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=be&&be>-1?se.cards[be]:se;let d=i.body,r=i.header,c=i.buttons;if("BODY"===S?d=null===(n=i.body)||void 0===n?void 0:n.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===S?r=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===P?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===S&&(c=null===(o=i.buttons)||void 0===o?void 0:o.map(((a,i)=>i===P?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=be&&be>-1){const e=a.cloneDeep(se.cards);e[be]={header:r,body:d,buttons:c},null==ce||ce((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ce||ce((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function fe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=be&&be>-1&&ge){const s=Object.assign({},oe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o,u;if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),o=a.cloneDeep(oe);if(l){const l=null===(n=Object.assign({},oe).mapping.cards)||void 0===n?void 0:n.map(((l,a)=>{var n,s,o;if("BODY"===S)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===S&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(s=oe.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==de||de(o))}const p=null!=be&&be>-1?{components:null===(s=Object.assign({},oe).components[1].cards)||void 0===s?void 0:s[be].components,mapping:null===(o=Object.assign({},oe).mapping.cards)||void 0===o?void 0:o[be]}:Object.assign({},oe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=be&&be>-1&&oe){const e=a.cloneDeep(oe);e.components[1].cards[be].components=p.components,e.mapping.cards[be]=p.mapping,null==de||de(e)}else null==de||de(Object.assign({},p))}i.useEffect((()=>{I&&(null==E||E())}),[I]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===ae?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);ie===c.CHANNEL_TYPE.EMAIL&&(null==re||re(o))}()}),[ue]),i.useEffect((()=>{!function(){var e,t;const l=[];let a=[];if(ie!==c.CHANNEL_TYPE.MESSAGE||me){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,C]}),Q(f)):"date_time"===(null==_?void 0:_.type)?(l.push({label:"",options:[f,C]}),Q(N)):(l.push({label:"",options:[f,C,N]}),Q(C));const e=null!=pe?pe:[];F([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=pe?pe:[];F([{label:"",options:[C,f]},...e]),a=[{label:"",options:[C,f]},...e]}if((ie===c.CHANNEL_TYPE.WHATSAPP||ie===c.CHANNEL_TYPE.EMAIL||ie===c.CHANNEL_TYPE.MESSAGE||ie===c.CHANNEL_TYPE.WEBPUSH)&&_.updatedValue)if(r.placeHolderNamePattern.test(_.updatedValue)&&ie===c.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&ie!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(L){let t=e.updatedValue;if(ve===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(_,a,ie);e.value&&Q(e)}else"date_time"===_.type?(Q(N),z(_.updatedValue),fe(null!==(e=_.index)&&void 0!==e?e:0,_.updatedValue)):(null===(t=_.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Q(f),z(_.updatedValue.split("https://")[1])):(Q(C),z(_.updatedValue))}()}),[be]),i.useEffect((()=>{ae&&G&&$&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&$?$.includes("https")?$:`https://${$}`:$,G.value)}),100)}),[ae]),i.useEffect((()=>{!K&&G&&_.updatedValue&&setTimeout((()=>{he("custom_link"===(null==G?void 0:G.value)&&_.updatedValue?_.updatedValue.includes("https")?_.updatedValue:`https://${_.updatedValue}`:_.updatedValue,G.value),J(!0)}),100)}),[G]);const Ce=e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?_e({label:e.displayName,selected:!0,value:"static_expiry"}):_e({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ne(e,t){var l;const i=a.cloneDeep(oe),n=S.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[n])&&(i.webpushBroadcastConfig[n][e]=t),null==de||de(Object.assign({},i))}return e.jsxs(T,Object.assign({channel:ie,focused:I,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:ne&&!G?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(B=_.variableName)||void 0===B?void 0:B.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:L?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==G?void 0:G.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ve===m.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==G?void 0:G.value)&&void 0!==D?D:"")?null==G?void 0:G.label:null==G?void 0:G.value:d.truncate(null!==(H=null==G?void 0:G.label)&&void 0!==H?H:"",20,!0)})),je||"date_time"===(null==_?void 0:_.type)&&ye?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{(()=>{if(k===m.BUTTON_TYPE.URL&&ve===m.POD.CHATBOT){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ee(e)}else if("limited_time_offer"===S){const e=j.updateVariables({variableList:X,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ee(e)}else if(k===m.BUTTON_TYPE.COPY_CODE){const e=j.updateVariables({variableList:X,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ee(e)}})(),te((()=>Ce)),le(!0)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(o.Dropdown,{disabled:je,options:Z,isSearchable:!1,onSelect:_e,defaultOptions:G?[Object.assign(Object.assign({},G),{selected:!0})]:[]})})),("custom_text"===(null==G?void 0:G.value)||"custom_link"===(null==G?void 0:G.value))&&e.jsx(u.Input,{state:je?"disabled":"none",labelText:"custom_text"===(null==G?void 0:G.value)?"Custom text value":"custom_link"===(null==G?void 0:G.value)?"Custom URL value":"",id:`variable-value-${null==G?void 0:G.value}-${P}`,value:$,errorMessage:ne&&(null===(Y=null==xe?void 0:xe.buttons)||void 0===Y?void 0:Y.includes(null!==(U=null==_?void 0:_.index)&&void 0!==U?U:-1))?$&&0!==$.trim().length?"custom_link"!==G.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${$.trim()}`)&&0!==$.trim().length?"custom_link"!==G.value&&$.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==G.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ee||("custom_link"===(null==G?void 0:G.value)?2e3:"BUTTONS"===S?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==G?void 0:G.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===G.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Te(G.value,e)}}),"static_expiry"===(null==G?void 0:G.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[je&&e.jsx(h,{onClick:e=>e.preventDefault()}),e.jsx(s.CustomDateTime,{placement:"auto",time:$?l.format(new Date($),"hh:mm a"):l.format(new Date,"hh:mm a"),date:$?new Date($):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Te("static_expiry",e.toISOString())}})]})),"link"===_.type&&"custom_link"!==(null==G?void 0:G.value)&&!ge&&!Oe&&ve===m.POD.CHATBOT&&e.jsx(x.QueryParamsComponent,{isError:null!==(W=null===(w=null==xe?void 0:xe.buttons)||void 0===w?void 0:w.includes(null!==(q=null==_?void 0:_.index)&&void 0!==q?q:-1))&&void 0!==W&&W,params:null!==(R=_.queryParams)&&void 0!==R?R:[],onChange:e=>{he(_.updatedValue,"link",e)},variableValue:_.updatedValue})]}))};
|
|
@@ -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 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:
|
|
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};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
-
import { BUTTON_TYPE, CUSTOM_VARIABLE } from "../../template-preview";
|
|
2
|
+
import { AllTemplateVariables, 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[], disableEditVariable?: boolean) => Promise<{
|
|
5
|
+
processWebpushTemplate: (template: WebpushTemplateType, variableList: VariableListInterfaceV2[], originalVar?: AllTemplateVariables, disableEditVariable?: boolean) => Promise<{
|
|
6
6
|
templateVariableMapping: {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
title: any;
|
|
8
|
+
body: any;
|
|
9
9
|
buttons: {
|
|
10
10
|
type: BUTTON_TYPE;
|
|
11
11
|
text: string;
|
|
@@ -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 l}from"../../template-preview/constants/TemplateConstants.js";import{extractVariables as n}from"../../../utils/variableUtils.js";const o=()=>{function o(t,e,i,l){const o=e.map(((e,o)=>{const s=a(e);if(l)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const u=function(t,e,i){const l=i&&i.length?i:n(t);if(!l||!l.length)return[];const o=[];return l.forEach(((t,i)=>{const l=r(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e,variableText:n}=l;o.push({editable:"editableVariable"===n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),o}(s?e:i,t);if(u.length>0){const t=u[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:s?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return o}const a=t=>t.includes("{{")&&t.includes("}}"),s=t=>t&&t.length?t.flatMap((t=>a(t)?n(t).map((t=>`{{${t}}}`))||[]:t)):[];const r=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e)return l}return null};return{processWebpushTemplate:function(r,u,p,d){var b,m,v,c,f,h,g,w;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:y,body:V,buttons:W,icon:j,image:x},webpushBroadcastConfig:k}=t;let L={title:s(null!==(b=null==k?void 0:k.title)&&void 0!==b?b:[]),body:s(null!==(m=null==k?void 0:k.body)&&void 0!==m?m:[]),buttonsW:null!==(v=null==k?void 0:k.buttons)&&void 0!==v?v:[]};if(!t.webpushBroadcastConfig){const e=null!==(c=null==V?void 0:V.text)&&void 0!==c?c:"string"==typeof V?V:"",i=W&&(null==W?void 0:W.length)?W.map((t=>null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[];L={title:n(y).map((t=>`{{${t}}}`)),body:n(e).map((t=>`{{${t}}}`)),buttonsW:[]};const l={title:null!==(f=L.title)&&void 0!==f?f:[],body:null!==(h=L.body)&&void 0!==h?h:[],buttons:i,icon:j?[j]:void 0,image:x?[x]:void 0};t.webpushBroadcastConfig=l}const C=W&&W.length?W.map(((t,n)=>({type:e.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:L.buttonsW&&L.buttonsW.length?a(L.buttonsW[n])?[""]:[L.buttonsW[n]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:L.buttonsW&&L.buttonsW.length?a(L.buttonsW[n])?L.buttonsW[n]:i:t.websiteLink?t.websiteLink==l?i:t.websiteLink:i,index:n}))):[],N={title:o(u,L.title,y,d),body:o(u,L.body,(null==V?void 0:V.text)||"",d),buttons:C};return{templateVariableMapping:{title:(null===(g=null==p?void 0:p.title)||void 0===g?void 0:g.length)?p.title:N.title,body:(null===(w=null==p?void 0:p.body)||void 0===w?void 0:w.length)?p.body:N.body,buttons:N.buttons,icon:[],header:[]},webpushBroadcastConfig:t.webpushBroadcastConfig,template:t}}))}}};export{o as default};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
|
|
2
2
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
|
-
export interface
|
|
3
|
+
export interface EditWebpushTemplateV2Props {
|
|
4
4
|
whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
|
|
5
5
|
template: WebpushTemplateType;
|
|
6
6
|
onTemplateChange?: (template: WebpushTemplateType) => void;
|
|
7
7
|
showVariableModal?: boolean;
|
|
8
8
|
}
|
|
9
|
-
declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal
|
|
9
|
+
declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export default EditWebpushTemplate;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 g}from"./VariableConnectorsPanel.js";import h 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,originalVariableList:R,setOriginalVariableList:W}=r(),{processWebpushTemplate:k}=s(),[F,H]=a(null),[U,D]=a(null);o((()=>{A&&k(C,A,R,B).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;x(t),null==W||W(t),null==T||T(Object.assign({},i)),L(a)}))}),[A,B]);const{descriptionComponents:G,bodyVariables:S,titleVariables:N}=n((()=>{if(w&&O){const e=p(O,w);return F||H(e.iconImage),U||D(e.bannerImage),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[w,O]),{uploadMediaLink:P,uploadMediaFiles:$,validateMimeType:q}=E,z=l(null),J=b({uploadMediaLink:P,uploadMediaFiles:$,updateTemplateImageUrl:e=>Q(e,"icon"),validateMimeType:q,mediaComponent:F,fileRef:z}),K=b({uploadMediaLink:P,uploadMediaFiles:$,updateTemplateImageUrl:e=>Q(e,"image"),validateMimeType:q,mediaComponent:U,fileRef:z});function Q(e,t){const a=Object.assign({},C),o=i(a);"icon"===t?(o.webpushBroadcastConfig.icon=[e],H([e])):"image"===t&&(o.webpushBroadcastConfig.image=[e],D([e])),null==T||T(Object.assign({},o))}function X(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 Y=J.openEditMedia?J:K.openEditMedia?K:null;return Y?e(g,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(m,{mediaComponentFormat:d.IMAGE,uploadMedia:Y.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:Y,setOpenEditMedia:Y.setOpenEditMedia,openEditMedia:Y.openEditMedia,editIconRef:Y.editIconRef,fileRef:z,skipAddVariable:!0})})):t(g,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[F&&F.length?e(c,{children:e(u,{imageName:F,handleImageChange:J.handleImageChange,mediaType:d.IMAGE,error:J.error,isLoading:J.loading,setOpenEditMedia:J.setOpenEditMedia})}):null,U&&U.length?e(c,{children:e(u,{imageName:U,handleImageChange:K.handleImageChange,mediaType:d.IMAGE,error:K.error,isLoading:K.loading,setOpenEditMedia:K.setOpenEditMedia})}):null,(null==S?void 0:S.length)||(null==N?void 0:N.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==G?void 0:G.map(((t,i)=>e(h,{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:X},`${i}`)))]}))};export{v as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import u from"styled-components";import{CustomDateTime as d}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as c}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as b}from"../../template-preview/models/WebpushTemplate.js";import{POD as g,BUTTON_TYPE as O}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as j,BodyPrimary as y}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import u from"styled-components";import{CustomDateTime as d}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as c}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as b}from"../../template-preview/models/WebpushTemplate.js";import{POD as g,BUTTON_TYPE as O}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as j,BodyPrimary as y}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as f}from"../../../constants/Theme.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import{updateVariables as _}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as T}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as E}from"./QueryParamsComponent.js";const V=u.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===v.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===v.EMAIL?f.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
7
|
`,k=u.div`
|
|
@@ -13,4 +13,4 @@ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"..
|
|
|
13
13
|
background-color: rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
15
15
|
cursor: not-allowed;
|
|
16
|
-
`,C={value:"custom_link",label:"Custom URL"},S={value:"custom_text",label:"Custom text"},B={value:"static_expiry",label:"Static Expiry"},P=u=>{let{onFocus:P,variable:A,index:D,showVariableModal:L,setShowDiscountCheckBox:w,componentType:N,CTAoptions:U,buttonType:H}=u;var W,R,I,Y,M,$,z,Z,q;const[G,F]=o(!1),[K,Q]=o(""),[J,X]=o([]),[ee,te]=o(),[le,ae]=o(!1),{variableList:ie,setVariableList:ne,setVariableCallback:oe,setShowVariablePicker:se,device:ue,channel:de,isError:re,originalVariableList:ce,template:pe,templateSelectionTriggered:me,setTemplate:ve,setDisplayContent:be,setOriginalVariableList:ge,globalNormalizedPlaceholders:Oe,enabledCustomText:je,pod:ye,selectedCarouselIndex:he,isProductCarouselType:xe,isWhatsappCarousel:fe,disableEditVariable:_e,disableEditExpiry:Te,templateErrorIndexes:Ee,maxCharLimit:Ve}=f();function ke(e,t){var l,a,i,n;const o=e;Q(""),te(o),de===v.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(Se(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Be||Be(null!==(a=A.index)&&void 0!==a?a:0,o.value,!0)):(null==Be||Be(null!==(i=A.index)&&void 0!==i?i:0,"",!0,o.value),Se("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(Se(o.value,"url"===o.bikPlaceholderType?"link":"string"),de==v.WEBPUSH&&(null==Ae||Ae(null!==(n=A.index)&&void 0!==n?n:0,o.value))):(Q(""),Se("",o.value))}function Ce(e,t){var l,a;Q(t);const i="custom_link"===(null==ee?void 0:ee.value)&&t?t.includes("https")?t:`https://${t}`:t;Se(i,"static_expiry"===e?"string":e),de===v.WHATSAPP&&(null==Be||Be(null!==(l=A.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),de===v.WEBPUSH&&(null==Ae||Ae(null!==(a=A.index)&&void 0!==a?a:0,i))}function Se(e,t,l){var a,i,o,s,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(de!==v.WHATSAPP&&de!==v.WEBPUSH){const l=T(D+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===ue?"template_html_mobile":"template_html_desktop"),n=de===v.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=ce.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t));null==ge||ge(o)}if(de===v.WEBPUSH){const l=ce,a=t=>null==t?void 0:t.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)),n={BODY:"BODY"===N?a(l.body):l.body,TITLE:N===b.TITLE.toUpperCase()?a(l.title):l.title};"custom_link"!=t&&"custom_text"!=t||null==Ae||Ae(null!==(i=A.index)&&void 0!==i?i:0,e),null==ge||ge((e=>Object.assign(Object.assign({},e),{title:n.TITLE,body:n.BODY,buttons:l.buttons})))}if(de===v.WHATSAPP){if(null!=he&&he>-1&&xe){const l=Object.assign({},ce).cards.map(((l,a)=>{var i,n;return"BODY"===N?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>D===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"BUTTONS"===N?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===D?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ge||ge((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=he&&he>-1?ce.cards[he]:ce;let i=a.body,r=a.header,c=a.buttons;if("BODY"===N?i=null===(o=a.body)||void 0===o?void 0:o.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"HEADER"===N?r=null===(s=a.header)||void 0===s?void 0:s.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"BUTTONS"===N&&(c=null===(u=a.buttons)||void 0===u?void 0:u.map(((a,i)=>i===D?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=he&&he>-1){const e=n(ce.cards);e[he]={header:r,body:i,buttons:c},null==ge||ge((t=>Object.assign(Object.assign({},t),{cards:e})))}else console.log("not hereeee"),null==ge||ge((e=>Object.assign(Object.assign({},e),{header:r,body:i,buttons:c})))}}function Be(e,t,l,a){var i,o,s,u,d,r,c;if(null!=he&&he>-1&&xe){const o=Object.assign({},pe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===N){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===N){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=n(pe);if(l){const l=null===(i=Object.assign({},pe).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===N)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===N&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=pe.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==ve||ve(s))}const p=null!=he&&he>-1?{components:null===(o=Object.assign({},pe).components[1].cards)||void 0===o?void 0:o[he].components,mapping:null===(s=Object.assign({},pe).mapping.cards)||void 0===s?void 0:s[he]}:Object.assign({},pe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===N){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===N){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===N){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===N)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===N&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===N&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===N&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=he&&he>-1&&pe){const e=n(pe);e.components[1].cards[he].components=p.components,e.mapping.cards[he]=p.mapping,null==ve||ve(e)}else null==ve||ve(Object.assign({},p))}s((()=>{G&&(null==P||P())}),[G]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===ue?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);de===v.EMAIL&&(null==be||be(s))}()}),[me]),s((()=>{!function(){var e,t;const l=[];let a=[];if(de!==v.MESSAGE||je){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[C,S]}),te(C)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[C,S]}),te(B)):(l.push({label:"",options:[C,S,B]}),te(S));const e=null!=Oe?Oe:[];X([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=Oe?Oe:[];X([{label:"",options:[S,C]},...e]),a=[{label:"",options:[S,C]},...e]}if((de===v.WHATSAPP||de===v.EMAIL||de===v.MESSAGE||de===v.WEBPUSH)&&A.updatedValue)if(m.test(A.updatedValue)&&de===v.WHATSAPP||A.updatedValue.startsWith("{{")&&de!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(L){let t=e.updatedValue;if(ye===g.CHATBOT&&"BUTTONS"===N){const l=null==U?void 0:U.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(A,a,de);e.value&&te(e)}else"date_time"===A.type?(te(B),Q(A.updatedValue),Be(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(te(C),Q(A.updatedValue.split("https://")[1])):(te(S),Q(A.updatedValue))}()}),[he]),s((()=>{ue&&ee&&K&&setTimeout((()=>{Se("custom_link"===(null==ee?void 0:ee.value)&&K?K.includes("https")?K:`https://${K}`:K,ee.value)}),100)}),[ue]),s((()=>{!le&&ee&&A.updatedValue&&setTimeout((()=>{Se("custom_link"===(null==ee?void 0:ee.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,ee.value),ae(!0)}),100)}),[ee]);const Pe=e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"static_expiry"}):ke({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ae(e,t){var l;const a=n(pe),i=N.toLocaleLowerCase();(null===(l=a.webpushBroadcastConfig)||void 0===l?void 0:l[i])&&(a.webpushBroadcastConfig[i][e]=t),null==ve||ve(Object.assign({},a))}return e(V,Object.assign({channel:de,focused:G,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(j,Object.assign({style:{color:re&&!ee?x.content.negative:x.content.primary}},{children:[null===(W=A.variableName)||void 0===W?void 0:W.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:L?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ee?void 0:ee.label)?"space-between":"flex-end"}},{children:[t(y,Object.assign({numberOfLines:1},{children:ye===g.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(R=null==ee?void 0:ee.value)&&void 0!==R?R:"")?null==ee?void 0:ee.label:null==ee?void 0:ee.value:p(null!==(I=null==ee?void 0:ee.label)&&void 0!==I?I:"",20,!0)})),_e||"date_time"===(null==A?void 0:A.type)&&Te?t(l,{}):t(a,{onClick:()=>{(()=>{if(H===O.URL&&ye===g.CHATBOT){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ne(e)}else if("limited_time_offer"===N){const e=_({variableList:ie,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ne(e)}else if(H===O.COPY_CODE){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ne(e)}})(),oe((()=>Pe)),se(!0)},width:24,height:24,color:x.content.primary})]})):t(r,{disabled:_e,options:J,isSearchable:!1,onSelect:ke,defaultOptions:ee?[Object.assign(Object.assign({},ee),{selected:!0})]:[]})})),("custom_text"===(null==ee?void 0:ee.value)||"custom_link"===(null==ee?void 0:ee.value))&&t(c,{state:_e?"disabled":"none",labelText:"custom_text"===(null==ee?void 0:ee.value)?"Custom text value":"custom_link"===(null==ee?void 0:ee.value)?"Custom URL value":"",id:`variable-value-${null==ee?void 0:ee.value}-${D}`,value:K,errorMessage:re&&(null===(Y=null==Ee?void 0:Ee.buttons)||void 0===Y?void 0:Y.includes(null!==(M=null==A?void 0:A.index)&&void 0!==M?M:-1))?K&&0!==K.trim().length?"custom_link"!==ee.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${K.trim()}`)&&0!==K.trim().length?"custom_link"!==ee.value&&K.length>30?"Length cannot be more than 30":"BUTTONS"===N&&"custom_link"!==ee.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ve||("custom_link"===(null==ee?void 0:ee.value)?2e3:"BUTTONS"===N?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ee?void 0:ee.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===ee.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ce(ee.value,e)}}),"static_expiry"===(null==ee?void 0:ee.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[_e&&t(k,{onClick:e=>e.preventDefault()}),t(d,{placement:"auto",time:i(K?new Date(K):new Date,"hh:mm a"),date:K?new Date(K):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ce("static_expiry",e.toISOString())}})]})),"link"===A.type&&"custom_link"!==(null==ee?void 0:ee.value)&&!xe&&!fe&&ye===g.CHATBOT&&t(E,{isError:null!==(Z=null===($=null==Ee?void 0:Ee.buttons)||void 0===$?void 0:$.includes(null!==(z=null==A?void 0:A.index)&&void 0!==z?z:-1))&&void 0!==Z&&Z,params:null!==(q=A.queryParams)&&void 0!==q?q:[],onChange:e=>{Se(A.updatedValue,"link",e)},variableValue:A.updatedValue})]}))};export{V as Container,P as default};
|
|
16
|
+
`,C={value:"custom_link",label:"Custom URL"},S={value:"custom_text",label:"Custom text"},B={value:"static_expiry",label:"Static Expiry"},P=u=>{let{onFocus:P,variable:A,index:D,showVariableModal:L,setShowDiscountCheckBox:w,componentType:N,CTAoptions:U,buttonType:H}=u;var W,R,I,Y,M,$,z,Z,q;const[G,F]=o(!1),[K,Q]=o(""),[J,X]=o([]),[ee,te]=o(),[le,ae]=o(!1),{variableList:ie,setVariableList:ne,setVariableCallback:oe,setShowVariablePicker:se,device:ue,channel:de,isError:re,originalVariableList:ce,template:pe,templateSelectionTriggered:me,setTemplate:ve,setDisplayContent:be,setOriginalVariableList:ge,globalNormalizedPlaceholders:Oe,enabledCustomText:je,pod:ye,selectedCarouselIndex:he,isProductCarouselType:fe,isWhatsappCarousel:xe,disableEditVariable:_e,disableEditExpiry:Te,templateErrorIndexes:Ee,maxCharLimit:Ve}=x();function ke(e,t){var l,a,i,n;const o=e;Q(""),te(o),de===v.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(Se(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Be||Be(null!==(a=A.index)&&void 0!==a?a:0,o.value,!0)):(null==Be||Be(null!==(i=A.index)&&void 0!==i?i:0,"",!0,o.value),Se("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(Se(o.value,"url"===o.bikPlaceholderType?"link":"string"),de==v.WEBPUSH&&(null==Ae||Ae(null!==(n=A.index)&&void 0!==n?n:0,o.value))):(Q(""),Se("",o.value))}function Ce(e,t){var l,a;Q(t);const i="custom_link"===(null==ee?void 0:ee.value)&&t?t.includes("https")?t:`https://${t}`:t;Se(i,"static_expiry"===e?"string":e),de===v.WHATSAPP&&(null==Be||Be(null!==(l=A.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),de===v.WEBPUSH&&(null==Ae||Ae(null!==(a=A.index)&&void 0!==a?a:0,i))}function Se(e,t,l){var a,i,o,s;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(de!==v.WHATSAPP&&de!==v.WEBPUSH){const l=T(D+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===ue?"template_html_mobile":"template_html_desktop"),n=de===v.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=ce.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==ge||ge(o)}if(de===v.WEBPUSH){const t=ce,l=t=>null==t?void 0:t.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),a={BODY:"BODY"===N?l(t.body):t.body,TITLE:N===b.TITLE.toUpperCase()?l(t.title):t.title};null==ge||ge((e=>Object.assign(Object.assign({},e),{title:a.TITLE,body:a.BODY,buttons:t.buttons})))}if(de===v.WHATSAPP){if(null!=he&&he>-1&&fe){const l=Object.assign({},ce).cards.map(((l,a)=>{var i,n;return"BODY"===N?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>D===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===N?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===D?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ge||ge((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=he&&he>-1?ce.cards[he]:ce;let d=a.body,r=a.header,c=a.buttons;if("BODY"===N?d=null===(i=a.body)||void 0===i?void 0:i.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===N?r=null===(o=a.header)||void 0===o?void 0:o.map(((t,l)=>l===D?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===N&&(c=null===(s=a.buttons)||void 0===s?void 0:s.map(((a,i)=>i===D?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=he&&he>-1){const e=n(ce.cards);e[he]={header:r,body:d,buttons:c},null==ge||ge((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ge||ge((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Be(e,t,l,a){var i,o,s,u,d,r,c;if(null!=he&&he>-1&&fe){const o=Object.assign({},pe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===N){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===N){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=n(pe);if(l){const l=null===(i=Object.assign({},pe).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===N)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===N&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=pe.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==ve||ve(s))}const p=null!=he&&he>-1?{components:null===(o=Object.assign({},pe).components[1].cards)||void 0===o?void 0:o[he].components,mapping:null===(s=Object.assign({},pe).mapping.cards)||void 0===s?void 0:s[he]}:Object.assign({},pe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===N){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===N){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===N){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===N)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===N&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===N&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===N&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=he&&he>-1&&pe){const e=n(pe);e.components[1].cards[he].components=p.components,e.mapping.cards[he]=p.mapping,null==ve||ve(e)}else null==ve||ve(Object.assign({},p))}s((()=>{G&&(null==P||P())}),[G]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===ue?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);de===v.EMAIL&&(null==be||be(s))}()}),[me]),s((()=>{!function(){var e,t;const l=[];let a=[];if(de!==v.MESSAGE||je){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[C,S]}),te(C)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[C,S]}),te(B)):(l.push({label:"",options:[C,S,B]}),te(S));const e=null!=Oe?Oe:[];X([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=Oe?Oe:[];X([{label:"",options:[S,C]},...e]),a=[{label:"",options:[S,C]},...e]}if((de===v.WHATSAPP||de===v.EMAIL||de===v.MESSAGE||de===v.WEBPUSH)&&A.updatedValue)if(m.test(A.updatedValue)&&de===v.WHATSAPP||A.updatedValue.startsWith("{{")&&de!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(L){let t=e.updatedValue;if(ye===g.CHATBOT&&"BUTTONS"===N){const l=null==U?void 0:U.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(A,a,de);e.value&&te(e)}else"date_time"===A.type?(te(B),Q(A.updatedValue),Be(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(te(C),Q(A.updatedValue.split("https://")[1])):(te(S),Q(A.updatedValue))}()}),[he]),s((()=>{ue&&ee&&K&&setTimeout((()=>{Se("custom_link"===(null==ee?void 0:ee.value)&&K?K.includes("https")?K:`https://${K}`:K,ee.value)}),100)}),[ue]),s((()=>{!le&&ee&&A.updatedValue&&setTimeout((()=>{Se("custom_link"===(null==ee?void 0:ee.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,ee.value),ae(!0)}),100)}),[ee]);const Pe=e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ke({label:e.displayName,selected:!0,value:"static_expiry"}):ke({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ae(e,t){var l;const a=n(pe),i=N.toLocaleLowerCase();(null===(l=a.webpushBroadcastConfig)||void 0===l?void 0:l[i])&&(a.webpushBroadcastConfig[i][e]=t),null==ve||ve(Object.assign({},a))}return e(V,Object.assign({channel:de,focused:G,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(j,Object.assign({style:{color:re&&!ee?f.content.negative:f.content.primary}},{children:[null===(W=A.variableName)||void 0===W?void 0:W.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:L?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ee?void 0:ee.label)?"space-between":"flex-end"}},{children:[t(y,Object.assign({numberOfLines:1},{children:ye===g.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(R=null==ee?void 0:ee.value)&&void 0!==R?R:"")?null==ee?void 0:ee.label:null==ee?void 0:ee.value:p(null!==(I=null==ee?void 0:ee.label)&&void 0!==I?I:"",20,!0)})),_e||"date_time"===(null==A?void 0:A.type)&&Te?t(l,{}):t(a,{onClick:()=>{(()=>{if(H===O.URL&&ye===g.CHATBOT){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ne(e)}else if("limited_time_offer"===N){const e=_({variableList:ie,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ne(e)}else if(H===O.COPY_CODE){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ne(e)}})(),oe((()=>Pe)),se(!0)},width:24,height:24,color:f.content.primary})]})):t(r,{disabled:_e,options:J,isSearchable:!1,onSelect:ke,defaultOptions:ee?[Object.assign(Object.assign({},ee),{selected:!0})]:[]})})),("custom_text"===(null==ee?void 0:ee.value)||"custom_link"===(null==ee?void 0:ee.value))&&t(c,{state:_e?"disabled":"none",labelText:"custom_text"===(null==ee?void 0:ee.value)?"Custom text value":"custom_link"===(null==ee?void 0:ee.value)?"Custom URL value":"",id:`variable-value-${null==ee?void 0:ee.value}-${D}`,value:K,errorMessage:re&&(null===(Y=null==Ee?void 0:Ee.buttons)||void 0===Y?void 0:Y.includes(null!==(M=null==A?void 0:A.index)&&void 0!==M?M:-1))?K&&0!==K.trim().length?"custom_link"!==ee.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${K.trim()}`)&&0!==K.trim().length?"custom_link"!==ee.value&&K.length>30?"Length cannot be more than 30":"BUTTONS"===N&&"custom_link"!==ee.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ve||("custom_link"===(null==ee?void 0:ee.value)?2e3:"BUTTONS"===N?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ee?void 0:ee.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===ee.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ce(ee.value,e)}}),"static_expiry"===(null==ee?void 0:ee.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[_e&&t(k,{onClick:e=>e.preventDefault()}),t(d,{placement:"auto",time:i(K?new Date(K):new Date,"hh:mm a"),date:K?new Date(K):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ce("static_expiry",e.toISOString())}})]})),"link"===A.type&&"custom_link"!==(null==ee?void 0:ee.value)&&!fe&&!xe&&ye===g.CHATBOT&&t(E,{isError:null!==(Z=null===($=null==Ee?void 0:Ee.buttons)||void 0===$?void 0:$.includes(null!==(z=null==A?void 0:A.index)&&void 0!==z?z:-1))&&void 0!==Z&&Z,params:null!==(q=A.queryParams)&&void 0!==q?q:[],onChange:e=>{Se(A.updatedValue,"link",e)},variableValue:A.updatedValue})]}))};export{V as Container,P as default};
|