@bikdotai/bik-component-library 0.0.467-beta.57 → 0.0.467
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),v=require("./VariableConnectorWhatsApp.js"),m=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:j,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:O,variableList:h,variableListForImage:T,discountCode:x,setDiscountCode:y}=g;var V,B,E,L,k,U,q,D,I,w,R,A,P,M,S,N,_,H,Q,Y,F;const K=j.isCarouselType,{originalVariableList:W,pod:$,extras:X,selectedCarouselIndex:z,isProductCarouselType:G}=i.useTemplateModalContext(),{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}=s.getAllDataFromTemplateComponent(j),[ie,le]=t.useState(!1),[se,ae]=t.useState(-1===z?{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}:{}),[de,re]=t.useState(!1);function ue(e,t,o){var i,l,s,a,d,r,u,c,p,v;const m=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,C=g?e:"string"!=typeof e?e.defaultValue:"";if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let s=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[C]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(j);return l.components=t,l.mapping.cards=i,void(null==f||f(Object.assign({},l)))}const O=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==O&&O>-1){const n=null===(d=null==b?void 0:b.components[O].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(c=null===(u=null===(r=b.components)||void 0===r?void 0:r[O])||void 0===u?void 0:u.buttons)&&void 0!==c?c:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),d=Object.assign(Object.assign({},b.components[O]),{buttons:a}),v=null===(p=b.mapping)||void 0===p?void 0:p.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[O]=d,b.components=g}}if("string"!=typeof e){"cart.cartUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?le(!0):(le(!1),null==y||y(""))}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=b.components,e.mapping.cards[z]=b.mapping,null==f||f(Object.assign({},e))}else null==f||f(b)}function ce(e,t,o){var i,l,s,a,d,r;const u=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j);if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(j);return i.components=t,void(null==f||f(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null==u?void 0:u.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),s=[...u.components];s[c]=l,u.components=s}}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=u.components,null==f||f(Object.assign({},e))}else null==f||f(u)}t.useEffect((()=>{var e,n;console.log("buttons",j.mapping.buttons);if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"cart.cartUrl"===e.slice(2,-2))))le(!0);else{le(!1);const e=null===(n=null==X?void 0:X.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[j]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=z&&-1===z){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(j);ae({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[z]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1&&de){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),re(!1)}}),[de]);const pe=l.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!se.imageComponent&&!G&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:K?se.imageComponent:ne,updateTemplateImageUrl:function(e,t){var o,i,l,s,a;let d;d=null!=z&&z>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[z].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[z]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:t,example:{header_handle:[e]}}),o=[...d.components];o[r]=n,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=d.components,e.mapping.cards[z]=d.mapping,null==f||f(Object.assign({},e)),re(!0)}else null==f||f(Object.assign({},d))},template:j,variableListForImage:T})}),(se.bodyVariables.length>0||se.headerVariables.length>0)&&e.jsx(m.default,{containerStyle:{paddingTop:se.mediaComponent?24: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===(V=se.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>e.jsx(v.default,{originalVariableList:null!=z&&z>-1?W.cards[z]:W,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:h},t))),(null===(E=null===(B=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(L=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===L?void 0:L.filter((e=>$===o.POD.CHATBOT||"URL"===e.type)))||void 0===k?void 0:k.map(((n,t)=>{if("URL"===n.type)return e.jsx(b.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedURLTemplateBtn:ue,variableList:h},`${t}_${z}`)})),$===o.POD.CHATBOT&&(null===(q=null===(U=ee[0])||void 0===U?void 0:U.component)||void 0===q?void 0:q.buttons)&&(null===(w=null===(I=null===(D=ee[0])||void 0===D?void 0:D.component)||void 0===I?void 0:I.buttons)||void 0===w?void 0:w.length)>0&&e.jsx(a.BackTrackComponent,{backTrackMessage:null===(R=null==X?void 0:X.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(A=null==X?void 0:X.backTrackExtra)||void 0===A?void 0:A[1]}),(null===(M=null===(P=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===M?void 0:M.length)>0&&($!==o.POD.CHATBOT?e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(S=null==X?void 0:X.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(N=null==X?void 0:X.backTrackExtra)||void 0===N?void 0:N[1]})),null===(H=null===(_=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.map(((n,t)=>{if("QUICK_REPLY"===n.type)return e.jsx(b.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedQRBTemplateBtn:ce},`${t}_${z}`)})),$===o.POD.CHATBOT&&ie&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(Q=null==X?void 0:X.discountCodeExtra)||void 0===Q?void 0:Q[0],setDiscountCode:null===(Y=null==X?void 0:X.discountCodeExtra)||void 0===Y?void 0:Y[1],variableList:h}),null===(F=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===F?void 0:F.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:pe,componentType:"BUTTONS"},t)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),v=require("./VariableConnectorWhatsApp.js"),m=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:j,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:O,variableList:h,variableListForImage:T,discountCode:x,setDiscountCode:y}=g;var V,B,E,k,L,U,q,D,I,w,R,A,P,M,S,N,_,H,Q,Y,F;const K=j.isCarouselType,{originalVariableList:W,pod:$,extras:X,selectedCarouselIndex:z,isProductCarouselType:G}=i.useTemplateModalContext(),{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}=s.getAllDataFromTemplateComponent(j),[ie,le]=t.useState(!1),[se,ae]=t.useState(-1===z?{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}:{}),[de,re]=t.useState(!1);function ue(e,t,o){var i,l,s,a,d,r,u,c,p,v;const m=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,C=g?e:"string"!=typeof e?e.defaultValue:"";if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let s=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[C]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(j);return l.components=t,l.mapping.cards=i,void(null==f||f(Object.assign({},l)))}const O=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==O&&O>-1){const n=null===(d=null==b?void 0:b.components[O].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(c=null===(u=null===(r=b.components)||void 0===r?void 0:r[O])||void 0===u?void 0:u.buttons)&&void 0!==c?c:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),d=Object.assign(Object.assign({},b.components[O]),{buttons:a}),v=null===(p=b.mapping)||void 0===p?void 0:p.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[O]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?le(!0):(le(!1),null==y||y(""))}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=b.components,e.mapping.cards[z]=b.mapping,null==f||f(Object.assign({},e))}else null==f||f(b)}function ce(e,t,o){var i,l,s,a,d,r;const u=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j);if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(j);return i.components=t,void(null==f||f(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null==u?void 0:u.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),s=[...u.components];s[c]=l,u.components=s}}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=u.components,null==f||f(Object.assign({},e))}else null==f||f(u)}t.useEffect((()=>{var e,n;if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))le(!0);else{le(!1);const e=null===(n=null==X?void 0:X.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[j]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=z&&-1===z){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(j);ae({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[z]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1&&de){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),re(!1)}}),[de]);const pe=l.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!se.imageComponent&&!G&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:K?se.imageComponent:ne,updateTemplateImageUrl:function(e,t){var o,i,l,s,a;let d;d=null!=z&&z>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[z].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[z]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:t,example:{header_handle:[e]}}),o=[...d.components];o[r]=n,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=d.components,e.mapping.cards[z]=d.mapping,null==f||f(Object.assign({},e)),re(!0)}else null==f||f(Object.assign({},d))},template:j,variableListForImage:T})}),(se.bodyVariables.length>0||se.headerVariables.length>0)&&e.jsx(m.default,{containerStyle:{paddingTop:se.mediaComponent?24: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===(V=se.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>e.jsx(v.default,{originalVariableList:null!=z&&z>-1?W.cards[z]:W,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:h},t))),(null===(E=null===(B=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(L=null===(k=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===k?void 0:k.filter((e=>$===o.POD.CHATBOT||"URL"===e.type)))||void 0===L?void 0:L.map(((n,t)=>{if("URL"===n.type)return e.jsx(b.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedURLTemplateBtn:ue,variableList:h},`${t}_${z}`)})),$===o.POD.CHATBOT&&(null===(q=null===(U=ee[0])||void 0===U?void 0:U.component)||void 0===q?void 0:q.buttons)&&(null===(w=null===(I=null===(D=ee[0])||void 0===D?void 0:D.component)||void 0===I?void 0:I.buttons)||void 0===w?void 0:w.length)>0&&e.jsx(a.BackTrackComponent,{backTrackMessage:null===(R=null==X?void 0:X.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(A=null==X?void 0:X.backTrackExtra)||void 0===A?void 0:A[1]}),(null===(M=null===(P=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===M?void 0:M.length)>0&&($!==o.POD.CHATBOT?e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(S=null==X?void 0:X.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(N=null==X?void 0:X.backTrackExtra)||void 0===N?void 0:N[1]})),null===(H=null===(_=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.map(((n,t)=>{if("QUICK_REPLY"===n.type)return e.jsx(b.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedQRBTemplateBtn:ce},`${t}_${z}`)})),$===o.POD.CHATBOT&&ie&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(Q=null==X?void 0:X.discountCodeExtra)||void 0===Q?void 0:Q[0],setDiscountCode:null===(Y=null==X?void 0:X.discountCodeExtra)||void 0===Y?void 0:Y[1],variableList:h}),null===(F=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===F?void 0:F.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:pe,componentType:"BUTTONS"},t)}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as n,jsx as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as c}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as p}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const j=j=>{let{template:O,onTemplateChange:h,whatsappSpecificPickerMeta:C,showVariableModal:T,variableList:y,variableListForImage:x,discountCode:V,setDiscountCode:B}=j;var E,L,k,U,I,w,R,A,N,P,M,S,_,H,Q,D,q,Y,K,W,$;const F=O.isCarouselType,{originalVariableList:X,pod:z,extras:G,selectedCarouselIndex:J,isProductCarouselType:Z}=s(),{descriptionComponents:nn,urlBtns:on,qrbBtns:tn,imageComponent:en,bodyVariables:ln,headerVariables:sn}=d(O),[an,dn]=e(!1),[rn,cn]=e(-1===J?{descriptionComponents:nn,urlBtns:on,qrbBtns:tn,imageComponent:en,bodyVariables:ln,headerVariables:sn}:{}),[pn,un]=e(!1);function mn(n,o,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=J&&J>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},O),b=t(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue:"";if(null!=J&&J>-1&&Z){const o=Object.assign({},O).components.map((n=>{var o;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(o=n.cards)||void 0===o?void 0:o.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var o,t,i;if("BUTTONS"===n.type){const l=null===(o=n.buttons)||void 0===o?void 0:o.filter((n=>"URL"===n.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=n.buttons)||void 0===i?void 0:i.map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n));return Object.assign(Object.assign({},n),{buttons:a})}return n}))})))}):n})),i=null===(a=null===(s=Object.assign({},O).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:""))})})),l=t(O);return l.components=o,l.mapping.cards=i,void(null==h||h(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==j&&j>-1){const t=null===(d=null==b?void 0:b.components[j].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof n,l=i?n:"string"!=typeof n?n.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===c?void 0:c.buttons)&&void 0!==p?p:[]].map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n)),d=Object.assign(Object.assign({},b.components[j]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[j]=d,b.components=g}}if("string"!=typeof n){"cart.cartUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?dn(!0):(dn(!1),null==B||B(""))}if(null!=J&&J>-1){const n=t(O);n.components[1].cards[J].components=b.components,n.mapping.cards[J]=b.mapping,null==h||h(Object.assign({},n))}else null==h||h(b)}function vn(n,o,e){var i,l,s,a,d,r;const c=null!=J&&J>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},O);if(null!=J&&J>-1&&Z){const o=Object.assign({},O).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const s=null===(t=o.buttons)||void 0===t?void 0:t.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:n.flowId,flowName:n.flowName});const d=null===(l=o.buttons)||void 0===l?void 0:l.map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==a?void 0:a.text)?a:n));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),i=t(O);return i.components=o,void(null==h||h(Object.assign({},i)))}const p=null==c?void 0:c.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==p&&p>-1){const o=null===(s=null==c?void 0:c.components[p].buttons)||void 0===s?void 0:s.filter((n=>"QUICK_REPLY"===n.type));if(o){let t=o[e];t=Object.assign(Object.assign({},t),{flowId:n.flowId,flowName:n.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==t?void 0:t.text)?t:n)),l=Object.assign(Object.assign({},c.components[p]),{buttons:i}),s=[...c.components];s[p]=l,c.components=s}}if(null!=J&&J>-1){const n=t(O);n.components[1].cards[J].components=c.components,null==h||h(Object.assign({},n))}else null==h||h(c)}i((()=>{var n,o;console.log("buttons",O.mapping.buttons);if(null===(n=O.mapping.buttons)||void 0===n?void 0:n.find((n=>"cart.cartUrl"===n.slice(2,-2))))dn(!0);else{dn(!1);const n=null===(o=null==G?void 0:G.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[O]),i((()=>{var n,o,t,e;if(null!=J&&J>-1){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[J].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);cn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=J&&-1===J){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(O);cn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[J]),i((()=>{var n,o,t,e;if(null!=J&&J>-1&&pn){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[J].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);cn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}),un(!1)}}),[pn]);const bn=a({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return n(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!rn.imageComponent&&!Z&&o(p,{children:o(u,{whatsappSpecificPickerMeta:C,mediaComponent:F?rn.imageComponent:en,updateTemplateImageUrl:function(n,o){var e,i,l,s,a;let d;d=null!=J&&J>-1?{components:null===(i=null===(e=O.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[J].components,mapping:null===(s=null===(l=null==O?void 0:O.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[J]}:Object.assign({},O);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[n]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=J&&J>-1){const n=t(O);n.components[1].cards[J].components=d.components,n.mapping.cards[J]=d.mapping,null==h||h(Object.assign({},n)),un(!0)}else null==h||h(Object.assign({},d))},template:O,variableListForImage:x})}),(rn.bodyVariables.length>0||rn.headerVariables.length>0)&&o(g,{containerStyle:{paddingTop:rn.mediaComponent?24: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===(E=rn.descriptionComponents)||void 0===E?void 0:E.map(((n,t)=>o(b,{originalVariableList:null!=J&&J>-1?X.cards[J]:X,type:n.type,descriptionComponent:n.component,showVariableModal:T,variableList:y},t))),(null===(k=null===(L=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===L?void 0:L.filter((n=>"URL"===n.type)))||void 0===k?void 0:k.length)>0&&o(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(U=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===U?void 0:U.filter((n=>z===l.CHATBOT||"URL"===n.type)))||void 0===I?void 0:I.map(((n,t)=>{if("URL"===n.type)return o(f,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedURLTemplateBtn:mn,variableList:y},`${t}_${J}`)})),z===l.CHATBOT&&(null===(R=null===(w=tn[0])||void 0===w?void 0:w.component)||void 0===R?void 0:R.buttons)&&(null===(P=null===(N=null===(A=tn[0])||void 0===A?void 0:A.component)||void 0===N?void 0:N.buttons)||void 0===P?void 0:P.length)>0&&o(r,{backTrackMessage:null===(M=null==G?void 0:G.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==G?void 0:G.backTrackExtra)||void 0===S?void 0:S[1]}),(null===(H=null===(_=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===_?void 0:_.filter((n=>"QUICK_REPLY"===n.type)))||void 0===H?void 0:H.length)>0&&(z!==l.CHATBOT?o(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(r,{backTrackMessage:null===(Q=null==G?void 0:G.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(D=null==G?void 0:G.backTrackExtra)||void 0===D?void 0:D[1]})),null===(Y=null===(q=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===q?void 0:q.filter((n=>"QUICK_REPLY"===n.type)))||void 0===Y?void 0:Y.map(((n,t)=>{if("QUICK_REPLY"===n.type)return o(f,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedQRBTemplateBtn:vn},`${t}_${J}`)})),z===l.CHATBOT&&an&&o(c,{discountCode:null===(K=null==G?void 0:G.discountCodeExtra)||void 0===K?void 0:K[0],setDiscountCode:null===(W=null==G?void 0:G.discountCodeExtra)||void 0===W?void 0:W[1],variableList:y}),null===($=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===$?void 0:$.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(m,{index:t,variable:{variableName:null!==(e=n.text)&&void 0!==e?e:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:bn,componentType:"BUTTONS"},t)}))]}))};export{j as default};
|
|
1
|
+
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as c}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as p}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:j,onTemplateChange:O,whatsappSpecificPickerMeta:C,showVariableModal:T,variableList:y,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var E,L,k,U,I,w,R,A,N,P,M,S,_,H,Q,D,q,Y,K,W,$;const F=j.isCarouselType,{originalVariableList:X,pod:z,extras:G,selectedCarouselIndex:J,isProductCarouselType:Z}=s(),{descriptionComponents:oo,urlBtns:no,qrbBtns:to,imageComponent:eo,bodyVariables:io,headerVariables:lo}=d(j),[so,ao]=e(!1),[ro,co]=e(-1===J?{descriptionComponents:oo,urlBtns:no,qrbBtns:to,imageComponent:eo,bodyVariables:io,headerVariables:lo}:{}),[po,uo]=e(!1);function mo(o,n,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=J&&J>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},j),b=t(v),g="custom"===n&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue:"";if(null!=J&&J>-1&&Z){const n=Object.assign({},j).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(j);return l.components=n,l.mapping.cards=i,void(null==O||O(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o?o.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===c?void 0:c.buttons)&&void 0!==p?p:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?ao(!0):(ao(!1),null==B||B(""))}if(null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=b.components,o.mapping.cards[J]=b.mapping,null==O||O(Object.assign({},o))}else null==O||O(b)}function vo(o,n,e){var i,l,s,a,d,r;const c=null!=J&&J>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},j);if(null!=J&&J>-1&&Z){const n=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(j);return i.components=n,void(null==O||O(Object.assign({},i)))}const p=null==c?void 0:c.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==p&&p>-1){const n=null===(s=null==c?void 0:c.components[p].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},c.components[p]),{buttons:i}),s=[...c.components];s[p]=l,c.components=s}}if(null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=c.components,null==O||O(Object.assign({},o))}else null==O||O(c)}i((()=>{var o,n;if(null===(o=j.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))ao(!0);else{ao(!1);const o=null===(n=null==G?void 0:G.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[j]),i((()=>{var o,n,t,e;if(null!=J&&J>-1){const i={components:null===(n=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[J].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);co({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=J&&-1===J){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(j);co({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[J]),i((()=>{var o,n,t,e;if(null!=J&&J>-1&&po){const i={components:null===(n=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[J].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);co({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}),uo(!1)}}),[po]);const bo=a({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ro.imageComponent&&!Z&&n(p,{children:n(u,{whatsappSpecificPickerMeta:C,mediaComponent:F?ro.imageComponent:eo,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=J&&J>-1?{components:null===(i=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[J].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[J]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=d.components,o.mapping.cards[J]=d.mapping,null==O||O(Object.assign({},o)),uo(!0)}else null==O||O(Object.assign({},d))},template:j,variableListForImage:x})}),(ro.bodyVariables.length>0||ro.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:ro.mediaComponent?24: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===(E=ro.descriptionComponents)||void 0===E?void 0:E.map(((o,t)=>n(b,{originalVariableList:null!=J&&J>-1?X.cards[J]:X,type:o.type,descriptionComponent:o.component,showVariableModal:T,variableList:y},t))),(null===(k=null===(L=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===L?void 0:L.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(U=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===U?void 0:U.filter((o=>z===l.CHATBOT||"URL"===o.type)))||void 0===I?void 0:I.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:o,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedURLTemplateBtn:mo,variableList:y},`${t}_${J}`)})),z===l.CHATBOT&&(null===(R=null===(w=to[0])||void 0===w?void 0:w.component)||void 0===R?void 0:R.buttons)&&(null===(P=null===(N=null===(A=to[0])||void 0===A?void 0:A.component)||void 0===N?void 0:N.buttons)||void 0===P?void 0:P.length)>0&&n(r,{backTrackMessage:null===(M=null==G?void 0:G.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==G?void 0:G.backTrackExtra)||void 0===S?void 0:S[1]}),(null===(H=null===(_=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===_?void 0:_.filter((o=>"QUICK_REPLY"===o.type)))||void 0===H?void 0:H.length)>0&&(z!==l.CHATBOT?n(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):n(r,{backTrackMessage:null===(Q=null==G?void 0:G.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(D=null==G?void 0:G.backTrackExtra)||void 0===D?void 0:D[1]})),null===(Y=null===(q=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===q?void 0:q.filter((o=>"QUICK_REPLY"===o.type)))||void 0===Y?void 0:Y.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:o,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedQRBTemplateBtn:vo},`${t}_${J}`)})),z===l.CHATBOT&&so&&n(c,{discountCode:null===(K=null==G?void 0:G.discountCodeExtra)||void 0===K?void 0:K[0],setDiscountCode:null===(W=null==G?void 0:G.discountCodeExtra)||void 0===W?void 0:W[1],variableList:y}),null===($=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===$?void 0:$.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"Copy Code",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:bo,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|