@bikdotai/bik-component-library 0.0.552-beta.13 → 0.0.552-beta.14

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("lodash"),t=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("./context/templateModalContext.js"),n=require("./modalElements/Footer.js"),d=require("./modalElements/TemplateSelectModalContent.js"),u=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=c=>{let{selectedTemplate:v,closeDialog:p,showVariableMapping:m,channel:h,htmlContent:C,templateVariables:b,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:P,zIndex:g,showVariableModal:f,variableList:T,discountCode:L,setDiscountCode:I,onBackPress:y,enabledCustomText:j,variableListForImage:w,showSampleValues:M,disableEditVariable:N,pod:V,extras:k,pickerConf:A,selectedCarouselProducts:D,disableEditExpiry:H,cardWidth:q,onDeleteSelectedProducts:F,fileName:O,setFileName:_,hideDeviceContainerInPreview:B,maxCharLimit:W}=c;var R,Y,z,$,U,G,J,K;t.useEffect((()=>{ae(C)}),[C]);const Q=h===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(Y=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===Y?void 0:Y.type),X=null==v?void 0:v.isProductCarouselType,[Z,ee]=t.useState(h===s.CHANNEL_TYPE.EMAIL||Q?"desktop":"mobile"),[le,te]=t.useState(!1),[oe,ae]=t.useState(C),[re,se]=t.useState(!1),[ie,ne]=t.useState([]),[de,ue]=t.useState({}),[ce,ve]=t.useState(v),[pe,me]=t.useState([]),[he,Ce]=t.useState(null),[be,Se]=t.useState(!1),[Ee,xe]=t.useState(null!=b?b:[]),[Pe,ge]=t.useState(!1),[fe,Te]=t.useState(Q?(null===($=null===(z=null==ce?void 0:ce.mapping)||void 0===z?void 0:z.body)||void 0===$?void 0:$.length)?-1:0:-1),[Le,Ie]=t.useState([]),[ye,je]=t.useState(void 0),we=t.useRef(null),[Me,Ne]=t.useState(!1),[Ve,ke]=t.useState(!1);t.useEffect((()=>{D?Ie(D):X&&Ie([])}),[D]),t.useEffect((()=>{var e;if(!be&&X&&(!D||0===Ie.length)){const l=null===(e=null==ce?void 0:ce.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),me(t),Se(!0)}}),[be]);const Ae=t.useMemo((()=>u.convertPlaceholdersToBikDropdown(E)),[E]);return t.useEffect((()=>{je(l.cloneDeep(T))}),[T]),e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{hideCrossButton:Ve,setHideCrossButton:ke,variableList:ye,setVariableList:je,variableCallback:he,setVariableCallback:Ce,showVariablePicker:le,setShowVariablePicker:te,template:ce,setTemplate:ve,device:Z,setDevice:ee,display_content:oe,setDisplayContent:ae,originalVariableList:Ee,setOriginalVariableList:xe,isError:re,setIsError:se,channel:h,globalNormalizedPlaceholders:Ae,templateSelectionTriggered:Pe,setTemplateSelectionTriggered:ge,enabledCustomText:j,disableEditVariable:N,pod:V,extras:k,isWhatsappCarousel:Q,selectedCarouselIndex:fe,setSelectedCarouselIndex:Te,isProductCarouselType:X,templateErrorIndexes:de,cardCount:Q?null===(G=null===(U=v.components)||void 0===U?void 0:U[1].cards)||void 0===G?void 0:G.length:void 0,errorIndexes:ie,setErrorIndexes:ne,pickerConf:A,carouselProducts:Le,setCarouselProducts:Ie,disableEditExpiry:H,cardWidth:q,cardImages:pe,onDeleteSelectedProducts:F,hideDeviceContainerInPreview:B,sliderRef:we,isCarouselHovered:Me,setIsCarouselHovered:Ne,maxCharLimit:W}},{children:x?e.jsx(d.default,{variableListFromProps:T,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:Ve,zIndex:g,centralContainerStyles:{width:Q?900:h===s.CHANNEL_TYPE.EMAIL&&m?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==ce?void 0:ce.label,headingSubtitle:h===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(J=null==ce?void 0:ce.category)&&void 0!==J?J:"")} • ${null!==(K=null==ce?void 0:ce.templateCategory)&&void 0!==K?K:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(d.default,{variableListFromProps:T,showSampleValues:M,showVariableMapping:m,channel:h,whatsappSpecificPickerMeta:P,showVariableModal:f,discountCode:L,setDiscountCode:I,variableListForImage:w&&(null==w?void 0:w.length)>0?w:ye,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(n.default,{isWhatsappCarousel:null!=Q&&Q,onSelect:function(){var e;if((null==Le?void 0:Le.length)<1&&X)return void se(!0);const l=null==S?void 0:S(ce,Ee,null!=oe?oe:"",Le);ue(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)&&ne(l.errorIndexes),(null==l?void 0:l.error)&&se(!!(null==l?void 0:l.error))):ge(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"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("./context/templateModalContext.js"),n=require("./modalElements/Footer.js"),d=require("./modalElements/TemplateSelectModalContent.js"),u=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=c=>{let{selectedTemplate:v,closeDialog:p,showVariableMapping:m,channel:h,htmlContent:C,templateVariables:b,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:P,zIndex:g,showVariableModal:f,variableList:T,discountCode:L,setDiscountCode:I,onBackPress:y,enabledCustomText:j,variableListForImage:w,showSampleValues:M,disableEditVariable:k,pod:N,extras:V,pickerConf:A,selectedCarouselProducts:D,disableEditExpiry:H,cardWidth:O,onDeleteSelectedProducts:q,fileName:F,setFileName:_,hideDeviceContainerInPreview:B,maxCharLimit:W}=c;var R,Y,z,$,U,G,J,K;l.useEffect((()=>{ae(C)}),[C]);const Q=h===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(Y=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===Y?void 0:Y.type),X=null==v?void 0:v.isProductCarouselType,[Z,ee]=l.useState(h===s.CHANNEL_TYPE.EMAIL||Q?"desktop":"mobile"),[te,le]=l.useState(!1),[oe,ae]=l.useState(C),[re,se]=l.useState(!1),[ie,ne]=l.useState([]),[de,ue]=l.useState({}),[ce,ve]=l.useState(v),[pe,me]=l.useState([]),[he,Ce]=l.useState(null),[be,Se]=l.useState(!1),[Ee,xe]=l.useState(null!=b?b:[]),[Pe,ge]=l.useState(!1),[fe,Te]=l.useState(Q?(null===($=null===(z=null==ce?void 0:ce.mapping)||void 0===z?void 0:z.body)||void 0===$?void 0:$.length)?-1:0:-1),[Le,Ie]=l.useState([]),[ye,je]=l.useState(void 0),we=l.useRef(null),[Me,ke]=l.useState(!1),[Ne,Ve]=l.useState(!1),[Ae,De]=l.useState({});l.useEffect((()=>{D?Ie(D):X&&Ie([])}),[D]),l.useEffect((()=>{var e;if(!be&&X&&(!D||0===Ie.length)){const t=null===(e=null==ce?void 0:ce.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:"")}))})),me(l),Se(!0)}}),[be]);const He=l.useMemo((()=>u.convertPlaceholdersToBikDropdown(E)),[E]);return l.useEffect((()=>{je(t.cloneDeep(T))}),[T]),e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{hideCrossButton:Ne,setHideCrossButton:Ve,variableList:ye,setVariableList:je,variableCallback:he,setVariableCallback:Ce,showVariablePicker:te,setShowVariablePicker:le,template:ce,setTemplate:ve,device:Z,setDevice:ee,display_content:oe,setDisplayContent:ae,originalVariableList:Ee,setOriginalVariableList:xe,isError:re,setIsError:se,channel:h,globalNormalizedPlaceholders:He,templateSelectionTriggered:Pe,setTemplateSelectionTriggered:ge,enabledCustomText:j,disableEditVariable:k,pod:N,extras:V,isWhatsappCarousel:Q,selectedCarouselIndex:fe,setSelectedCarouselIndex:Te,isProductCarouselType:X,templateErrorIndexes:de,cardCount:Q?null===(G=null===(U=v.components)||void 0===U?void 0:U[1].cards)||void 0===G?void 0:G.length:void 0,errorIndexes:ie,setErrorIndexes:ne,pickerConf:A,carouselProducts:Le,setCarouselProducts:Ie,disableEditExpiry:H,cardWidth:O,cardImages:pe,onDeleteSelectedProducts:q,hideDeviceContainerInPreview:B,sliderRef:we,isCarouselHovered:Me,setIsCarouselHovered:ke,maxCharLimit:W,ctaOptionsErrors:Ae,setCtaOptionsErrors:De}},{children:x?e.jsx(d.default,{variableListFromProps:T,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(r.StyledModal,Object.assign({hideCrossButton:Ne,zIndex:g,centralContainerStyles:{width:Q?900:h===s.CHANNEL_TYPE.EMAIL&&m?1e3:800},open:!0,onClose:()=>{null==p||p()},headingTitle:null==ce?void 0:ce.label,headingSubtitle:h===s.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(J=null==ce?void 0:ce.category)&&void 0!==J?J:"")} • ${null!==(K=null==ce?void 0:ce.templateCategory)&&void 0!==K?K:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(d.default,{variableListFromProps:T,showSampleValues:M,showVariableMapping:m,channel:h,whatsappSpecificPickerMeta:P,showVariableModal:f,discountCode:L,setDiscountCode:I,variableListForImage:w&&(null==w?void 0:w.length)>0?w:ye,fileName:F,setFileName:e=>{null==_||_(e)}}),S?e.jsx(n.default,{isWhatsappCarousel:null!=Q&&Q,onSelect:function(){var e;if((null==Le?void 0:Le.length)<1&&X)return void se(!0);if(console.log("ctaOptionsErrors: ",Ae),Object.keys(Ae).length>0)return void se(!0);const t=null==S?void 0:S(ce,Ee,null!=oe?oe:"",Le);ue(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)&&ne(t.errorIndexes),(null==t?void 0:t.error)&&se(!!(null==t?void 0:t.error))):ge(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -66,6 +66,12 @@ export declare const TemplateModalContext: React.Context<{
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideCrossButton: boolean;
@@ -124,4 +130,10 @@ export declare const useTemplateModalContext: () => {
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 };

package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),o=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:O,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,h,R,U;const[V,T]=l.useState(""),[C,I]=l.useState(),{isError:q,disableEditVariable:w,pod:P,selectedCarouselIndex:E,originalVariableList:N,setOriginalVariableList:S,isProductCarouselType:_}=c.useTemplateModalContext();function B(e){if(T(e),null!=E&&E>-1&&_){const l=t.cloneDeep(N);if("URL"===m.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==S||S((e=>Object.assign(Object.assign({},e),{cards:t}))),null==g||g(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(a.buttons=s,null!=E&&E>-1){const e=[...N.cards];e[E]=a,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==g||g(`https://${e}`,"custom",j)}function H(e,l){const s=e;I(s);const a=("URL"===m.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=E&&E>-1&&_){const e=t.cloneDeep(N);if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(l.buttons=e,null!=E&&E>-1){const e=[...N.cards];e[E]=l,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else B("")}return l.useEffect((()=>{var e;if(console.log("button: ",m),m.buttonVariable&&n.editableVarPattern.test(m.buttonVariable))console.log("button pattern match: ",!0),I(o.CUSTOM_URL_NAME),T((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),console.log("button index: ",e,t[e],t[0]),e>-1?I(t[e]):H(t[0])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:H,defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[],error:"test 66"})})),"custom_link"===(null==C?void 0:C.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:B,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=m.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(L=m.example)||void 0===L?void 0:L[0]}`:null!==(h=m.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(R=m.index)&&void 0!==R?R:0,queryParams:null!==(U=m.queryParams)&&void 0!==U?U:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:m.type,CTAoptions:x})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:O,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:g,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,R,h,U;const[V,C]=l.useState(""),[T,q]=l.useState(),{isError:I,disableEditVariable:w,pod:E,selectedCarouselIndex:P,originalVariableList:S,setOriginalVariableList:N,isProductCarouselType:_,ctaOptionsErrors:B,setCtaOptionsErrors:H}=c.useTemplateModalContext();function M(e){if(C(e),null!=P&&P>-1&&_){const l=t.cloneDeep(S);if("URL"===O.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==N||N((e=>Object.assign(Object.assign({},e),{cards:t}))),null==m||m(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=P&&P>-1?S.cards[P]:S);if(a.buttons=s,null!=P&&P>-1){const e=[...S.cards];e[P]=a,null==N||N((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==N||N((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==m||m(`https://${e}`,"custom",j)}return l.useEffect((()=>{var e;if(O.buttonVariable&&n.editableVarPattern.test(O.buttonVariable))q(i.CUSTOM_URL_NAME),C((null===(e=O.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===O.type?x:f;e="URL"===O.type?t.findIndex((e=>e.placeHolder===O.buttonVariable)):t.findIndex((e=>e.label===O.flowName)),e>-1?q(t[e]):(console.log("ctaOptionsErrors 44: ",B),null==H||H((e=>Object.assign(Object.assign({},e),{[j]:"Required field!"}))))}}),[]),E!==o.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[O.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===O.type?x:f,isSearchable:!0,onSelect:function(e,l){null==H||H((e=>(delete e[j],console.log("ctaOptionsErrors 44 prevState: ",e),Object.assign({},e))));const s=e;q(s);const a=("URL"===O.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=P&&P>-1&&_){const e=t.cloneDeep(S);if("URL"===O.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==N||N((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===O.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({flowName:s.label,flowId:s.value},"placeholder",j),null==N||N((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===O.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=P&&P>-1?S.cards[P]:S);if(l.buttons=e,null!=P&&P>-1){const e=[...S.cards];e[P]=l,null==N||N((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==N||N((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else M("")},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[],error:I?null==B?void 0:B[j]:void 0})})),"custom_link"===(null==T?void 0:T.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:I?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:M,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=O.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(L=O.example)||void 0===L?void 0:L[0]}`:null!==(R=O.buttonVariable)&&void 0!==R?R:"",type:"link",isEditableVariable:!0,index:null!==(h=O.index)&&void 0!==h?h:0,queryParams:null!==(U=O.queryParams)&&void 0!==U?U:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:x})};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -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 i,useState as r,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 c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import p from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:x,channel:P,htmlContent:f,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:T,variableList:V,discountCode:k,setDiscountCode:M,onBackPress:j,enabledCustomText:D,variableListForImage:A,showSampleValues:F,disableEditVariable:H,pod:B,extras:O,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q,maxCharLimit:G}=b;var J,K,Q,X,Y,Z,ee,le;i((()=>{de(f)}),[f]);const oe=P===u.WHATSAPP&&"CAROUSEL"===(null===(K=null===(J=null==C?void 0:C.components)||void 0===J?void 0:J[1])||void 0===K?void 0:K.type),te=null==C?void 0:C.isProductCarouselType,[ie,re]=r(P===u.EMAIL||oe?"desktop":"mobile"),[ae,se]=r(!1),[ne,de]=r(f),[ce,ue]=r(!1),[me,pe]=r([]),[ve,he]=r({}),[be,Ce]=r(C),[ge,xe]=r([]),[Pe,fe]=r(null),[Ee,Ie]=r(!1),[Se,ye]=r(null!=E?E:[]),[we,Le]=r(!1),[Te,Ve]=r(oe?(null===(X=null===(Q=null==be?void 0:be.mapping)||void 0===Q?void 0:Q.body)||void 0===X?void 0:X.length)?-1:0:-1),[ke,Me]=r([]),[je,De]=r(void 0),Ae=a(null),[Fe,He]=r(!1),[Be,Oe]=r(!1);i((()=>{N?Me(N):te&&Me([])}),[N]),i((()=>{var e;if(!Ee&&te&&(!N||0===Me.length)){const l=null===(e=null==be?void 0:be.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,i;"HEADER"===e.type&&o.push(null!==(i=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==i?i:"")}))})),xe(o),Ie(!0)}}),[Ee]);const We=s((()=>h(S)),[S]);return i((()=>{De(t(V))}),[V]),e(m.Provider,Object.assign({value:{hideCrossButton:Be,setHideCrossButton:Oe,variableList:je,setVariableList:De,variableCallback:Pe,setVariableCallback:fe,showVariablePicker:ae,setShowVariablePicker:se,template:be,setTemplate:Ce,device:ie,setDevice:re,display_content:ne,setDisplayContent:de,originalVariableList:Se,setOriginalVariableList:ye,isError:ce,setIsError:ue,channel:P,globalNormalizedPlaceholders:We,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:H,pod:B,extras:O,isWhatsappCarousel:oe,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:te,templateErrorIndexes:ve,cardCount:oe?null===(Z=null===(Y=C.components)||void 0===Y?void 0:Y[1].cards)||void 0===Z?void 0:Z.length:void 0,errorIndexes:me,setErrorIndexes:pe,pickerConf:W,carouselProducts:ke,setCarouselProducts:Me,disableEditExpiry:z,cardWidth:R,cardImages:ge,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:Ae,isCarouselHovered:Fe,setIsCarouselHovered:He,maxCharLimit:G}},{children:y?e(v,{variableListFromProps:V,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:Be,zIndex:L,centralContainerStyles:{width:oe?900:P===u.EMAIL&&x?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==be?void 0:be.label,headingSubtitle:P===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(ee=null==be?void 0:be.category)&&void 0!==ee?ee:"")} • ${null!==(le=null==be?void 0:be.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:V,showSampleValues:F,showVariableMapping:x,channel:P,whatsappSpecificPickerMeta:w,showVariableModal:T,discountCode:k,setDiscountCode:M,variableListForImage:A&&(null==A?void 0:A.length)>0?A:je,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(p,{isWhatsappCarousel:null!=oe&&oe,onSelect:function(){var e;if((null==ke?void 0:ke.length)<1&&te)return void ue(!0);const l=null==I?void 0:I(be,Se,null!=ne?ne:"",ke);he(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)&&pe(l.errorIndexes),(null==l?void 0:l.error)&&ue(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};
+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 c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as p}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:f,channel:x,htmlContent:P,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:T,variableList:V,discountCode:k,setDiscountCode:j,onBackPress:M,enabledCustomText:D,variableListForImage:O,showSampleValues:A,disableEditVariable:F,pod:H,extras:B,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q,maxCharLimit:G}=b;var J,K,Q,X,Y,Z,ee,le;r((()=>{de(P)}),[P]);const oe=x===u.WHATSAPP&&"CAROUSEL"===(null===(K=null===(J=null==C?void 0:C.components)||void 0===J?void 0:J[1])||void 0===K?void 0:K.type),te=null==C?void 0:C.isProductCarouselType,[re,ie]=i(x===u.EMAIL||oe?"desktop":"mobile"),[ae,se]=i(!1),[ne,de]=i(P),[ce,ue]=i(!1),[pe,me]=i([]),[ve,he]=i({}),[be,Ce]=i(C),[ge,fe]=i([]),[xe,Pe]=i(null),[Ee,Ie]=i(!1),[Se,ye]=i(null!=E?E:[]),[we,Le]=i(!1),[Te,Ve]=i(oe?(null===(X=null===(Q=null==be?void 0:be.mapping)||void 0===Q?void 0:Q.body)||void 0===X?void 0:X.length)?-1:0:-1),[ke,je]=i([]),[Me,De]=i(void 0),Oe=a(null),[Ae,Fe]=i(!1),[He,Be]=i(!1),[We,Ne]=i({});r((()=>{N?je(N):te&&je([])}),[N]),r((()=>{var e;if(!Ee&&te&&(!N||0===je.length)){const l=null===(e=null==be?void 0:be.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:"")}))})),fe(o),Ie(!0)}}),[Ee]);const ze=s((()=>h(S)),[S]);return r((()=>{De(t(V))}),[V]),e(p.Provider,Object.assign({value:{hideCrossButton:He,setHideCrossButton:Be,variableList:Me,setVariableList:De,variableCallback:xe,setVariableCallback:Pe,showVariablePicker:ae,setShowVariablePicker:se,template:be,setTemplate:Ce,device:re,setDevice:ie,display_content:ne,setDisplayContent:de,originalVariableList:Se,setOriginalVariableList:ye,isError:ce,setIsError:ue,channel:x,globalNormalizedPlaceholders:ze,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:F,pod:H,extras:B,isWhatsappCarousel:oe,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:te,templateErrorIndexes:ve,cardCount:oe?null===(Z=null===(Y=C.components)||void 0===Y?void 0:Y[1].cards)||void 0===Z?void 0:Z.length:void 0,errorIndexes:pe,setErrorIndexes:me,pickerConf:W,carouselProducts:ke,setCarouselProducts:je,disableEditExpiry:z,cardWidth:R,cardImages:ge,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:Oe,isCarouselHovered:Ae,setIsCarouselHovered:Fe,maxCharLimit:G,ctaOptionsErrors:We,setCtaOptionsErrors:Ne}},{children:y?e(v,{variableListFromProps:V,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:He,zIndex:L,centralContainerStyles:{width:oe?900:x===u.EMAIL&&f?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==be?void 0:be.label,headingSubtitle:x===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(ee=null==be?void 0:be.category)&&void 0!==ee?ee:"")} • ${null!==(le=null==be?void 0:be.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==M||M()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:V,showSampleValues:A,showVariableMapping:f,channel:x,whatsappSpecificPickerMeta:w,showVariableModal:T,discountCode:k,setDiscountCode:j,variableListForImage:O&&(null==O?void 0:O.length)>0?O:Me,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(m,{isWhatsappCarousel:null!=oe&&oe,onSelect:function(){var e;if((null==ke?void 0:ke.length)<1&&te)return void ue(!0);if(console.log("ctaOptionsErrors: ",We),Object.keys(We).length>0)return void ue(!0);const l=null==I?void 0:I(be,Se,null!=ne?ne:"",ke);he(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)&&me(l.errorIndexes),(null==l?void 0:l.error)&&ue(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts

@@ -66,6 +66,12 @@ export declare const TemplateModalContext: React.Context<{
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideCrossButton: boolean;
@@ -124,4 +130,10 @@ export declare const useTemplateModalContext: () => {
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 };

package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as g}from"./VariableConnector.js";const j=j=>{let{variableListIndex:f,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:x,currentVariableList:y,CTAoptions:h,QRBoptions:L}=j;var R,U,V,T,w;const[I,C]=s(""),[P,E]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K}=p();function Y(t){if(C(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",f)}return}let e=y.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",f)}function $(t,e){const s=t;E(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==x||x({flowName:s.label,flowId:s.value},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=y.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let e=y.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=y.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==x||x({flowName:s.label,flowId:s.value},"placeholder",f)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")}return a((()=>{var t;if(console.log("button: ",O),O.buttonVariable&&i.test(O.buttonVariable))console.log("button pattern match: ",!0),E(r),C((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),console.log("button index: ",t,e[t],e[0]),t>-1?E(e[t]):$(e[0])}}),[]),B!==c.CHATBOT?t(g,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:$,defaultOptions:P?[Object.assign(Object.assign({},P),{selected:!0})]:[],error:"test 66"})})),"custom_link"===(null==P?void 0:P.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?I?b(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:f,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{j as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as g}from"./VariableConnector.js";const j=j=>{let{variableListIndex:f,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:h,QRBoptions:L}=j;var R,U,V,T,w;const[C,I]=s(""),[E,P]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:K,ctaOptionsErrors:Y,setCtaOptionsErrors:$}=p();function q(t){if(I(t),null!=Q&&Q>-1&&K){const e=l(S);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==_||_((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",f)}return}let e=x.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?S.cards[Q]:S);if(a.buttons=s,null!=Q&&Q>-1){const t=[...S.cards];t[Q]=a,null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",f)}return a((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))P(r),I((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1?P(e[t]):(console.log("ctaOptionsErrors 44: ",Y),null==$||$((t=>Object.assign(Object.assign({},t),{[f]:"Required field!"}))))}}),[]),B!==c.CHATBOT?t(g,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){null==$||$((t=>(delete t[f],console.log("ctaOptionsErrors 44 prevState: ",t),Object.assign({},t))));const s=t;P(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(S);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:s.label,flowId:s.value},"placeholder",f),null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=x.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let e=x.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=x.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:s.label,flowId:s.value},"placeholder",f)}const e=Object.assign({},null!=Q&&Q>-1?S.cards[Q]:S);if(e.buttons=t,null!=Q&&Q>-1){const t=[...S.cards];t[Q]=e,null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else q("")},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[],error:H?null==Y?void 0:Y[f]:void 0})})),"custom_link"===(null==E?void 0:E.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?C?b(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:q,maxCharLimit:2e3})}))]}):e(m,{index:f,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{j as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.552-beta.13",
+	"version": "0.0.552-beta.14",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",