@bikdotai/bik-component-library 0.0.500-beta-2 → 0.0.500-beta-4
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/EditMediaModal.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),a=require("../../input-with-vars/InputWithVariables.js"),s=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../template-preview/models/WhatsAppTemplate.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),a=require("../../input-with-vars/InputWithVariables.js"),s=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../template-preview/models/WhatsAppTemplate.js"),d=require("../../TypographyStyle.js"),o=require("../../../assets/icons/file.svg.js"),n=require("../../../assets/icons/filePdf.svg.js"),u=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js"),p=require("../context/templateModalContext.js");exports.default=h=>{let{setOpenEditMedia:j,mediaComponentFormat:x,variableListForImage:g,openEditMedia:m,uploadMedia:E}=h;const{pod:b}=p.useTemplateModalContext();return e.jsx(s.StyledModal,Object.assign({open:m,zIndex:2e3,onClose:()=>j(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:x===r.HEADER_TYPES.IMAGE?e.jsx(u.default,{width:40,height:40}):x===r.HEADER_TYPES.VIDEO?e.jsx(o.default,{width:40,height:40}):e.jsx(n.default,{width:40,height:40})})),e.jsx(d.TitleMedium,{children:x===r.HEADER_TYPES.IMAGE?"Upload an image":x===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(d.BodySecondary,{children:x===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":x===r.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format a document • Max 100MB"})]})),e.jsxs("div",Object.assign({style:{marginBottom:16}},{children:[e.jsx(d.BodyRegular,{children:"Media"}),e.jsx(a.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:g,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&E(t.actualValue)},showAddButton:b!==l.POD.CAMPAIGN||x===r.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(d.BodyCaption,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(t.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:c.default,onClick:()=>E()})}))]}))]}))}))};
|
|
@@ -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("../utils/getDataFromTemplateComponent.js"),s=require("./BackTrackComponent.js"),a=require("./DiscountCodeComponent.js"),d=require("./EditMediaV2.style.js"),r=require("./EditWhatsAppTemplateMediaV2.js"),u=require("./VariableConnector.js"),c=require("./VariableConnectorsPanel.js"),p=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),m=require("./WhatsAppTemplateCardButtonV2.js");exports.default=b=>{let{template:g,onTemplateChange:j,whatsappSpecificPickerMeta:f,showVariableModal:O,variableList:C,variableListForImage:h,discountCode:T,setDiscountCode:x}=b;var y,B,V,E,k,L,U,q,D,I,w,R,P,A,M,S,_,N,H,Q,Y;const F=g.isCarouselType,{originalVariableList:K,pod:W,extras:$,selectedCarouselIndex:X,isProductCarouselType:z}=i.useTemplateModalContext(),{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:te}=l.getAllDataFromTemplateComponent(g),[oe,ie]=t.useState(!1),[le,se]=t.useState(-1===X?{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:te}:{}),[ae,de]=t.useState(!1);function re(e,t,o){var i,l,s,a,d,r,u,c,p,v;const m=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g),b=n.cloneDeep(m),f="custom"===t&&"string"==typeof e,O=f?e:"string"!=typeof e?e.defaultValue:"";if(null!=X&&X>-1&&z){const t=Object.assign({},g).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:[O]});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({},g).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=>f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(g);return l.components=t,l.mapping.cards=i,void(null==j||j(Object.assign({},l)))}const C=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==C&&C>-1){const n=null===(d=null==b?void 0:b.components[C].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[C])||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[C]),{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[C]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?ie(!0):(ie(!1),null==x||x(""))}if(null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=b.components,e.mapping.cards[X]=b.mapping,null==j||j(Object.assign({},e))}else null==j||j(b)}function ue(e,t,o){var i,l,s,a,d,r;const u=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g);if(null!=X&&X>-1&&z){const t=Object.assign({},g).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(g);return i.components=t,void(null==j||j(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!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=u.components,null==j||j(Object.assign({},e))}else null==j||j(u)}return t.useEffect((()=>{var e,n;if(null===(e=g.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ie(!0);else{ie(!1);const e=null===(n=null==$?void 0:$.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[g]),t.useEffect((()=>{var e,n,t,o;if(null!=X&&X>-1){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(o=null===(t=null==g?void 0:g.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=X&&-1===X){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s}=l.getAllDataFromTemplateComponent(g);se({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s})}}),[X]),t.useEffect((()=>{var e,n,t,o;if(null!=X&&X>-1&&ae){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(o=null===(t=null==g?void 0:g.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),de(!1)}}),[ae]),e.jsxs(c.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!le.imageComponent&&!z&&e.jsx(d.EditTemplateMediaContainer,{children:e.jsx(r.default,{whatsappSpecificPickerMeta:f,mediaComponent:F?le.imageComponent:ee,updateTemplateImageUrl:function(e,t){var o,i,l,s,a,d,r,u;let c;c=null!=X&&X>-1?{components:null===(i=null===(o=g.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[X].components,mapping:null===(s=null===(l=null==g?void 0:g.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[X]}:Object.assign({},g);const p=null===(a=null==c?void 0:c.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==p&&p>-1&&(null==c?void 0:c.components[p])){const n=Object.assign(Object.assign({},c.components[p]),{format:t,example:{header_handle:[e]}}),o=[...c.components];o[p]=n,c=Object.assign(Object.assign({},c),{components:o})}if(c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0})),null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=c.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[X]=null!==(u=c.mapping)&&void 0!==u?u:{}),null==j||j(Object.assign({},e)),de(!0)}else null==j||j(Object.assign({},c))},template:g,variableListForImage:h})}),le.bodyVariables.length>0&&e.jsx(v.default,{containerStyle:{paddingTop:le.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===(y=le.descriptionComponents)||void 0===y?void 0:y.map(((n,t)=>e.jsx(p.default,{originalVariableList:null!=X&&X>-1?K.cards[X]:K,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:C},t))),(null===(V=null===(B=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===V?void 0:V.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(E=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===E?void 0:E.filter((e=>W===o.POD.CHATBOT||"URL"===e.type)))||void 0===k?void 0:k.map(((n,t)=>{if("URL"===n.type)return e.jsx(m.default,{variableListIndex:t,CTAoptions:null==f?void 0:f.CTAoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedURLTemplateBtn:re,variableList:C},`${t}_${X}`)})),W===o.POD.CHATBOT&&(null===(U=null===(L=Z[0])||void 0===L?void 0:L.component)||void 0===U?void 0:U.buttons)&&(null===(I=null===(D=null===(q=Z[0])||void 0===q?void 0:q.component)||void 0===D?void 0:D.buttons)||void 0===I?void 0:I.length)>0&&e.jsx(s.BackTrackComponent,{backTrackMessage:null===(w=null==$?void 0:$.backTrackExtra)||void 0===w?void 0:w[0],setBackTrackMessage:null===(R=null==$?void 0:$.backTrackExtra)||void 0===R?void 0:R[1]}),(null===(A=null===(P=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===A?void 0:A.length)>0&&(W!==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(s.BackTrackComponent,{backTrackMessage:null===(M=null==$?void 0:$.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==$?void 0:$.backTrackExtra)||void 0===S?void 0:S[1]})),null===(N=null===(_=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===N?void 0:N.map(((n,t)=>{if("QUICK_REPLY"===n.type&&W!==o.POD.CHATBOT)return e.jsx(m.default,{variableListIndex:t,QRBoptions:null==f?void 0:f.QRBoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedQRBTemplateBtn:ue},`${t}_${X}`)})),W===o.POD.CHATBOT&&oe&&e.jsx(a.DiscountCodeComponent,{discountCode:null===(H=null==$?void 0:$.discountCodeExtra)||void 0===H?void 0:H[0],setDiscountCode:null===(Q=null==$?void 0:$.discountCodeExtra)||void 0===Q?void 0:Q[1],variableList:C}),null===(Y=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===Y?void 0:Y.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(u.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:C,componentType:"BUTTONS"},t)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),o=require("react"),t=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../utils/getDataFromTemplateComponent.js"),s=require("./BackTrackComponent.js"),a=require("./DiscountCodeComponent.js"),d=require("./EditMediaV2.style.js"),r=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),p=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),m=require("./WhatsAppTemplateCardButtonV2.js");exports.default=b=>{let{template:g,onTemplateChange:j,whatsappSpecificPickerMeta:f,showVariableModal:O,variableList:C,variableListForImage:h,discountCode:T,setDiscountCode:x}=b;var y,B,V,k,E,L,w,U,q,D,I,R,P,A,M,S,_,N,H,Q,Y;const F=g.isCarouselType,{originalVariableList:K,pod:W,extras:$,selectedCarouselIndex:X,isProductCarouselType:z}=i.useTemplateModalContext(),{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:oe}=l.getAllDataFromTemplateComponent(g),[te,ie]=o.useState(!1),[le,se]=o.useState(-1===X?{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:oe}:{}),[ae,de]=o.useState(!1);function re(e,o,t){var i,l,s,a,d,r,c,u,p,v;const m=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g),b=n.cloneDeep(m),f="custom"===o&&"string"==typeof e,O=f?e:"string"!=typeof e?e.defaultValue:"";if(console.log("selectedTemplate",b),console.log("here we gave cusstom value",O),null!=X&&X>-1&&z){const o=Object.assign({},g).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,o,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!==(o=null==l?void 0:l[t])&&void 0!==o?o:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[O]});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({},g).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var o;return Object.assign(Object.assign({},n),{buttons:null===(o=null==n?void 0:n.buttons)||void 0===o?void 0:o.map((n=>f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})}));console.log("wer are here",i);const l=n.cloneDeep(g);return l.components=o,l.mapping.cards=i,console.log("newTemplate",l),void(null==j||j(Object.assign({},l)))}const C=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==C&&C>-1){const n=null===(d=null==b?void 0:b.components[C].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";console.log("we are here inside ir",i);let s=n[t];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("hkjsnfkjwen",s);const a=[...null!==(u=null===(c=null===(r=b.components)||void 0===r?void 0:r[C])||void 0===c?void 0:c.buttons)&&void 0!==u?u:[]].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[C]),{buttons:a}),v=null===(p=b.mapping)||void 0===p?void 0:p.buttons;v&&v.length>0&&(v[t]=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[C]=d,b.components=g}}if("string"!=typeof e){console.log("idhar");"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?ie(!0):(ie(!1),null==x||x(""))}if(null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=b.components,e.mapping.cards[X]=b.mapping,null==j||j(Object.assign({},e))}else null==j||j(b)}function ce(e,o,t){var i,l,s,a,d,r;const c=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g);if(null!=X&&X>-1&&z){const o=Object.assign({},g).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,i,l;if("BUTTONS"===n.type){const s=null===(o=n.buttons)||void 0===o?void 0:o.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[t])&&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(g);return i.components=o,void(null==j||j(Object.assign({},i)))}const u=null==c?void 0:c.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const n=null===(s=null==c?void 0:c.components[u].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let o=n[t];o=Object.assign(Object.assign({},o),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=c.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==o?void 0:o.text)?o:e)),l=Object.assign(Object.assign({},c.components[u]),{buttons:i}),s=[...c.components];s[u]=l,c.components=s}}if(null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=c.components,null==j||j(Object.assign({},e))}else null==j||j(c)}return o.useEffect((()=>{var e,n;if(null===(e=g.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ie(!0);else{ie(!1);const e=null===(n=null==$?void 0:$.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[g]),o.useEffect((()=>{var e,n,o,t;if(null!=X&&X>-1){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(t=null===(o=null==g?void 0:g.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u})}else if(null!=X&&-1===X){const{descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:s}=l.getAllDataFromTemplateComponent(g);se({descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:s})}}),[X]),o.useEffect((()=>{var e,n,o,t;if(null!=X&&X>-1&&ae){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(t=null===(o=null==g?void 0:g.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}),de(!1)}}),[ae]),e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!le.imageComponent&&!z&&e.jsx(d.EditTemplateMediaContainer,{children:e.jsx(r.default,{whatsappSpecificPickerMeta:f,mediaComponent:F?le.imageComponent:ee,updateTemplateImageUrl:function(e,o){var t,i,l,s,a,d,r,c;let u;u=null!=X&&X>-1?{components:null===(i=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[X].components,mapping:null===(s=null===(l=null==g?void 0:g.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[X]}:Object.assign({},g);const p=null===(a=null==u?void 0:u.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==p&&p>-1&&(null==u?void 0:u.components[p])){const n=Object.assign(Object.assign({},u.components[p]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[p]=n,u=Object.assign(Object.assign({},u),{components:t})}if(u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0})),null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=u.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[X]=null!==(c=u.mapping)&&void 0!==c?c:{}),null==j||j(Object.assign({},e)),de(!0)}else null==j||j(Object.assign({},u))},template:g,variableListForImage:h})}),le.bodyVariables.length>0&&e.jsx(v.default,{containerStyle:{paddingTop:le.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===(y=le.descriptionComponents)||void 0===y?void 0:y.map(((n,o)=>e.jsx(p.default,{originalVariableList:null!=X&&X>-1?K.cards[X]:K,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:C},o))),(null===(V=null===(B=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===V?void 0:V.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(E=null===(k=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===k?void 0:k.filter((e=>W===t.POD.CHATBOT||"URL"===e.type)))||void 0===E?void 0:E.map(((n,o)=>{if("URL"===n.type)return e.jsx(m.default,{variableListIndex:o,CTAoptions:null==f?void 0:f.CTAoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedURLTemplateBtn:re,variableList:C},`${o}_${X}`)})),W===t.POD.CHATBOT&&(null===(w=null===(L=Z[0])||void 0===L?void 0:L.component)||void 0===w?void 0:w.buttons)&&(null===(D=null===(q=null===(U=Z[0])||void 0===U?void 0:U.component)||void 0===q?void 0:q.buttons)||void 0===D?void 0:D.length)>0&&e.jsx(s.BackTrackComponent,{backTrackMessage:null===(I=null==$?void 0:$.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(R=null==$?void 0:$.backTrackExtra)||void 0===R?void 0:R[1]}),(null===(A=null===(P=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===A?void 0:A.length)>0&&(W!==t.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(s.BackTrackComponent,{backTrackMessage:null===(M=null==$?void 0:$.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==$?void 0:$.backTrackExtra)||void 0===S?void 0:S[1]})),null===(N=null===(_=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===N?void 0:N.map(((n,o)=>{if("QUICK_REPLY"===n.type&&W!==t.POD.CHATBOT)return e.jsx(m.default,{variableListIndex:o,QRBoptions:null==f?void 0:f.QRBoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedQRBTemplateBtn:ce},`${o}_${X}`)})),W===t.POD.CHATBOT&&te&&e.jsx(a.DiscountCodeComponent,{discountCode:null===(H=null==$?void 0:$.discountCodeExtra)||void 0===H?void 0:H[0],setDiscountCode:null===(Q=null==$?void 0:$.discountCodeExtra)||void 0===Q?void 0:Q[1],variableList:C}),null===(Y=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===Y?void 0:Y.map(((n,o)=>{var t,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:o,variable:{variableName:null!==(t=n.text)&&void 0!==t?t:"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:C,componentType:"BUTTONS"},o)}))]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),o=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=m=>{let{variableListIndex:g,button:j,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:O,currentVariableList:x,CTAoptions:f,QRBoptions:y,variableList:h}=m;var L,R,U,V;const[w,C]=l.useState(""),[T,I]=l.useState(),q=d.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:N,disableEditVariable:P,pod:E,selectedCarouselIndex:B,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:H}=c.useTemplateModalContext();function M(e){if(console.log("heree text kothay gelo",e),C(e),null!=B&&B>-1&&H){const l=t.cloneDeep(S);if("URL"===j.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),null==v||v(`https://${e}`,"custom",g)}return}let l=x.buttons.filter((e=>"URL"===e.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=B&&B>-1?S.cards[B]:S);if(a.buttons=s,null!=B&&B>-1){const e=[...S.cards];e[B]=a,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==v||v(`https://${e}`,"custom",g)}return l.useEffect((()=>{var e;if(j.buttonVariable&&n.editableVarPattern.test(j.buttonVariable))I(o.CUSTOM_URL_NAME),C((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?f:y;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&I(t[e])}}),[]),E!==i.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[j.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:P,options:"URL"===j.type?f:y,isSearchable:!0,onSelect:function(e,l){const s=e;I(s);const a="URL"===j.type?f:y,n=a.find((e=>e.placeHolder===s.placeHolder));if(console.log("options",a,n),n)if("custom_link"!==n.value){if(console.log("custom link with empty",n),null!=B&&B>-1&&H){const e=t.cloneDeep(S);if("URL"===j.type){console.log("we are here",j);const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[g];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return console.log("updatedButtons",l),Object.assign(Object.assign({},e),{buttons:l})}));console.log("newList",t),null==v||v({defaultValue:n.value,placeHolder:n.placeHolder},"placeholder",g),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===j.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[g];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",g),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===j.type){console.log("here url",j);
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),o=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=m=>{let{variableListIndex:g,button:j,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:O,currentVariableList:x,CTAoptions:f,QRBoptions:y,variableList:h}=m;var L,R,U,V;const[w,C]=l.useState(""),[T,I]=l.useState(),q=d.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:N,disableEditVariable:P,pod:E,selectedCarouselIndex:B,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:H}=c.useTemplateModalContext();function M(e){if(console.log("heree text kothay gelo",e),C(e),null!=B&&B>-1&&H){const l=t.cloneDeep(S);if("URL"===j.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),null==v||v(`https://${e}`,"custom",g)}return}let l=x.buttons.filter((e=>"URL"===e.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=B&&B>-1?S.cards[B]:S);if(a.buttons=s,null!=B&&B>-1){const e=[...S.cards];e[B]=a,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==v||v(`https://${e}`,"custom",g)}return l.useEffect((()=>{var e;if(j.buttonVariable&&n.editableVarPattern.test(j.buttonVariable))I(o.CUSTOM_URL_NAME),C((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?f:y;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&I(t[e])}}),[]),E!==i.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[j.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:P,options:"URL"===j.type?f:y,isSearchable:!0,onSelect:function(e,l){const s=e;I(s);const a="URL"===j.type?f:y,n=a.find((e=>e.placeHolder===s.placeHolder));if(console.log("options",a,n),n)if("custom_link"!==n.value){if(console.log("custom link with empty",n),null!=B&&B>-1&&H){const e=t.cloneDeep(S);if("URL"===j.type){console.log("we are here",j);const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[g];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return console.log("updatedButtons",l),Object.assign(Object.assign({},e),{buttons:l})}));console.log("newList",t),null==v||v({defaultValue:n.value,placeHolder:n.placeHolder},"placeholder",g),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===j.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[g];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",g),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===j.type){console.log("here url",j);const t=x.buttons.filter((e=>"URL"===e.type));console.log("urlVariables",t);let l=t[g];l=Object.assign(Object.assign({},l),{buttonVariable:s.placeHolder}),console.log("urlVariables made on first",e),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),console.log("updatedVariables",e),null==v||v({defaultValue:n.value,placeHolder:n.placeHolder},"placeholder",g)}else{console.log("are we here");let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[g];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",g)}const l=Object.assign({},null!=B&&B>-1?S.cards[B]:S);if(l.buttons=e,null!=B&&B>-1){const e=[...S.cards];e[B]=l,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else console.log("custom link without empty"),M("")},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[]})})),"custom_link"===(null==T?void 0:T.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:P?"disabled":"none",errorMessage:N?w?b.validateIsUrl(w)?"":"Enter valid URL":"Required field":"",value:w,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:M,maxCharLimit:2e3})}))]}):e.jsx(p.default,{index:g,variable:{variableName:null!==(L=j.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===j.buttonVariable?`${null===(R=j.example)||void 0===R?void 0:R[0]}`:null!==(U=j.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(V=j.index)&&void 0!==V?V:0},showVariableModal:!0,componentType:"BUTTONS",variableList:q,CTAoptions:f})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as a}from"../../button/Button.js";import{InputWithVariables as i}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as n,BodySecondary as d,BodyRegular as p,BodyCaption as m}from"../../TypographyStyle.js";import c from"../../../assets/icons/file.svg.js";import h from"../../../assets/icons/filePdf.svg.js";import g from"../../../assets/icons/image.svg.js";import u from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";const f=f=>{let{setOpenEditMedia:j,mediaComponentFormat:v,variableListForImage:y,openEditMedia:x,uploadMedia:M}=f;const{pod:w}=b();return
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as a}from"../../button/Button.js";import{InputWithVariables as i}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as n,BodySecondary as d,BodyRegular as p,BodyCaption as m}from"../../TypographyStyle.js";import c from"../../../assets/icons/file.svg.js";import h from"../../../assets/icons/filePdf.svg.js";import g from"../../../assets/icons/image.svg.js";import u from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";const f=f=>{let{setOpenEditMedia:j,mediaComponentFormat:v,variableListForImage:y,openEditMedia:x,uploadMedia:M}=f;const{pod:w}=b();return e(o,Object.assign({open:x,zIndex:2e3,onClose:()=>j(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(n,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:v===s.IMAGE?e(g,{width:40,height:40}):v===s.VIDEO?e(c,{width:40,height:40}):e(h,{width:40,height:40})})),e(n,{children:v===s.IMAGE?"Upload an image":v===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:v===s.IMAGE?"JPEG/ PNG format • Max 5MB":v===s.VIDEO?"MP4 format video • Max 16MB":"PDF format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(p,{children:"Media"}),e(i,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&M(t.actualValue)},showAddButton:w!==l.CAMPAIGN||v===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(m,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(a,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:u,onClick:()=>M()})}))]}))]}))}))};export{f as default};
|
|
@@ -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{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:O,onTemplateChange:h,whatsappSpecificPickerMeta:j,showVariableModal:C,variableList:T,variableListForImage:y,discountCode:x,setDiscountCode:B}=f;var V,E,L,k,U,I,w,R,A,P,M,N,S,H,_,Q,q,Y,D,K,W;const $=O.isCarouselType,{originalVariableList:F,pod:X,extras:z,selectedCarouselIndex:G,isProductCarouselType:J}=s(),{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}=a(O),[sn,an]=e(!1),[dn,rn]=e(-1===G?{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}:{}),[cn,pn]=e(!1);function un(n,o,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O),b=t(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue:"";if(null!=G&&G>-1&&J){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){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?an(!0):(an(!1),null==B||B(""))}if(null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=b.components,n.mapping.cards[G]=b.mapping,null==h||h(Object.assign({},n))}else null==h||h(b)}function mn(n,o,e){var i,l,s,a,d,r;const c=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O);if(null!=G&&G>-1&&J){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!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=c.components,null==h||h(Object.assign({},n))}else null==h||h(c)}return i((()=>{var n,o;if(null===(n=O.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))an(!0);else{an(!1);const n=null===(o=null==z?void 0:z.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[O]),i((()=>{var n,o,t,e;if(null!=G&&G>-1){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].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[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=G&&-1===G){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=a(O);rn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[G]),i((()=>{var n,o,t,e;if(null!=G&&G>-1&&cn){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].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[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}),pn(!1)}}),[cn]),n(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!dn.imageComponent&&!J&&o(c,{children:o(p,{whatsappSpecificPickerMeta:j,mediaComponent:$?dn.imageComponent:tn,updateTemplateImageUrl:function(n,o){var e,i,l,s,a,d,r,c;let p;p=null!=G&&G>-1?{components:null===(i=null===(e=O.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[G].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[G]}:Object.assign({},O);const u=null===(a=null==p?void 0:p.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==u&&u>-1&&(null==p?void 0:p.components[u])){const t=Object.assign(Object.assign({},p.components[u]),{format:o,example:{header_handle:[n]}}),e=[...p.components];e[u]=t,p=Object.assign(Object.assign({},p),{components:e})}if(p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0})),null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=p.components,(null===(d=null==n?void 0:n.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==n?void 0:n.mapping)||void 0===r?void 0:r.cards.length)>0&&(n.mapping.cards[G]=null!==(c=p.mapping)&&void 0!==c?c:{}),null==h||h(Object.assign({},n)),pn(!0)}else null==h||h(Object.assign({},p))},template:O,variableListForImage:y})}),dn.bodyVariables.length>0&&o(b,{containerStyle:{paddingTop:dn.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=dn.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>o(v,{originalVariableList:null!=G&&G>-1?F.cards[G]:F,type:n.type,descriptionComponent:n.component,showVariableModal:C,variableList:T},t))),(null===(L=null===(E=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===E?void 0:E.filter((n=>"URL"===n.type)))||void 0===L?void 0:L.length)>0&&o(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(k=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===k?void 0:k.filter((n=>X===l.CHATBOT||"URL"===n.type)))||void 0===U?void 0:U.map(((n,t)=>{if("URL"===n.type)return o(g,{variableListIndex:t,CTAoptions:null==j?void 0:j.CTAoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedURLTemplateBtn:un,variableList:T},`${t}_${G}`)})),X===l.CHATBOT&&(null===(w=null===(I=on[0])||void 0===I?void 0:I.component)||void 0===w?void 0:w.buttons)&&(null===(P=null===(A=null===(R=on[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===P?void 0:P.length)>0&&o(d,{backTrackMessage:null===(M=null==z?void 0:z.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(N=null==z?void 0:z.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(S=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===S?void 0:S.filter((n=>"QUICK_REPLY"===n.type)))||void 0===H?void 0:H.length)>0&&(X!==l.CHATBOT?o(b,{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(d,{backTrackMessage:null===(_=null==z?void 0:z.backTrackExtra)||void 0===_?void 0:_[0],setBackTrackMessage:null===(Q=null==z?void 0:z.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(Y=null===(q=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.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&&X!==l.CHATBOT)return o(g,{variableListIndex:t,QRBoptions:null==j?void 0:j.QRBoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedQRBTemplateBtn:mn},`${t}_${G}`)})),X===l.CHATBOT&&sn&&o(r,{discountCode:null===(D=null==z?void 0:z.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(K=null==z?void 0:z.discountCodeExtra)||void 0===K?void 0:K[1],variableList:T}),null===(W=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===W?void 0:W.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(u,{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:T,componentType:"BUTTONS"},t)}))]}))};export{f 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{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:h,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:C,variableList:T,variableListForImage:y,discountCode:x,setDiscountCode:B}=f;var V,k,E,L,w,U,I,R,A,P,M,N,S,H,_,Q,q,Y,D,K,W;const $=h.isCarouselType,{originalVariableList:F,pod:X,extras:z,selectedCarouselIndex:G,isProductCarouselType:J}=s(),{descriptionComponents:Z,urlBtns:oo,qrbBtns:no,imageComponent:to,bodyVariables:eo,headerVariables:io}=a(h),[lo,so]=e(!1),[ao,ro]=e(-1===G?{descriptionComponents:Z,urlBtns:oo,qrbBtns:no,imageComponent:to,bodyVariables:eo,headerVariables:io}:{}),[co,po]=e(!1);function uo(o,n,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=G&&G>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},h),b=t(v),g="custom"===n&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue:"";if(console.log("selectedTemplate",b),console.log("here we gave cusstom value",f),null!=G&&G>-1&&J){const n=Object.assign({},h).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({},h).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:""))})}));console.log("wer are here",i);const l=t(h);return l.components=n,l.mapping.cards=i,console.log("newTemplate",l),void(null==j||j(Object.assign({},l)))}const O=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==O&&O>-1){const t=null===(d=null==b?void 0:b.components[O].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:"";console.log("we are here inside ir",i);let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("hkjsnfkjwen",s);const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[O])||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[O]),{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[O]=d,b.components=g}}if("string"!=typeof o){console.log("idhar");"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?so(!0):(so(!1),null==B||B(""))}if(null!=G&&G>-1){const o=t(h);o.components[1].cards[G].components=b.components,o.mapping.cards[G]=b.mapping,null==j||j(Object.assign({},o))}else null==j||j(b)}function mo(o,n,e){var i,l,s,a,d,r;const c=null!=G&&G>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},h);if(null!=G&&G>-1&&J){const n=Object.assign({},h).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(h);return i.components=n,void(null==j||j(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!=G&&G>-1){const o=t(h);o.components[1].cards[G].components=c.components,null==j||j(Object.assign({},o))}else null==j||j(c)}return i((()=>{var o,n;if(null===(o=h.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))so(!0);else{so(!1);const o=null===(n=null==z?void 0:z.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[h]),i((()=>{var o,n,t,e;if(null!=G&&G>-1){const i={components:null===(n=null===(o=h.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[G].components,mapping:null===(e=null===(t=null==h?void 0:h.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);ro({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=G&&-1===G){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=a(h);ro({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[G]),i((()=>{var o,n,t,e;if(null!=G&&G>-1&&co){const i={components:null===(n=null===(o=h.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[G].components,mapping:null===(e=null===(t=null==h?void 0:h.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);ro({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}),po(!1)}}),[co]),o(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ao.imageComponent&&!J&&n(c,{children:n(p,{whatsappSpecificPickerMeta:O,mediaComponent:$?ao.imageComponent:to,updateTemplateImageUrl:function(o,n){var e,i,l,s,a,d,r,c;let p;p=null!=G&&G>-1?{components:null===(i=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[G].components,mapping:null===(s=null===(l=null==h?void 0:h.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[G]}:Object.assign({},h);const u=null===(a=null==p?void 0:p.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==u&&u>-1&&(null==p?void 0:p.components[u])){const t=Object.assign(Object.assign({},p.components[u]),{format:n,example:{header_handle:[o]}}),e=[...p.components];e[u]=t,p=Object.assign(Object.assign({},p),{components:e})}if(p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0})),null!=G&&G>-1){const o=t(h);o.components[1].cards[G].components=p.components,(null===(d=null==o?void 0:o.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==o?void 0:o.mapping)||void 0===r?void 0:r.cards.length)>0&&(o.mapping.cards[G]=null!==(c=p.mapping)&&void 0!==c?c:{}),null==j||j(Object.assign({},o)),po(!0)}else null==j||j(Object.assign({},p))},template:h,variableListForImage:y})}),ao.bodyVariables.length>0&&n(b,{containerStyle:{paddingTop:ao.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=ao.descriptionComponents)||void 0===V?void 0:V.map(((o,t)=>n(v,{originalVariableList:null!=G&&G>-1?F.cards[G]:F,type:o.type,descriptionComponent:o.component,showVariableModal:C,variableList:T},t))),(null===(E=null===(k=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===k?void 0:k.filter((o=>"URL"===o.type)))||void 0===E?void 0:E.length)>0&&n(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(w=null===(L=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===L?void 0:L.filter((o=>X===l.CHATBOT||"URL"===o.type)))||void 0===w?void 0:w.map(((o,t)=>{if("URL"===o.type)return n(g,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedURLTemplateBtn:uo,variableList:T},`${t}_${G}`)})),X===l.CHATBOT&&(null===(I=null===(U=no[0])||void 0===U?void 0:U.component)||void 0===I?void 0:I.buttons)&&(null===(P=null===(A=null===(R=no[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===P?void 0:P.length)>0&&n(d,{backTrackMessage:null===(M=null==z?void 0:z.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(N=null==z?void 0:z.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(S=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===S?void 0:S.filter((o=>"QUICK_REPLY"===o.type)))||void 0===H?void 0:H.length)>0&&(X!==l.CHATBOT?n(b,{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(d,{backTrackMessage:null===(_=null==z?void 0:z.backTrackExtra)||void 0===_?void 0:_[0],setBackTrackMessage:null===(Q=null==z?void 0:z.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(Y=null===(q=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.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&&X!==l.CHATBOT)return n(g,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedQRBTemplateBtn:mo},`${t}_${G}`)})),X===l.CHATBOT&&lo&&n(r,{discountCode:null===(D=null==z?void 0:z.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(K=null==z?void 0:z.discountCodeExtra)||void 0===K?void 0:K[1],variableList:T}),null===(W=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===W?void 0:W.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(u,{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:T,componentType:"BUTTONS"},t)}))]}))};export{f as default};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as o}from"react";import{Dropdown as a}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{useAdditionalVariables as b}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as m}from"../utils/validateIsUrl.js";import g,{Container as f}from"./VariableConnector.js";const j=j=>{let{variableListIndex:v,button:O,updateSelectedURLTemplateBtn:y,updateSelectedQRBTemplateBtn:h,currentVariableList:x,CTAoptions:L,QRBoptions:R,variableList:U}=j;var V,w,C,T;const[I,N]=s(""),[B,E]=s(),H=b({variableList:U,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:P,disableEditVariable:k,pod:Q,selectedCarouselIndex:_,originalVariableList:S,setOriginalVariableList:A,isProductCarouselType:K}=p();function Y(e){if(console.log("heree text kothay gelo",e),N(e),null!=_&&_>-1&&K){const t=l(S);if("URL"===O.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[v];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==A||A((e=>Object.assign(Object.assign({},e),{cards:l}))),null==y||y(`https://${e}`,"custom",v)}return}let t=x.buttons.filter((e=>"URL"===e.type))[v];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),o=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(o.buttons=s,null!=_&&_>-1){const e=[...S.cards];e[_]=o,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==y||y(`https://${e}`,"custom",v)}return o((()=>{var e;if(O.buttonVariable&&i.test(O.buttonVariable))E(r),N((null===(e=O.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===O.type?L:R;e="URL"===O.type?t.findIndex((e=>e.placeHolder===O.buttonVariable)):t.findIndex((e=>e.label===O.flowName)),e>-1&&E(t[e])}}),[]),Q!==c.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(a,{disabled:k,options:"URL"===O.type?L:R,isSearchable:!0,onSelect:function(e,t){const s=e;E(s);const o="URL"===O.type?L:R,a=o.find((e=>e.placeHolder===s.placeHolder));if(console.log("options",o,a),a)if("custom_link"!==a.value){if(console.log("custom link with empty",a),null!=_&&_>-1&&K){const e=l(S);if("URL"===O.type){console.log("we are here",O);const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[v];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return console.log("updatedButtons",l),Object.assign(Object.assign({},e),{buttons:l})}));console.log("newList",t),null==y||y({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",v),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===O.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[v];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==h||h({flowName:s.label,flowId:s.value},"placeholder",v),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===O.type){console.log("here url",O);const t=x.buttons.filter((e=>"URL"===e.type));console.log("urlVariables",t);let l=t[v];l=Object.assign(Object.assign({},l),{buttonVariable:s.placeHolder}),console.log("urlVariables made on first",e),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),console.log("updatedVariables",e),null==y||y({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",v)}else{console.log("are we here");let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[v];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==h||h({flowName:s.label,flowId:s.value},"placeholder",v)}const t=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(t.buttons=e,null!=_&&_>-1){const e=[...S.cards];e[_]=t,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else console.log("custom link without empty"),Y("")},defaultOptions:B?[Object.assign(Object.assign({},B),{selected:!0})]:[]})})),"custom_link"===(null==B?void 0:B.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(n,{state:k?"disabled":"none",errorMessage:P?I?m(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):t(g,{index:v,variable:{variableName:null!==(V=O.text)&&void 0!==V?V:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(w=O.example)||void 0===w?void 0:w[0]}`:null!==(C=O.buttonVariable)&&void 0!==C?C:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0},showVariableModal:!0,componentType:"BUTTONS",variableList:H,CTAoptions:L})};export{j as default};
|