@bikdotai/bik-component-library 0.0.506-beta-pdf → 0.0.506-beta-pdf-0.2

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.
Files changed (7) hide show
  1. package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
  2. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -1
  3. package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
  4. package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
  5. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -1
  6. package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
  7. package/package.json +1 -1
package/dist/cjs/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts CHANGED
@@ -15,5 +15,5 @@ export interface EditWhatsAppTemplateV2Props {
15
15
  fileName?: string;
16
16
  setFileName?: (name: string) => void;
17
17
  }
18
- declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
18
+ declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
19
19
  export default EditWhatsAppTemplateV2;
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED
@@ -1,7 +1,7 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../input/Input.js"),i=require("../../template-preview/models/TemplateMeta.js"),l=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),a=require("../utils/getDataFromTemplateComponent.js"),d=require("./BackTrackComponent.js"),r=require("./DiscountCodeComponent.js"),u=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),v=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),b=require("./VariableEditorHeader.js"),g=require("./WhatsAppTemplateCardButtonV2.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=f(require("styled-components")).default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),s=require("../../template-preview/models/WhatsAppTemplate.js"),a=require("../context/templateModalContext.js"),d=require("../utils/getDataFromTemplateComponent.js"),r=require("./BackTrackComponent.js"),u=require("./DiscountCodeComponent.js"),p=require("./EditMediaV2.style.js"),c=require("./EditWhatsAppTemplateMediaV2.js"),v=require("./VariableConnector.js"),m=require("./VariableConnectorsPanel.js"),b=require("./VariableConnectorWhatsApp.js"),g=require("./VariableEditorHeader.js"),f=require("./WhatsAppTemplateCardButtonV2.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const h=j(o).default.div`
2
2
  padding-top: 24px;
3
3
  padding-left: 10px;
4
4
  padding-right: 10px;
5
5
  margin-bottom: 8px;
6
6
  line-height: normal;
7
- `;exports.default=f=>{let{template:h,onTemplateChange:O,whatsappSpecificPickerMeta:C,showVariableModal:T,variableList:x,variableListForImage:y,discountCode:B,setDiscountCode:E,fileName:V,setFileName:k}=f;var L,D,q,U,I,P,w,R,A,M,S,N,_,H,F,Q,Y,K,W,$,z;const X=h.isCarouselType,{originalVariableList:Z,pod:G,extras:J,selectedCarouselIndex:ee,isProductCarouselType:ne}=s.useTemplateModalContext(),{descriptionComponents:te,urlBtns:oe,qrbBtns:ie,imageComponent:le,bodyVariables:se,headerVariables:ae}=a.getAllDataFromTemplateComponent(h),[de,re]=t.useState(!1),[ue,pe]=t.useState(-1===ee?{descriptionComponents:te,urlBtns:oe,qrbBtns:ie,imageComponent:le,bodyVariables:se,headerVariables:ae}:{}),[ce,ve]=t.useState(!1),[me,be]=t.useState(V),[ge,fe]=t.useState("");function je(e,t,o){var i,l,s,a,d,r,u,p,c,v;const m=null!=ee&&ee>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ee].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ee]}:Object.assign({},h),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ee&&ee>-1&&ne){const t=Object.assign({},h).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:[f]});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({},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 e?e.placeHolder:""))})})),l=n.cloneDeep(h);return l.components=t,l.mapping.cards=i,void(null==O||O(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const n=null===(d=null==b?void 0:b.components[j].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?e.defaultValue:"https://d.bik.ai/";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.buttons)&&void 0!==p?p:[]].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[j]),{buttons:a}),v=null===(c=b.mapping)||void 0===c?void 0:c.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[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?re(!0):(re(!1),null==E||E(""))}if(null!=ee&&ee>-1){const e=n.cloneDeep(h);e.components[1].cards[ee].components=b.components,e.mapping.cards[ee]=b.mapping,null==O||O(Object.assign({},e))}else null==O||O(b)}function he(e,t,o){var i,l,s,a,d,r;const u=null!=ee&&ee>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ee].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ee]}:Object.assign({},h);if(null!=ee&&ee>-1&&ne){const t=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((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(h);return i.components=t,void(null==O||O(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(s=null==u?void 0:u.components[p].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[p])||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[p]),{buttons:i}),s=[...u.components];s[p]=l,u.components=s}}if(null!=ee&&ee>-1){const e=n.cloneDeep(h);e.components[1].cards[ee].components=u.components,null==O||O(Object.assign({},e))}else null==O||O(u)}t.useEffect((()=>{var e,n;if(null===(e=h.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))re(!0);else{re(!1);const e=null===(n=null==J?void 0:J.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[h]),t.useEffect((()=>{var e,n,t,o;if(null!=ee&&ee>-1){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ee].components,mapping:null===(o=null===(t=null==h?void 0:h.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ee]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:p}=a.getAllDataFromTemplateComponent(i);pe({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:p})}else if(null!=ee&&-1===ee){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=a.getAllDataFromTemplateComponent(h);pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ee]),t.useEffect((()=>{var e,n,t,o;if(null!=ee&&ee>-1&&ce){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ee].components,mapping:null===(o=null===(t=null==h?void 0:h.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ee]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:p}=a.getAllDataFromTemplateComponent(i);pe({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:p}),ve(!1)}}),[ce]);return e.jsxs(v.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ue.imageComponent&&!ne&&e.jsxs(u.EditTemplateMediaContainer,{children:[e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:X?ue.imageComponent:le,updateTemplateImageUrl:function(e,t){var o,i,l,s,a,d,r,u;let p;p=null!=ee&&ee>-1?{components:null===(i=null===(o=h.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ee].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[ee]}:Object.assign({},h);const c=null===(a=null==p?void 0:p.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}if(p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0})),null!=ee&&ee>-1){const e=n.cloneDeep(h);e.components[1].cards[ee].components=p.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[ee]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==O||O(Object.assign({},e)),ve(!0)}else null==O||O(Object.assign({},p))},template:h,variableListForImage:y}),(null==le?void 0:le.format)==i.HEADER_TYPES.DOCUMENT?e.jsx(j,{children:e.jsx(o.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:me,errorMessage:ge||void 0,onBlur:()=>{if(!me)return;/[^a-zA-Z0-9._]/.test(me)?fe("Please enter a valid PDF name"):(fe(""),null==k||k(me))},onChangeText:e=>{fe(""),be(e)}})}):e.jsx(e.Fragment,{})]}),ue.bodyVariables.length>0&&e.jsx(b.default,{containerStyle:{paddingTop:ue.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=ue.descriptionComponents)||void 0===L?void 0:L.map(((n,t)=>e.jsx(m.default,{originalVariableList:null!=ee&&ee>-1?Z.cards[ee]:Z,type:n.type,descriptionComponent:n.component,showVariableModal:T,variableList:x},t))),(null===(q=null===(D=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===D?void 0:D.filter((e=>"URL"===e.type)))||void 0===q?void 0:q.length)>0&&e.jsx(b.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(U=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===U?void 0:U.filter((e=>G===l.POD.CHATBOT||"URL"===e.type)))||void 0===I?void 0:I.map(((n,t)=>{if("URL"===n.type)return e.jsx(g.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=ee&&ee>-1?Object.assign({},Z.cards[ee]):Object.assign({},Z),updateSelectedURLTemplateBtn:je,variableList:x},`${t}_${ee}`)})),G===l.POD.CHATBOT&&(null===(w=null===(P=ie[0])||void 0===P?void 0:P.component)||void 0===w?void 0:w.buttons)&&(null===(M=null===(A=null===(R=ie[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===M?void 0:M.length)>0&&e.jsx(d.BackTrackComponent,{backTrackMessage:null===(S=null==J?void 0:J.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(N=null==J?void 0:J.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(_=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.length)>0&&(G!==l.POD.CHATBOT?e.jsx(b.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(d.BackTrackComponent,{backTrackMessage:null===(F=null==J?void 0:J.backTrackExtra)||void 0===F?void 0:F[0],setBackTrackMessage:null===(Q=null==J?void 0:J.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(K=null===(Y=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===Y?void 0:Y.filter((e=>"QUICK_REPLY"===e.type)))||void 0===K?void 0:K.map(((n,t)=>{if("QUICK_REPLY"===n.type&&G!==l.POD.CHATBOT)return e.jsx(g.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=ee&&ee>-1?Object.assign({},Z.cards[ee]):Object.assign({},Z),updateSelectedQRBTemplateBtn:he},`${t}_${ee}`)})),G===l.POD.CHATBOT&&de&&e.jsx(r.DiscountCodeComponent,{discountCode:null===(W=null==J?void 0:J.discountCodeExtra)||void 0===W?void 0:W[0],setDiscountCode:null===($=null==J?void 0:J.discountCodeExtra)||void 0===$?void 0:$[1],variableList:x}),null===(z=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===z?void 0:z.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:x,componentType:"BUTTONS"},t)}))]}))};
7
+ `;exports.default=o=>{let{template:j,onTemplateChange:O,whatsappSpecificPickerMeta:C,showVariableModal:T,variableList:x,variableListForImage:y,discountCode:B,setDiscountCode:E,fileName:V,setFileName:k}=o;var L,D,q,U,I,P,w,R,A,M,S,N,_,H,F,Q,Y,K,W,$,z;const X=j.isCarouselType,{originalVariableList:Z,pod:G,extras:J,selectedCarouselIndex:ee,isProductCarouselType:ne}=a.useTemplateModalContext(),{descriptionComponents:te,urlBtns:oe,qrbBtns:ie,imageComponent:le,bodyVariables:se,headerVariables:ae}=d.getAllDataFromTemplateComponent(j),[de,re]=t.useState(!1),[ue,pe]=t.useState(-1===ee?{descriptionComponents:te,urlBtns:oe,qrbBtns:ie,imageComponent:le,bodyVariables:se,headerVariables:ae}:{}),[ce,ve]=t.useState(!1),[me,be]=t.useState(V),[ge,fe]=t.useState();function je(e,t,o){var i,l,s,a,d,r,u,p,c,v;const m=null!=ee&&ee>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[ee].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[ee]}:Object.assign({},j),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=ee&&ee>-1&&ne){const t=Object.assign({},j).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let s=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(j);return l.components=t,l.mapping.cards=i,void(null==O||O(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const n=null===(d=null==b?void 0:b.components[h].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?e.defaultValue:"https://d.bik.ai/";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(u=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===u?void 0:u.buttons)&&void 0!==p?p:[]].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[h]),{buttons:a}),v=null===(c=b.mapping)||void 0===c?void 0:c.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[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?re(!0):(re(!1),null==E||E(""))}if(null!=ee&&ee>-1){const e=n.cloneDeep(j);e.components[1].cards[ee].components=b.components,e.mapping.cards[ee]=b.mapping,null==O||O(Object.assign({},e))}else null==O||O(b)}function he(e,t,o){var i,l,s,a,d,r;const u=null!=ee&&ee>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[ee].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[ee]}:Object.assign({},j);if(null!=ee&&ee>-1&&ne){const t=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(j);return i.components=t,void(null==O||O(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(s=null==u?void 0:u.components[p].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[p])||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[p]),{buttons:i}),s=[...u.components];s[p]=l,u.components=s}}if(null!=ee&&ee>-1){const e=n.cloneDeep(j);e.components[1].cards[ee].components=u.components,null==O||O(Object.assign({},e))}else null==O||O(u)}t.useEffect((()=>{var e,n;if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))re(!0);else{re(!1);const e=null===(n=null==J?void 0:J.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[j]),t.useEffect((()=>{var e,n,t,o;if(null!=ee&&ee>-1){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ee].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ee]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);pe({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p})}else if(null!=ee&&-1===ee){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=d.getAllDataFromTemplateComponent(j);pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ee]),t.useEffect((()=>{var e,n,t,o;if(null!=ee&&ee>-1&&ce){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ee].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[ee]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);pe({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}),ve(!1)}}),[ce]);return e.jsxs(m.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ue.imageComponent&&!ne&&e.jsxs(p.EditTemplateMediaContainer,{children:[e.jsx(c.default,{whatsappSpecificPickerMeta:C,mediaComponent:X?ue.imageComponent:le,updateTemplateImageUrl:function(e,t){var o,i,l,s,a,d,r,u;let p;p=null!=ee&&ee>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ee].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[ee]}:Object.assign({},j);const c=null===(a=null==p?void 0:p.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}if(p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0})),null!=ee&&ee>-1){const e=n.cloneDeep(j);e.components[1].cards[ee].components=p.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[ee]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==O||O(Object.assign({},e)),ve(!0)}else null==O||O(Object.assign({},p))},template:j,variableListForImage:y}),(null==le?void 0:le.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(h,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:me,errorMessage:ge||void 0,onBlur:()=>{if(!me)return;/[^a-zA-Z0-9._ ]/.test(me)?fe("Please enter a valid PDF name"):(fe(void 0),null==k||k(me))},onChangeText:e=>{fe(""),be(e)}})}):e.jsx(e.Fragment,{})]}),ue.bodyVariables.length>0&&e.jsx(g.default,{containerStyle:{paddingTop:ue.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=ue.descriptionComponents)||void 0===L?void 0:L.map(((n,t)=>e.jsx(b.default,{originalVariableList:null!=ee&&ee>-1?Z.cards[ee]:Z,type:n.type,descriptionComponent:n.component,showVariableModal:T,variableList:x},t))),(null===(q=null===(D=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===D?void 0:D.filter((e=>"URL"===e.type)))||void 0===q?void 0:q.length)>0&&e.jsx(g.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(U=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===U?void 0:U.filter((e=>G===s.POD.CHATBOT||"URL"===e.type)))||void 0===I?void 0:I.map(((n,t)=>{if("URL"===n.type)return e.jsx(f.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=ee&&ee>-1?Object.assign({},Z.cards[ee]):Object.assign({},Z),updateSelectedURLTemplateBtn:je,variableList:x},`${t}_${ee}`)})),G===s.POD.CHATBOT&&(null===(w=null===(P=ie[0])||void 0===P?void 0:P.component)||void 0===w?void 0:w.buttons)&&(null===(M=null===(A=null===(R=ie[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===M?void 0:M.length)>0&&e.jsx(r.BackTrackComponent,{backTrackMessage:null===(S=null==J?void 0:J.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(N=null==J?void 0:J.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(_=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.length)>0&&(G!==s.POD.CHATBOT?e.jsx(g.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(r.BackTrackComponent,{backTrackMessage:null===(F=null==J?void 0:J.backTrackExtra)||void 0===F?void 0:F[0],setBackTrackMessage:null===(Q=null==J?void 0:J.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(K=null===(Y=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===Y?void 0:Y.filter((e=>"QUICK_REPLY"===e.type)))||void 0===K?void 0:K.map(((n,t)=>{if("QUICK_REPLY"===n.type&&G!==s.POD.CHATBOT)return e.jsx(f.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=ee&&ee>-1?Object.assign({},Z.cards[ee]):Object.assign({},Z),updateSelectedQRBTemplateBtn:he},`${t}_${ee}`)})),G===s.POD.CHATBOT&&de&&e.jsx(u.DiscountCodeComponent,{discountCode:null===(W=null==J?void 0:J.discountCodeExtra)||void 0===W?void 0:W[0],setDiscountCode:null===($=null==J?void 0:J.discountCodeExtra)||void 0===$?void 0:$[1],variableList:x}),null===(z=null!=ee&&ee>-1?Z.cards[ee].buttons:null==Z?void 0:Z.buttons)||void 0===z?void 0:z.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(v.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:x,componentType:"BUTTONS"},t)}))]}))};
package/dist/esm/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts CHANGED
@@ -15,5 +15,5 @@ export interface EditWhatsAppTemplateV2Props {
15
15
  fileName?: string;
16
16
  setFileName?: (name: string) => void;
17
17
  }
18
- declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
18
+ declare const EditWhatsAppTemplateV2: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, fileName, setFileName, }: EditWhatsAppTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
19
19
  export default EditWhatsAppTemplateV2;
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as n,jsx as o,Fragment as t}from"react/jsx-runtime";import{cloneDeep as e}from"lodash";import{useState as i,useEffect as l}from"react";import{Input as s}from"../../input/Input.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{POD as d}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as p}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as c}from"./BackTrackComponent.js";import{DiscountCodeComponent as u}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as m}from"./EditMediaV2.style.js";import v from"./EditWhatsAppTemplateMediaV2.js";import b from"./VariableConnector.js";import{Container as g}from"./VariableConnectorsPanel.js";import f from"./VariableConnectorWhatsApp.js";import h from"./VariableEditorHeader.js";import O from"./WhatsAppTemplateCardButtonV2.js";import j from"styled-components";const C=j=>{let{template:C,onTemplateChange:x,whatsappSpecificPickerMeta:y,showVariableModal:V,variableList:B,variableListForImage:E,discountCode:k,setDiscountCode:L,fileName:U,setFileName:I}=j;var w,R,P,A,N,M,S,_,H,D,Q,q,Y,K,F,W,$,z,X,Z,G;const J=C.isCarouselType,{originalVariableList:nn,pod:on,extras:tn,selectedCarouselIndex:en,isProductCarouselType:ln}=r(),{descriptionComponents:sn,urlBtns:an,qrbBtns:dn,imageComponent:rn,bodyVariables:pn,headerVariables:cn}=p(C),[un,mn]=i(!1),[vn,bn]=i(-1===en?{descriptionComponents:sn,urlBtns:an,qrbBtns:dn,imageComponent:rn,bodyVariables:pn,headerVariables:cn}:{}),[gn,fn]=i(!1),[hn,On]=i(U),[jn,Cn]=i("");function Tn(n,o,t){var i,l,s,a,d,r,p,c,u,m;const v=null!=en&&en>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[en].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[en]}:Object.assign({},C),b=e(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue?n.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=en&&en>-1&&ln){const o=Object.assign({},C).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,e,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!==(e=null==l?void 0:l[t])&&void 0!==e?e:{};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({},C).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=e(C);return l.components=o,l.mapping.cards=i,void(null==x||x(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==h&&h>-1){const e=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==e?void 0:e.length)>0){const i="custom"===o&&"string"==typeof n,l=i?n:"string"!=typeof n&&n.defaultValue?n.defaultValue:"https://d.bik.ai/";let s=e[t];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(c=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==c?c:[]].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[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[t]=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[h]=d,b.components=g}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?mn(!0):(mn(!1),null==L||L(""))}if(null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=b.components,n.mapping.cards[en]=b.mapping,null==x||x(Object.assign({},n))}else null==x||x(b)}function xn(n,o,t){var i,l,s,a,d,r;const p=null!=en&&en>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[en].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[en]}:Object.assign({},C);if(null!=en&&en>-1&&ln){const o=Object.assign({},C).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,i,l;if("BUTTONS"===o.type){const s=null===(e=o.buttons)||void 0===e?void 0:e.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==s?void 0:s[t])&&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=e(C);return i.components=o,void(null==x||x(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==c&&c>-1){const o=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((n=>"QUICK_REPLY"===n.type));if(o){let e=o[t];e=Object.assign(Object.assign({},e),{flowId:n.flowId,flowName:n.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((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==e?void 0:e.text)?e:n)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=p.components,null==x||x(Object.assign({},n))}else null==x||x(p)}l((()=>{var n,o;if(null===(n=C.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))mn(!0);else{mn(!1);const n=null===(o=null==tn?void 0:tn.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[C]),l((()=>{var n,o,t,e;if(null!=en&&en>-1){const i={components:null===(o=null===(n=C.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[en].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[en]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:c}=p(i);bn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:c})}else if(null!=en&&-1===en){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=p(C);bn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[en]),l((()=>{var n,o,t,e;if(null!=en&&en>-1&&gn){const i={components:null===(o=null===(n=C.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[en].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[en]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:c}=p(i);bn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:c}),fn(!1)}}),[gn]);return n(g,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!vn.imageComponent&&!ln&&n(m,{children:[o(v,{whatsappSpecificPickerMeta:y,mediaComponent:J?vn.imageComponent:rn,updateTemplateImageUrl:function(n,o){var t,i,l,s,a,d,r,p;let c;c=null!=en&&en>-1?{components:null===(i=null===(t=C.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[en].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[en]}:Object.assign({},C);const u=null===(a=null==c?void 0:c.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==c?void 0:c.components[u])){const t=Object.assign(Object.assign({},c.components[u]),{format:o,example:{header_handle:[n]}}),e=[...c.components];e[u]=t,c=Object.assign(Object.assign({},c),{components:e})}if(c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0})),null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=c.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[en]=null!==(p=c.mapping)&&void 0!==p?p:{}),null==x||x(Object.assign({},n)),fn(!0)}else null==x||x(Object.assign({},c))},template:C,variableListForImage:E}),(null==rn?void 0:rn.format)==a.DOCUMENT?o(T,{children:o(s,{labelText:"PDF Name",placeholder:"Enter the name",value:hn,errorMessage:jn||void 0,onBlur:()=>{if(!hn)return;/[^a-zA-Z0-9._]/.test(hn)?Cn("Please enter a valid PDF name"):(Cn(""),null==I||I(hn))},onChangeText:n=>{Cn(""),On(n)}})}):o(t,{})]}),vn.bodyVariables.length>0&&o(h,{containerStyle:{paddingTop:vn.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===(w=vn.descriptionComponents)||void 0===w?void 0:w.map(((n,t)=>o(f,{originalVariableList:null!=en&&en>-1?nn.cards[en]:nn,type:n.type,descriptionComponent:n.component,showVariableModal:V,variableList:B},t))),(null===(P=null===(R=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===R?void 0:R.filter((n=>"URL"===n.type)))||void 0===P?void 0:P.length)>0&&o(h,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(N=null===(A=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===A?void 0:A.filter((n=>on===d.CHATBOT||"URL"===n.type)))||void 0===N?void 0:N.map(((n,t)=>{if("URL"===n.type)return o(O,{variableListIndex:t,CTAoptions:null==y?void 0:y.CTAoptions,button:n,currentVariableList:null!=en&&en>-1?Object.assign({},nn.cards[en]):Object.assign({},nn),updateSelectedURLTemplateBtn:Tn,variableList:B},`${t}_${en}`)})),on===d.CHATBOT&&(null===(S=null===(M=dn[0])||void 0===M?void 0:M.component)||void 0===S?void 0:S.buttons)&&(null===(D=null===(H=null===(_=dn[0])||void 0===_?void 0:_.component)||void 0===H?void 0:H.buttons)||void 0===D?void 0:D.length)>0&&o(c,{backTrackMessage:null===(Q=null==tn?void 0:tn.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(q=null==tn?void 0:tn.backTrackExtra)||void 0===q?void 0:q[1]}),(null===(K=null===(Y=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===Y?void 0:Y.filter((n=>"QUICK_REPLY"===n.type)))||void 0===K?void 0:K.length)>0&&(on!==d.CHATBOT?o(h,{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(c,{backTrackMessage:null===(F=null==tn?void 0:tn.backTrackExtra)||void 0===F?void 0:F[0],setBackTrackMessage:null===(W=null==tn?void 0:tn.backTrackExtra)||void 0===W?void 0:W[1]})),null===(z=null===($=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===$?void 0:$.filter((n=>"QUICK_REPLY"===n.type)))||void 0===z?void 0:z.map(((n,t)=>{if("QUICK_REPLY"===n.type&&on!==d.CHATBOT)return o(O,{variableListIndex:t,QRBoptions:null==y?void 0:y.QRBoptions,button:n,currentVariableList:null!=en&&en>-1?Object.assign({},nn.cards[en]):Object.assign({},nn),updateSelectedQRBTemplateBtn:xn},`${t}_${en}`)})),on===d.CHATBOT&&un&&o(u,{discountCode:null===(X=null==tn?void 0:tn.discountCodeExtra)||void 0===X?void 0:X[0],setDiscountCode:null===(Z=null==tn?void 0:tn.discountCodeExtra)||void 0===Z?void 0:Z[1],variableList:B}),null===(G=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===G?void 0:G.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(b,{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:B,componentType:"BUTTONS"},t)}))]}))},T=j.div`
1
+ import{jsxs as n,jsx as o,Fragment as t}from"react/jsx-runtime";import{cloneDeep as e}from"lodash";import{useState as i,useEffect as l}from"react";import s from"styled-components";import{Input as a}from"../../input/Input.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{POD as r}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as u}from"./BackTrackComponent.js";import{DiscountCodeComponent as m}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as v}from"./EditMediaV2.style.js";import b from"./EditWhatsAppTemplateMediaV2.js";import g from"./VariableConnector.js";import{Container as f}from"./VariableConnectorsPanel.js";import h from"./VariableConnectorWhatsApp.js";import O from"./VariableEditorHeader.js";import j from"./WhatsAppTemplateCardButtonV2.js";const C=s=>{let{template:C,onTemplateChange:x,whatsappSpecificPickerMeta:y,showVariableModal:V,variableList:B,variableListForImage:E,discountCode:k,setDiscountCode:L,fileName:U,setFileName:I}=s;var w,R,P,A,N,M,S,_,H,D,Q,q,Y,K,F,W,$,z,X,Z,G;const J=C.isCarouselType,{originalVariableList:nn,pod:on,extras:tn,selectedCarouselIndex:en,isProductCarouselType:ln}=p(),{descriptionComponents:sn,urlBtns:an,qrbBtns:dn,imageComponent:rn,bodyVariables:pn,headerVariables:cn}=c(C),[un,mn]=i(!1),[vn,bn]=i(-1===en?{descriptionComponents:sn,urlBtns:an,qrbBtns:dn,imageComponent:rn,bodyVariables:pn,headerVariables:cn}:{}),[gn,fn]=i(!1),[hn,On]=i(U),[jn,Cn]=i();function Tn(n,o,t){var i,l,s,a,d,r,p,c,u,m;const v=null!=en&&en>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[en].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[en]}:Object.assign({},C),b=e(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue?n.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=en&&en>-1&&ln){const o=Object.assign({},C).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,e,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!==(e=null==l?void 0:l[t])&&void 0!==e?e:{};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({},C).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=e(C);return l.components=o,l.mapping.cards=i,void(null==x||x(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==h&&h>-1){const e=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==e?void 0:e.length)>0){const i="custom"===o&&"string"==typeof n,l=i?n:"string"!=typeof n&&n.defaultValue?n.defaultValue:"https://d.bik.ai/";let s=e[t];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(c=null===(p=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===p?void 0:p.buttons)&&void 0!==c?c:[]].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[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[t]=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[h]=d,b.components=g}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?mn(!0):(mn(!1),null==L||L(""))}if(null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=b.components,n.mapping.cards[en]=b.mapping,null==x||x(Object.assign({},n))}else null==x||x(b)}function xn(n,o,t){var i,l,s,a,d,r;const p=null!=en&&en>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[en].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[en]}:Object.assign({},C);if(null!=en&&en>-1&&ln){const o=Object.assign({},C).components.map((o=>{var e;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(e=o.cards)||void 0===e?void 0:e.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var e,i,l;if("BUTTONS"===o.type){const s=null===(e=o.buttons)||void 0===e?void 0:e.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==s?void 0:s[t])&&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=e(C);return i.components=o,void(null==x||x(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==c&&c>-1){const o=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((n=>"QUICK_REPLY"===n.type));if(o){let e=o[t];e=Object.assign(Object.assign({},e),{flowId:n.flowId,flowName:n.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((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==e?void 0:e.text)?e:n)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=p.components,null==x||x(Object.assign({},n))}else null==x||x(p)}l((()=>{var n,o;if(null===(n=C.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))mn(!0);else{mn(!1);const n=null===(o=null==tn?void 0:tn.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[C]),l((()=>{var n,o,t,e;if(null!=en&&en>-1){const i={components:null===(o=null===(n=C.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[en].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[en]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);bn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=en&&-1===en){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=c(C);bn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[en]),l((()=>{var n,o,t,e;if(null!=en&&en>-1&&gn){const i={components:null===(o=null===(n=C.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[en].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[en]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);bn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}),fn(!1)}}),[gn]);return n(f,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!vn.imageComponent&&!ln&&n(v,{children:[o(b,{whatsappSpecificPickerMeta:y,mediaComponent:J?vn.imageComponent:rn,updateTemplateImageUrl:function(n,o){var t,i,l,s,a,d,r,p;let c;c=null!=en&&en>-1?{components:null===(i=null===(t=C.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[en].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[en]}:Object.assign({},C);const u=null===(a=null==c?void 0:c.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==c?void 0:c.components[u])){const t=Object.assign(Object.assign({},c.components[u]),{format:o,example:{header_handle:[n]}}),e=[...c.components];e[u]=t,c=Object.assign(Object.assign({},c),{components:e})}if(c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0})),null!=en&&en>-1){const n=e(C);n.components[1].cards[en].components=c.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[en]=null!==(p=c.mapping)&&void 0!==p?p:{}),null==x||x(Object.assign({},n)),fn(!0)}else null==x||x(Object.assign({},c))},template:C,variableListForImage:E}),(null==rn?void 0:rn.format)==d.DOCUMENT?o(T,{children:o(a,{labelText:"PDF Name",placeholder:"Enter the name",value:hn,errorMessage:jn||void 0,onBlur:()=>{if(!hn)return;/[^a-zA-Z0-9._ ]/.test(hn)?Cn("Please enter a valid PDF name"):(Cn(void 0),null==I||I(hn))},onChangeText:n=>{Cn(""),On(n)}})}):o(t,{})]}),vn.bodyVariables.length>0&&o(O,{containerStyle:{paddingTop:vn.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===(w=vn.descriptionComponents)||void 0===w?void 0:w.map(((n,t)=>o(h,{originalVariableList:null!=en&&en>-1?nn.cards[en]:nn,type:n.type,descriptionComponent:n.component,showVariableModal:V,variableList:B},t))),(null===(P=null===(R=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===R?void 0:R.filter((n=>"URL"===n.type)))||void 0===P?void 0:P.length)>0&&o(O,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(N=null===(A=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===A?void 0:A.filter((n=>on===r.CHATBOT||"URL"===n.type)))||void 0===N?void 0:N.map(((n,t)=>{if("URL"===n.type)return o(j,{variableListIndex:t,CTAoptions:null==y?void 0:y.CTAoptions,button:n,currentVariableList:null!=en&&en>-1?Object.assign({},nn.cards[en]):Object.assign({},nn),updateSelectedURLTemplateBtn:Tn,variableList:B},`${t}_${en}`)})),on===r.CHATBOT&&(null===(S=null===(M=dn[0])||void 0===M?void 0:M.component)||void 0===S?void 0:S.buttons)&&(null===(D=null===(H=null===(_=dn[0])||void 0===_?void 0:_.component)||void 0===H?void 0:H.buttons)||void 0===D?void 0:D.length)>0&&o(u,{backTrackMessage:null===(Q=null==tn?void 0:tn.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(q=null==tn?void 0:tn.backTrackExtra)||void 0===q?void 0:q[1]}),(null===(K=null===(Y=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===Y?void 0:Y.filter((n=>"QUICK_REPLY"===n.type)))||void 0===K?void 0:K.length)>0&&(on!==r.CHATBOT?o(O,{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(u,{backTrackMessage:null===(F=null==tn?void 0:tn.backTrackExtra)||void 0===F?void 0:F[0],setBackTrackMessage:null===(W=null==tn?void 0:tn.backTrackExtra)||void 0===W?void 0:W[1]})),null===(z=null===($=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===$?void 0:$.filter((n=>"QUICK_REPLY"===n.type)))||void 0===z?void 0:z.map(((n,t)=>{if("QUICK_REPLY"===n.type&&on!==r.CHATBOT)return o(j,{variableListIndex:t,QRBoptions:null==y?void 0:y.QRBoptions,button:n,currentVariableList:null!=en&&en>-1?Object.assign({},nn.cards[en]):Object.assign({},nn),updateSelectedQRBTemplateBtn:xn},`${t}_${en}`)})),on===r.CHATBOT&&un&&o(m,{discountCode:null===(X=null==tn?void 0:tn.discountCodeExtra)||void 0===X?void 0:X[0],setDiscountCode:null===(Z=null==tn?void 0:tn.discountCodeExtra)||void 0===Z?void 0:Z[1],variableList:B}),null===(G=null!=en&&en>-1?nn.cards[en].buttons:null==nn?void 0:nn.buttons)||void 0===G?void 0:G.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(g,{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:B,componentType:"BUTTONS"},t)}))]}))},T=s.div`
2
2
  padding-top: 24px;
3
3
  padding-left: 10px;
4
4
  padding-right: 10px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.506-beta-pdf",
3
+ "version": "0.0.506-beta-pdf-0.2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",