@bikdotai/bik-component-library 0.0.433-beta.20 → 0.0.433-beta.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/package.json +1 -1
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("lodash"),a=require("react"),n=require("../../helpers/FileUploaderHelper.js"),o=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var l=require("../../template-preview/models/TemplateMeta.js"),r=require("../context/templateModalContext.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(a);const p=e=>/^{{.*}}$/.test(e);exports.default=u=>{let{mediaComponent:m,template:v,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:E,variableListForImage:g}=u;var h,j,b,_,M,x,C,y;console.log("mediaComponent : ",m);const{disableEditVariable:A}=r.useTemplateModalContext(),[S,T]=a.useState(void 0),[q,I]=a.useState(),[R,D]=a.useState(),[O,w]=a.useState(!1),H=c.default.createRef(),[P,k]=a.useState(!1),[F,U]=a.useState(""),{template:Y,setTemplate:L}=r.useTemplateModalContext();let N;function V(){var e;(null===(e=null==H?void 0:H.current)||void 0===e?void 0:e.click)&&H.current.click()}function G(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new n.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)U(a),k(!1);else{const e=m.format===l.HEADER_TYPES.IMAGE,a=yield E.uploadMediaFiles({file:t,fileName:S,isImage:e});if(a.success){const[e]=t.type.split("/");f(null!==(i=a.url)&&void 0!==i?i:"","application"===e?l.HEADER_TYPES.DOCUMENT:l.HEADER_TYPES[e.toUpperCase()])}else U("An unknown technical error occured");k(!1)}}else U("An unknown technical error occured"),k(!1)}))}return N=m.format===l.HEADER_TYPES.IMAGE?"image/png, image/jpeg":m.format===l.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(s.default,{mediaComponentFormat:null!==(h=m.format)&&void 0!==h?h:l.HEADER_TYPES.IMAGE,uploadMedia:function(t){var a;return e.__awaiter(this,void 0,void 0,(function*(){if(U(""),D(""),w(!1),t)if(t.startsWith("https"))try{k(!0);const e=yield fetch(t),i=yield e.blob();yield G(i)}catch(e){U("An unknown technical error occurred")}else if(p(t)){D(t);const e=i.cloneDeep(Y);if(e.components){const i=null===(a=null==e?void 0:e.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const a=Object.assign(Object.assign({},e.components[i]),{format:m.format,example:{header_handle:[t]}}),n=[...e.components];n[i]=a,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),k(!1),null==L||L(Object.assign({},e))}else k(!1),U("Invalid URL or variable");else V()}))},variableListForImage:g||[],setOpenEditMedia:w,openEditMedia:O}),!!q&&t.jsx(o.BikImageCropper,{aspectRatio:15/8,src:q,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){k(!1),U("");const e=yield fetch(t);G(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I(""),H.current&&(H.current.value="")}}),t.jsx("input",{ref:H,style:{display:"none"},type:"file",onChange:function(e){var t;U(""),k(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(m.format===l.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),T(""),e.onload=()=>{I(e.result),T(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else G(i)},accept:N}),t.jsx(d.default,{imageName:null!==(b=null===(j=null==m?void 0:m.example)||void 0===j?void 0:j.header_handle)&&void 0!==b?b:[],handleImageChange:V,mediaType:null==m?void 0:m.format,error:F,isLoading:P,setOpenEditMedia:w,selectedVariable:p(null!==(x=null===(M=null===(_=null==m?void 0:m.example)||void 0===_?void 0:_.header_handle)||void 0===M?void 0:M[0])&&void 0!==x?x:"")?null===(y=null===(C=null==m?void 0:m.example)||void 0===C?void 0:C.header_handle)||void 0===y?void 0:y[0]:R,disableEditVariable:A})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=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"),p=require("./EditWhatsAppTemplateMediaV2.js"),u=require("./VariableConnector.js"),c=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:j,whatsappSpecificPickerMeta:C,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,I,w,D,R,A,P,S;const{originalVariableList:N,pod:M,extras:_,selectedCarouselIndex:Q,isProductCarouselType:Y}=i.useTemplateModalContext(),{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}=s.getAllDataFromTemplateComponent(f),[z,G]=n.useState(!1),[J,Z]=n.useState(-1===Q?{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}:{}),[ee,te]=n.useState(!1);function ne(e,n,o){var i,l,s,a,d,r,p,u;const c=null!=Q&&Q>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Q].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Q]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Q&&Q>-1&&Y){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,i;if("BUTTONS"===e.type){const l=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==l?void 0:l[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});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})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==c?void 0:c.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==c?void 0:c.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",o,s,n,e);const u=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},c.components[v]),{buttons:u}),b=null===(p=c.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},c.mapping),{buttons:b});c.mapping=g;const f=[...c.components];f[v]=m,c.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(u=e.placeHolder)||void 0===u?void 0:u.slice(2,-2))?G(!0):(G(!1),null==y||y(""))}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=c.components,e.mapping.cards[Q]=c.mapping,console.log("templateCopy: ",e),null==j||j(Object.assign({},e))}else null==j||j(c)}function oe(e,n,o){var i,l,s,a,d,r;const p=null!=Q&&Q>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Q].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Q]}:Object.assign({},f);if(null!=Q&&Q>-1&&Y){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,i,l;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.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=t.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({},t),{buttons:d})}return t}))})))}):t})),i=t.cloneDeep(f);return i.components=n,void(null==j||j(Object.assign({},i)))}const u=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const t=null===(s=null==p?void 0:p.components[u].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[u])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),l=Object.assign(Object.assign({},p.components[u]),{buttons:i}),s=[...p.components];s[u]=l,p.components=s}}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=p.components,e.mapping.cards[Q]=p.mapping,console.log("templateCopy 2: ",e),null==j||j(Object.assign({},e))}else null==j||j(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))G(!0);else{G(!1);const e=null===(t=null==_?void 0:_.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",J)}),[J]),n.useEffect((()=>{var e,t,n,o;if(null!=Q&&Q>-1){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=s.getAllDataFromTemplateComponent(i);Z({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u})}else if(null!=Q&&-1===Q){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(f);Z({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Q]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Q),null!=Q&&Q>-1&&ee){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=s.getAllDataFromTemplateComponent(i);Z({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}),te(!1)}}),[ee]);const ie=l.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(c.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!J.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:J.imageComponent,updateTemplateImageUrl:function(e,n){var o,i,l,s,a;let d;d=null!=Q&&Q>-1?{components:null===(i=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Q].components,mapping:null===(s=null===(l=null==f?void 0:f.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[Q]}:Object.assign({},f);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 t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=d.components,e.mapping.cards[Q]=d.mapping,null==j||j(Object.assign({},e)),te(!0)}else null==j||j(Object.assign({},d))},template:f,variableListForImage:x})}),(J.bodyVariables.length>0||J.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:J.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=J.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Q&&Q>-1?N.cards[Q]:N,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedURLTemplateBtn:ne,variableList:O},`${n}_${Q}`)})),(null===(q=null===(k=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(M!==o.POD.CHATBOT?e.jsx(v.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===(I=null==_?void 0:_.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(w=null==_?void 0:_.backTrackExtra)||void 0===w?void 0:w[1]})),null===(R=null===(D=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===D?void 0:D.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedQRBTemplateBtn:oe},`${n}_${Q}`)})),M===o.POD.CHATBOT&&z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==_?void 0:_.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==_?void 0:_.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,i,l;if("COPY_CODE"===t.type)return e.jsx(u.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(i=t.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=t.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ie,componentType:"BUTTONS"},n)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../context/templateModalContext.js"),i=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:j,whatsappSpecificPickerMeta:C,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,D,I,w,R,A,P,S;const{originalVariableList:N,pod:M,extras:_,selectedCarouselIndex:Q,isProductCarouselType:Y}=l.useTemplateModalContext(),{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}=s.getAllDataFromTemplateComponent(f),[z,G]=n.useState(!1),[J,Z]=n.useState(-1===Q?{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}:{});console.log("templateComponentData : ",J);const[ee,te]=n.useState(!1);function ne(e,n,o){var l,i,s,a,d,r,p,c;const u=null!=Q&&Q>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Q].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Q]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Q&&Q>-1&&Y){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,l;if("BUTTONS"===e.type){const i=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==i?void 0:i[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(l=e.buttons)||void 0===l?void 0:l.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})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const l="custom"===n&&"string"==typeof e,i=l?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[i]}),console.log("templateCopy test: ",o,s,n,e);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=l?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?G(!0):(G(!1),null==y||y(""))}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=u.components,e.mapping.cards[Q]=u.mapping,console.log("templateCopy: ",e),null==j||j(Object.assign({},e))}else null==j||j(u)}function oe(e,n,o){var l,i,s,a,d,r;const p=null!=Q&&Q>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Q].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Q]}:Object.assign({},f);if(null!=Q&&Q>-1&&Y){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,l,i;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(l=null==s?void 0:s[o])&&void 0!==l?l:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(i=t.buttons)||void 0===i?void 0:i.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({},t),{buttons:d})}return t}))})))}):t})),l=t.cloneDeep(f);return l.components=n,void(null==j||j(Object.assign({},l)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const l=[...null!==(r=null===(d=null===(a=p.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==n?void 0:n.text)?n:e)),i=Object.assign(Object.assign({},p.components[c]),{buttons:l}),s=[...p.components];s[c]=i,p.components=s}}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=p.components,e.mapping.cards[Q]=p.mapping,console.log("templateCopy 2: ",e),null==j||j(Object.assign({},e))}else null==j||j(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))G(!0);else{G(!1);const e=null===(t=null==_?void 0:_.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",J)}),[J]),n.useEffect((()=>{var e,t,n,o;if(null!=Q&&Q>-1){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);Z({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Q&&-1===Q){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i}=s.getAllDataFromTemplateComponent(f);Z({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i})}}),[Q]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Q),null!=Q&&Q>-1&&ee){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);Z({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),te(!1)}}),[ee]);const le=i.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!J.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:J.imageComponent,updateTemplateImageUrl:function(e,n){var o,l,i,s,a;let d;d=null!=Q&&Q>-1?{components:null===(l=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===l?void 0:l[Q].components,mapping:null===(s=null===(i=null==f?void 0:f.mapping)||void 0===i?void 0:i.cards)||void 0===s?void 0:s[Q]}:Object.assign({},f);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 t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=d.components,e.mapping.cards[Q]=d.mapping,null==j||j(Object.assign({},e)),te(!0)}else null==j||j(Object.assign({},d))},template:f,variableListForImage:x})}),(J.bodyVariables.length>0||J.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:J.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=J.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Q&&Q>-1?N.cards[Q]:N,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedURLTemplateBtn:ne,variableList:O},`${n}_${Q}`)})),(null===(q=null===(k=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(M!==o.POD.CHATBOT?e.jsx(v.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===(D=null==_?void 0:_.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==_?void 0:_.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedQRBTemplateBtn:oe},`${n}_${Q}`)})),M===o.POD.CHATBOT&&z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==_?void 0:_.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==_?void 0:_.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,l,i;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(l=t.buttonVariable)&&void 0!==l?l:"",type:"string",isEditableVariable:!0,index:null!==(i=t.index)&&void 0!==i?i:0},showVariableModal:!0,variableList:le,componentType:"BUTTONS"},n)}))]}))};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import{cloneDeep as n}from"lodash";import a,{useState as l}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as d}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import c from"./EditMediaV2.js";const u=e=>/^{{.*}}$/.test(e),f=f=>{let{mediaComponent:v,template:h,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:b,variableListForImage:j}=f;var E,M,y,C,I,x,O,A;console.log("mediaComponent : ",v);const{disableEditVariable:k}=m(),[w,T]=l(void 0),[F,R]=l(),[U,_]=l(),[L,N]=l(!1),V=a.createRef(),[D,G]=l(!1),[S,B]=l(""),{template:H,setTemplate:z}=m();let P;function W(){var e;(null===(e=null==V?void 0:V.current)||void 0===e?void 0:e.click)&&V.current.click()}function X(o){var i;return e(this,void 0,void 0,(function*(){const e=new r;if(o instanceof Blob){const t=e.validate(o);if(t)B(t),G(!1);else{const e=v.format===s.IMAGE,t=yield b.uploadMediaFiles({file:o,fileName:w,isImage:e});if(t.success){const[e]=o.type.split("/");g(null!==(i=t.url)&&void 0!==i?i:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else B("An unknown technical error occured");G(!1)}}else B("An unknown technical error occured"),G(!1)}))}return P=v.format===s.IMAGE?"image/png, image/jpeg":v.format===s.VIDEO?"video/mp4":"application/pdf",o(i,{children:[t(p,{mediaComponentFormat:null!==(E=v.format)&&void 0!==E?E:s.IMAGE,uploadMedia:function(o){var i;return e(this,void 0,void 0,(function*(){if(B(""),_(""),N(!1),o)if(o.startsWith("https"))try{G(!0);const e=yield fetch(o),i=yield e.blob();yield X(i)}catch(e){B("An unknown technical error occurred")}else if(u(o)){_(o);const e=n(H);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:v.format,example:{header_handle:[o]}}),n=[...e.components];n[t]=i,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[o]})),G(!1),null==z||z(Object.assign({},e))}else G(!1),B("Invalid URL or variable");else W()}))},variableListForImage:j||[],setOpenEditMedia:N,openEditMedia:L}),!!F&&t(d,{aspectRatio:15/8,src:F,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){G(!1),B("");const e=yield fetch(o);X(yield e.blob()).then((()=>{R(void 0)}))}))},onCancel:()=>{G(!1),R(""),V.current&&(V.current.value="")}}),t("input",{ref:V,style:{display:"none"},type:"file",onChange:function(e){var o;B(""),G(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(v.format===s.IMAGE){const e=new FileReader;R(""),T(""),e.onload=()=>{R(e.result),T(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else X(i)},accept:P}),t(c,{imageName:null!==(y=null===(M=null==v?void 0:v.example)||void 0===M?void 0:M.header_handle)&&void 0!==y?y:[],handleImageChange:W,mediaType:null==v?void 0:v.format,error:S,isLoading:D,setOpenEditMedia:N,selectedVariable:u(null!==(x=null===(I=null===(C=null==v?void 0:v.example)||void 0===C?void 0:C.header_handle)||void 0===I?void 0:I[0])&&void 0!==x?x:"")?null===(A=null===(O=null==v?void 0:v.example)||void 0===O?void 0:O.header_handle)||void 0===A?void 0:A[0]:U,disableEditVariable:k})]})};export{f as default};
|
|
@@ -1 +1 @@
|
|
|
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 p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}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:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,_,D,M;const{originalVariableList:Q,pod:q,extras:Y,selectedCarouselIndex:H,isProductCarouselType:K}=s(),{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}=d(C),[J,Z]=e(!1),[oo,no]=e(-1===H?{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}:{}),[to,eo]=e(!1);function io(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=H&&H>-1&&K){const o=Object.assign({},C).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:[m]});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})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.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]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?Z(!0):(Z(!1),null==B||B(""))}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=u.components,o.mapping.cards[H]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function lo(o,n,e){var i,l,s,a,d,r;const p=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C);if(null!=H&&H>-1&&K){const n=Object.assign({},C).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(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].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=p.components)||void 0===a?void 0:a[c])||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({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=p.components,o.mapping.cards[H]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Z(!0);else{Z(!1);const o=null===(n=null==Y?void 0:Y.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",oo)}),[oo]),i((()=>{var o,n,t,e;if(null!=H&&H>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);no({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[H]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",H),null!=H&&H>-1&&to){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),eo(!1)}}),[to]);const so=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!oo.imageComponent&&!K&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:oo.imageComponent,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[H].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[H]}:Object.assign({},C);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!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=d.components,o.mapping.cards[H]=d.mapping,null==j||j(Object.assign({},o)),eo(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(oo.bodyVariables.length>0||oo.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:oo.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===(L=oo.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=H&&H>-1?Q.cards[H]:Q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedURLTemplateBtn:io,variableList:T},`${t}_${H}`)})),(null===(R=null===(w=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(q!==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===(N=null==Y?void 0:Y.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==Y?void 0:Y.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedQRBTemplateBtn:lo},`${t}_${H}`)})),q===l.CHATBOT&&J&&n(p,{discountCode:null===(_=null==Y?void 0:Y.discountCodeExtra)||void 0===_?void 0:_[0],setDiscountCode:null===(D=null==Y?void 0:Y.discountCodeExtra)||void 0===D?void 0:D[1],variableList:T}),null===(M=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===M?void 0:M.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:"",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:so,componentType:"BUTTONS"},t)}))]}))};export{h 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 p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}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:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,D,_,M;const{originalVariableList:Q,pod:q,extras:Y,selectedCarouselIndex:H,isProductCarouselType:K}=s(),{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}=d(C),[J,Z]=e(!1),[oo,no]=e(-1===H?{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}:{});console.log("templateComponentData : ",oo);const[to,eo]=e(!1);function io(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=H&&H>-1&&K){const o=Object.assign({},C).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:[m]});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})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.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]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?Z(!0):(Z(!1),null==B||B(""))}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=u.components,o.mapping.cards[H]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function lo(o,n,e){var i,l,s,a,d,r;const p=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C);if(null!=H&&H>-1&&K){const n=Object.assign({},C).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(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].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=p.components)||void 0===a?void 0:a[c])||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({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=p.components,o.mapping.cards[H]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Z(!0);else{Z(!1);const o=null===(n=null==Y?void 0:Y.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",oo)}),[oo]),i((()=>{var o,n,t,e;if(null!=H&&H>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);no({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[H]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",H),null!=H&&H>-1&&to){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),eo(!1)}}),[to]);const so=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!oo.imageComponent&&!K&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:oo.imageComponent,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[H].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[H]}:Object.assign({},C);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!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=d.components,o.mapping.cards[H]=d.mapping,null==j||j(Object.assign({},o)),eo(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(oo.bodyVariables.length>0||oo.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:oo.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===(L=oo.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=H&&H>-1?Q.cards[H]:Q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedURLTemplateBtn:io,variableList:T},`${t}_${H}`)})),(null===(R=null===(w=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(q!==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===(N=null==Y?void 0:Y.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==Y?void 0:Y.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedQRBTemplateBtn:lo},`${t}_${H}`)})),q===l.CHATBOT&&J&&n(p,{discountCode:null===(D=null==Y?void 0:Y.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(_=null==Y?void 0:Y.discountCodeExtra)||void 0===_?void 0:_[1],variableList:T}),null===(M=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===M?void 0:M.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:"",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:so,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|