@bikdotai/bik-component-library 0.0.44-4.beta-2 → 0.0.44-5.beta.1
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/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/modal.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.d.ts +1 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/modal.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.d.ts +1 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),r=require("../../assets/icons/search.svg.js"),c=require("react"),o=require("../../constants/Theme.js"),s=require("../button/Button.js"),n=require("../input/Input.js"),i=require("../modals/styledModal.js"),l=require("../spinner/Spinner.js"),a=require("../tag/Tag.js"),d=require("./collectionScreen.js"),u=require("./productScreen.js"),h=require("./rearrangeScreen.js"),p=require("./reducers.js"),S=require("./searchScreen.js"),x=require("./selectedScreen.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),r=require("../../assets/icons/search.svg.js"),c=require("react"),o=require("../../constants/Theme.js"),s=require("../button/Button.js"),n=require("../input/Input.js"),i=require("../modals/styledModal.js"),l=require("../spinner/Spinner.js"),a=require("../tag/Tag.js"),d=require("./collectionScreen.js"),u=require("./productScreen.js"),h=require("./rearrangeScreen.js"),p=require("./reducers.js"),S=require("./searchScreen.js"),x=require("./selectedScreen.js"),g=require("./style.js"),C=require("./type.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:j,selectedItems:m,onClose:y,visible:b,zIndex:v,exactLimit:P,limit:f,hideCollectionCheckbox:k,hideProductCheckbox:T,outOfStockAction:O=C.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:R,selectProductsFromCustomCollection:I,hideSelectionCount:F,title:q,width:E,renderWithoutModal:D,onClickSave:N,pickerType:w,hideProductVariants:A=!1,startupScreen:$=exports.ScreenName.Collections,rearrangeEnabled:B,selectSingleItem:M=!1}=e,[V,L]=c.useReducer(p.collectionsReducer,{}),[_,z]=c.useState([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes($)?$:exports.ScreenName.Collections),[G,H]=c.useState("grid"),[W,K]=c.useState(""),[U,Y]=c.useState(0),[J,Q]=c.useState(!1),[X,Z]=c.useState(0),[ee,te]=c.useState(""),[re,ce]=c.useState(!1),[oe,se]=c.useState(!1),[ne,ie]=c.useState(),[le,ae]=c.useReducer(p.selectedColectionsReducer,Object.keys(m).length>0?m:{}),de=c.useRef(null);c.useEffect((()=>{Q(!0),se(!0),e.collectionFetcher(U,j).then((e=>{L({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Q(!1),Y((e=>e+1)),se(!1)})).catch()}),[]),c.useEffect((()=>{let e=0;Object.keys(le||[]).forEach((t=>{var r;Object.keys((null===(r=le[t])||void 0===r?void 0:r.products)||[]).forEach((r=>{var c,o;Object.keys((null===(o=null===(c=le[t].products)||void 0===c?void 0:c[r])||void 0===o?void 0:o.variants)||[]).forEach((()=>{e+=1}))}))})),Z(e)})),c.useEffect((()=>{var t;W&&!(null===(t=null==V?void 0:V[W])||void 0===t?void 0:t.products)&&(Q(!0),e.productFetcher(W,j).then((e=>{Object.keys(e).length&&L({type:"productsFetched",data:{collectionId:W,products:e}}),Q(!1)})).catch())}),[W]),c.useEffect((()=>{const t=setTimeout((()=>{"rearrange"!==_&&(ee.length?(ce(!0),e.searchFetcher(j,ee).then((e=>{ie(Object.assign({},e)),z("searchProducts"),Q(!1),ce(!1)}))):z("collections"))}),800);return()=>clearTimeout(t)}),[ee]),c.useEffect((()=>{N&&(e.onAdd(le,X),ue())}),[N]),c.useEffect((()=>{M&&Object.keys(le||{}).length&&X&&(e.onAdd(le,X),ue())}),[M,le,X]);const ue=()=>{ae({type:"reset",data:{}})},he=t.jsxs(g.ContainerStyle,{children:[e.postHeader&&t.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:e.postHeader})),!e.hideGlobalSearch&&t.jsx(t.Fragment,{children:("collections"===_||"searchProducts"===_)&&t.jsx("div",Object.assign({style:{padding:D?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t.jsx(n.Input,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>re?t.jsx(l.Spinner,{size:"small",color:o.COLORS.content.primary}):t.jsx(r.default,{})},id:"listInput",height:"24px",type:"text",value:ee,onChangeText:e=>{e.length&&e.trim().length?te(e):te("")}})}))}),t.jsxs(g.ScrollContainerStyle,Object.assign({ref:de},{children:["collections"===_&&t.jsx(d.CollectionsScreen,{customCollectionRestriction:e.customCollectionRestriction,dataLoading:oe,collections:V,selectedCollectionsDispatch:ae,setCollectionId:K,setScreen:z,selectedCollections:le,collectionFetcher:e.collectionFetcher,storeId:j,collectionsDispatch:L,setSaveDisabled:Q,pagingControls:{curPage:U,setCurPage:Y},hideCollectionCheckbox:k,renderWithoutModal:D,pickerType:w}),"products"===_&&W&&t.jsx(p.CollectionIdContext.Provider,Object.assign({value:W},{children:t.jsx(u.ProductsScreen,{hideInCollectionSearch:e.hideInCollectionSearch,customCollectionRestriction:e.customCollectionRestriction,productFetcher:e.productFetcher,setScreen:z,storeId:j,data:V[W],collectionsDispatch:L,selectedCollectionsDispatch:ae,selectedData:le,setSaveDisabled:Q,searchInCollectionFetcher:e.searchInCollectionFetcher,hideProductCheckbox:T,outOfStockAction:O,hideVariantCheckbox:R,selectProductsFromCustomCollection:I,renderWithoutModal:D,pickerType:w,hideProductVariants:A})})),"view"===_&&t.jsx(x.SelectedScreen,{selectedCollections:le||{},selectedCollectionsDispatch:ae,setScreen:z,collections:V}),"rearrange"===_&&t.jsx(h.RearrangeScreen,{selectedCollections:le||{},selectedCollectionsDispatch:ae,setScreen:z,outOfStockAction:O,rearrangeViewType:"grid"===G?"list":"grid",scrollContainerRef:de}),"searchProducts"===_&&t.jsx(S.SearchScreen,{customCollectionRestriction:e.customCollectionRestriction,selectedCollections:le||{},searchedCollections:ne||{},selectedCollectionsDispatch:ae,setScreen:z,collections:V,onBackPress:()=>{te(""),ie({})},pickerType:w,hideProductCheckbox:T,hideProductVariants:A,hideVariantCheckbox:R})]}))]});return t.jsx(t.Fragment,{children:D?he:t.jsx(i.StyledModal,Object.assign({zIndex:v,open:b,onClose:()=>{null==y||y(),ue()},headingTitle:q||("collections"===_||"products"===_?"Select Products":"view"===_?"Selected Products":"searchProducts"===_?"Searched Products":"rearrange"===_?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:E||"480px"},headerRightCustomElement:"rearrange"===_?(console.log("ignore:",H),t.jsx(t.Fragment,{})):t.jsx(t.Fragment,{}),primaryButton:{buttonText:J?"Loading...":_===exports.ScreenName.RearrangeProducts?"Done":"Add",disabled:J||X<1||P&&X<P||!P&&f&&X>f||!1,onClick:()=>{e.onAdd(le,X),ue()}},footerLeftCustomElement:F?t.jsx(t.Fragment,{}):P&&X>P?t.jsx(a.Tag,{tagText:`You can only select ${P} products`,type:"negative"}):f&&X>f?t.jsx(a.Tag,{tagText:`You can only select ${f} products`,type:"negative"}):X>0?t.jsx(s.Button,{onClick:()=>{z(B?exports.ScreenName.RearrangeProducts:exports.ScreenName.SelectedProducts)},buttonText:P?`${X}/${P} products selected`:`${X} products selected`,buttonType:["rearrange","view"].includes(_)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(_)}):t.jsx(s.Button,{disabled:!0,buttonText:P?`${X}/${P} products selected`:`${X} products selected`,buttonType:"tertiaryGray"})},{children:he}))})};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
3
2
|
import { WhatsAppPickerMeta } from "../../template-preview";
|
|
4
3
|
import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
|
|
@@ -22,5 +21,5 @@ export interface CarouselProduct {
|
|
|
22
21
|
productName: string;
|
|
23
22
|
productImage: string;
|
|
24
23
|
}
|
|
25
|
-
declare const EditWhatsAppCarouselTemplateV2:
|
|
24
|
+
declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
26
25
|
export default EditWhatsAppCarouselTemplateV2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../context/templateModalContext.js"),i=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:C,whatsappSpecificPickerMeta:j,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,D,I,w,R,A,P,S;const N=f.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:Y,isProductCarouselType:F}=l.useTemplateModalContext(),{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=s.getAllDataFromTemplateComponent(f),[G,J]=n.useState(!1),[Z,ee]=n.useState(-1===Y?{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{});console.log("templateComponentData : ",Z);const[te,ne]=n.useState(!1);function oe(e,n,o){var l,i,s,a,d,r,p,c;const u=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Y&&Y>-1&&F){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,l;if("BUTTONS"===e.type){const i=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==i?void 0:i[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(l=e.buttons)||void 0===l?void 0:l.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==C||C(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const l="custom"===n&&"string"==typeof e,i=l?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[i]}),console.log("templateCopy test: ",o,s,n,e);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=l?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=u.components,e.mapping.cards[Y]=u.mapping,console.log("templateCopy: ",e),null==C||C(Object.assign({},e))}else null==C||C(u)}function le(e,n,o){var l,i,s,a,d,r;const p=null!=Y&&Y>-1?{components:null===(l=Object.assign({},f).components[1].cards)||void 0===l?void 0:l[Y].components,mapping:null===(i=Object.assign({},f).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},f);if(null!=Y&&Y>-1&&F){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,l,i;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(l=null==s?void 0:s[o])&&void 0!==l?l:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(i=t.buttons)||void 0===i?void 0:i.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),l=t.cloneDeep(f);return l.components=n,void(null==C||C(Object.assign({},l)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const l=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),i=Object.assign(Object.assign({},p.components[c]),{buttons:l}),s=[...p.components];s[c]=i,p.components=s}}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,console.log("templateCopy 2: ",e),null==C||C(Object.assign({},e))}else null==C||C(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(t=null==Q?void 0:Q.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",Z)}),[Z]),n.useEffect((()=>{var e,t,n,o;if(null!=Y&&Y>-1){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i}=s.getAllDataFromTemplateComponent(f);ee({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:l,headerVariables:i})}}),[Y]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1&&te){const l={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}=s.getAllDataFromTemplateComponent(l);ee({descriptionComponents:i,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:c}),ne(!1)}}),[te]);const ie=i.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!F&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:j,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,n){var o,l,i,s,a;let d;d=null!=Y&&Y>-1?{components:null===(l=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===l?void 0:l[Y].components,mapping:null===(s=null===(i=null==f?void 0:f.mapping)||void 0===i?void 0:i.cards)||void 0===s?void 0:s[Y]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==C||C(Object.assign({},e)),ne(!0)}else null==C||C(Object.assign({},d))},template:f,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.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=Z.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?M.cards[Y]:M,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==j?void 0:j.CTAoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedURLTemplateBtn:oe,variableList:O},`${n}_${Y}`)})),(null===(q=null===(k=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(D=null==Q?void 0:Q.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==j?void 0:j.QRBoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedQRBTemplateBtn:le},`${n}_${Y}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,l,i;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(l=t.buttonVariable)&&void 0!==l?l:"",type:"string",isEditableVariable:!0,index:null!==(i=t.index)&&void 0!==i?i:0},showVariableModal:!0,variableList:ie,componentType:"BUTTONS"},n)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:j,whatsappSpecificPickerMeta:C,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,B,E,L,U,k,q,I,w,D,R,A,P,S;const N=f.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:Y,isProductCarouselType:F}=i.useTemplateModalContext(),{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=s.getAllDataFromTemplateComponent(f),[G,J]=n.useState(!1),[Z,ee]=n.useState(-1===Y?{descriptionComponents:H,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{}),[te,ne]=n.useState(!1);function oe(e,n,o){var i,l,s,a,d,r,u,c;const p=null!=Y&&Y>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Y].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Y]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Y&&Y>-1&&F){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,i;if("BUTTONS"===e.type){const l=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==l?void 0:l[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,void(null==j||j(Object.assign({},n)))}const v=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==p?void 0:p.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const c=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},p.components[v]),{buttons:c}),b=null===(u=p.mapping)||void 0===u?void 0:u.buttons;b&&b.length>0&&(b[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},p.mapping),{buttons:b});p.mapping=g;const f=[...p.components];f[v]=m,p.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(c=e.placeHolder)||void 0===c?void 0:c.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,null==j||j(Object.assign({},e))}else null==j||j(p)}function ie(e,n,o){var i,l,s,a,d,r;const u=null!=Y&&Y>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Y].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Y]}:Object.assign({},f);if(null!=Y&&Y>-1&&F){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,i,l;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=t.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),i=t.cloneDeep(f);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(s=null==u?void 0:u.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const 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==n?void 0:n.text)?n:e)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),s=[...u.components];s[c]=l,u.components=s}}if(null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=u.components,e.mapping.cards[Y]=u.mapping,null==j||j(Object.assign({},e))}else null==j||j(u)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(t=null==Q?void 0:Q.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{var e,t,n,o;if(null!=Y&&Y>-1){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ee({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(f);ee({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Y]),n.useEffect((()=>{var e,t,n,o;if(null!=Y&&Y>-1&&te){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Y].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Y]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ee({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),ne(!1)}}),[te]);const le=l.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!F&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,n){var o,i,l,s,a;let d;d=null!=Y&&Y>-1?{components:null===(i=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Y].components,mapping:null===(s=null===(l=null==f?void 0:f.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[Y]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=t.cloneDeep(f);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==j||j(Object.assign({},e)),ne(!0)}else null==j||j(Object.assign({},d))},template:f,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.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=Z.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?M.cards[Y]:M,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(E=null===(B=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedURLTemplateBtn:oe,variableList:O},`${n}_${Y}`)})),(null===(q=null===(k=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(w=null==Q?void 0:Q.backTrackExtra)||void 0===w?void 0:w[1]})),null===(R=null===(D=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===D?void 0:D.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=Y&&Y>-1?M.cards[Y]:M,updateSelectedQRBTemplateBtn:ie},`${n}_${Y}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Y&&Y>-1?M.cards[Y].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,i,l;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(i=t.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=t.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:le,componentType:"BUTTONS"},n)}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as n}from"react";import{COLORS as l}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as C}from"./rearrangeScreen.js";import{collectionsReducer as b,selectedColectionsReducer as y,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as S}from"./searchScreen.js";import{SelectedScreen as f}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as j}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";var k;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(k||(k={}));const T=T=>{const{storeId:I,selectedItems:O,onClose:R,visible:D,zIndex:F,exactLimit:w,limit:E,hideCollectionCheckbox:$,hideProductCheckbox:A,outOfStockAction:V=x.BLUR,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,hideSelectionCount:M,title:z,width:G,renderWithoutModal:H,onClickSave:W,pickerType:Y,hideProductVariants:K=!1,startupScreen:U=k.Collections,rearrangeEnabled:q,selectSingleItem:J=!1}=T,[N,Q]=r(b,{}),[X,Z]=s([k.Collections,k.RearrangeProducts].includes(U)?U:k.Collections),[_,ee]=s("grid"),[te,oe]=s(""),[ce,re]=s(0),[se,ie]=s(!1),[ne,le]=s(0),[de,ae]=s(""),[ue,he]=s(!1),[pe,me]=s(!1),[ge,Ce]=s(),[be,ye]=r(y,Object.keys(O).length>0?O:{}),ve=i(null);n((()=>{ie(!0),me(!0),T.collectionFetcher(ce,I).then((e=>{Q({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ie(!1),re((e=>e+1)),me(!1)})).catch()}),[]),n((()=>{let e=0;Object.keys(be||[]).forEach((t=>{var o;Object.keys((null===(o=be[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=be[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),le(e)})),n((()=>{var e;te&&!(null===(e=null==N?void 0:N[te])||void 0===e?void 0:e.products)&&(ie(!0),T.productFetcher(te,I).then((e=>{Object.keys(e).length&&Q({type:"productsFetched",data:{collectionId:te,products:e}}),ie(!1)})).catch())}),[te]),n((()=>{const e=setTimeout((()=>{"rearrange"!==X&&(de.length?(he(!0),T.searchFetcher(I,de).then((e=>{Ce(Object.assign({},e)),Z("searchProducts"),ie(!1),he(!1)}))):Z("collections"))}),800);return()=>clearTimeout(e)}),[de]),n((()=>{W&&(T.onAdd(be,ne),Se())}),[W]),n((()=>{J&&Object.keys(be||{}).length&&ne&&(T.onAdd(be,ne),Se())}),[J,be,ne]);const Se=()=>{ye({type:"reset",data:{}})},fe=e(P,{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===X||"searchProducts"===X)&&t("div",Object.assign({style:{padding:H?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ue?t(h,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:de,onChangeText:e=>{e.length&&e.trim().length?ae(e):ae("")}})}))}),e(j,Object.assign({ref:ve},{children:["collections"===X&&t(m,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:pe,collections:N,selectedCollectionsDispatch:ye,setCollectionId:oe,setScreen:Z,selectedCollections:be,collectionFetcher:T.collectionFetcher,storeId:I,collectionsDispatch:Q,setSaveDisabled:ie,pagingControls:{curPage:ce,setCurPage:re},hideCollectionCheckbox:$,renderWithoutModal:H,pickerType:Y}),"products"===X&&te&&t(v.Provider,Object.assign({value:te},{children:t(g,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:Z,storeId:I,data:N[te],collectionsDispatch:Q,selectedCollectionsDispatch:ye,selectedData:be,setSaveDisabled:ie,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:A,outOfStockAction:V,hideVariantCheckbox:B,selectProductsFromCustomCollection:L,renderWithoutModal:H,pickerType:Y,hideProductVariants:K})})),"view"===X&&t(f,{selectedCollections:be||{},selectedCollectionsDispatch:ye,setScreen:Z,collections:N}),"rearrange"===X&&t(C,{selectedCollections:be||{},selectedCollectionsDispatch:ye,setScreen:Z,outOfStockAction:V,rearrangeViewType:"grid"===_?"list":"grid",scrollContainerRef:ve}),"searchProducts"===X&&t(S,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:be||{},searchedCollections:ge||{},selectedCollectionsDispatch:ye,setScreen:Z,collections:N,onBackPress:()=>{ae(""),Ce({})},pickerType:Y,hideProductCheckbox:A,hideProductVariants:K,hideVariantCheckbox:B})]}))]});return t(o,{children:H?fe:t(u,Object.assign({zIndex:F,open:D,onClose:()=>{null==R||R(),Se()},headingTitle:z||("collections"===X||"products"===X?"Select Products":"view"===X?"Selected Products":"searchProducts"===X?"Searched Products":"rearrange"===X?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:G||"480px"},headerRightCustomElement:"rearrange"===X?(console.log("ignore:",ee),t(o,{})):t(o,{}),primaryButton:{buttonText:se?"Loading...":X===k.RearrangeProducts?"Done":"Add",disabled:se||ne<1||w&&ne<w||!w&&E&&ne>E||!1,onClick:()=>{T.onAdd(be,ne),Se()}},footerLeftCustomElement:M?t(o,{}):w&&ne>w?t(p,{tagText:`You can only select ${w} products`,type:"negative"}):E&&ne>E?t(p,{tagText:`You can only select ${E} products`,type:"negative"}):t(d,ne>0?{onClick:()=>{Z(q?k.RearrangeProducts:k.SelectedProducts)},buttonText:w?`${ne}/${w} products selected`:`${ne} products selected`,buttonType:["rearrange","view"].includes(X)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(X)}:{disabled:!0,buttonText:w?`${ne}/${w} products selected`:`${ne} products selected`,buttonType:"tertiaryGray"})},{children:fe}))})};export{T as ProductPickerModal,k as ScreenName};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
3
2
|
import { WhatsAppPickerMeta } from "../../template-preview";
|
|
4
3
|
import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
|
|
@@ -22,5 +21,5 @@ export interface CarouselProduct {
|
|
|
22
21
|
productName: string;
|
|
23
22
|
productImage: string;
|
|
24
23
|
}
|
|
25
|
-
declare const EditWhatsAppCarouselTemplateV2:
|
|
24
|
+
declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
26
25
|
export default EditWhatsAppCarouselTemplateV2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,D,_,M;const Q=C.isCarouselType,{originalVariableList:q,pod:Y,extras:H,selectedCarouselIndex:K,isProductCarouselType:W}=s(),{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=d(C),[Z,oo]=e(!1),[no,to]=e(-1===K?{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{});console.log("templateComponentData : ",no);const[eo,io]=e(!1);function lo(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=K&&K>-1&&W){const o=Object.assign({},C).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o?o.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?oo(!0):(oo(!1),null==B||B(""))}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=u.components,o.mapping.cards[K]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function so(o,n,e){var i,l,s,a,d,r;const p=null!=K&&K>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[K]}:Object.assign({},C);if(null!=K&&K>-1&&W){const n=Object.assign({},C).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=p.components,o.mapping.cards[K]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))oo(!0);else{oo(!1);const o=null===(n=null==H?void 0:H.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",no)}),[no]),i((()=>{var o,n,t,e;if(null!=K&&K>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].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[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=K&&-1===K){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);to({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[K]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",K),null!=K&&K>-1&&eo){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[K].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[K]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);to({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),io(!1)}}),[eo]);const ao=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!no.imageComponent&&!W&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:Q?no.imageComponent:z,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=K&&K>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[K].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[K]}:Object.assign({},C);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=K&&K>-1){const o=t(C);o.components[1].cards[K].components=d.components,o.mapping.cards[K]=d.mapping,null==j||j(Object.assign({},o)),io(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(no.bodyVariables.length>0||no.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:no.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=no.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=K&&K>-1?q.cards[K]:q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedURLTemplateBtn:lo,variableList:T},`${t}_${K}`)})),(null===(R=null===(w=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(Y!==l.CHATBOT?n(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):n(r,{backTrackMessage:null===(N=null==H?void 0:H.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==H?void 0:H.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedQRBTemplateBtn:so},`${t}_${K}`)})),Y===l.CHATBOT&&Z&&n(p,{discountCode:null===(D=null==H?void 0:H.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(_=null==H?void 0:H.discountCodeExtra)||void 0===_?void 0:_[1],variableList:T}),null===(M=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===M?void 0:M.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ao,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|
|
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 s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:j,onTemplateChange:C,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,k,I,w,R,N,A,P,S,_,M,Q;const D=j.isCarouselType,{originalVariableList:q,pod:Y,extras:H,selectedCarouselIndex:K,isProductCarouselType:W}=l(),{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=d(j),[Z,nn]=e(!1),[on,tn]=e(-1===K?{descriptionComponents:$,urlBtns:F,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{}),[en,sn]=e(!1);function ln(n,o,e){var i,s,l,a,d,r,p,c;const u=null!=K&&K>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[K]}:Object.assign({},j),m="custom"===o&&"string"==typeof n?n:"string"!=typeof n?n.defaultValue:"";if(null!=K&&K>-1&&W){const n=Object.assign({},j).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 s=null===(o=n.buttons)||void 0===o?void 0:o.filter((n=>"URL"===n.type));let l=null!==(t=null==s?void 0:s[e])&&void 0!==t?t:{};l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=n.buttons)||void 0===i?void 0:i.map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==l?void 0:l.text)?l:n));return Object.assign(Object.assign({},n),{buttons:a})}return n}))})))}):n})),o=t(j);return o.components=n,void(null==C||C(Object.assign({},o)))}const v=null==u?void 0:u.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==v&&v>-1){const t=null===(l=null==u?void 0:u.components[v].buttons)||void 0===l?void 0:l.filter((n=>"URL"===n.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof n,s=i?n:"string"!=typeof n?n.defaultValue:"";let l=t[e];l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[s]});const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==l?void 0:l.text)?l:n)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(c=n.placeHolder)||void 0===c?void 0:c.slice(2,-2))?nn(!0):(nn(!1),null==B||B(""))}if(null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=u.components,n.mapping.cards[K]=u.mapping,null==C||C(Object.assign({},n))}else null==C||C(u)}function an(n,o,e){var i,s,l,a,d,r;const p=null!=K&&K>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[K].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[K]}:Object.assign({},j);if(null!=K&&K>-1&&W){const o=Object.assign({},j).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,s;if("BUTTONS"===o.type){const l=null===(t=o.buttons)||void 0===t?void 0:t.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==l?void 0:l[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:n.flowId,flowName:n.flowName});const d=null===(s=o.buttons)||void 0===s?void 0:s.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(j);return i.components=o,void(null==C||C(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===(l=null==p?void 0:p.components[c].buttons)||void 0===l?void 0:l.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=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==t?void 0:t.text)?t:n)),s=Object.assign(Object.assign({},p.components[c]),{buttons:i}),l=[...p.components];l[c]=s,p.components=l}}if(null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=p.components,n.mapping.cards[K]=p.mapping,null==C||C(Object.assign({},n))}else null==C||C(p)}i((()=>{var n,o;if(null===(n=j.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))nn(!0);else{nn(!1);const n=null===(o=null==H?void 0:H.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[j]),i((()=>{var n,o,t,e;if(null!=K&&K>-1){const i={components:null===(o=null===(n=j.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[K].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);tn({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=K&&-1===K){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:s}=d(j);tn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:s})}}),[K]),i((()=>{var n,o,t,e;if(null!=K&&K>-1&&en){const i={components:null===(o=null===(n=j.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[K].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[K]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);tn({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),sn(!1)}}),[en]);const dn=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return n(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!on.imageComponent&&!W&&o(c,{children:o(u,{whatsappSpecificPickerMeta:O,mediaComponent:D?on.imageComponent:z,updateTemplateImageUrl:function(n,o){var e,i,s,l,a;let d;d=null!=K&&K>-1?{components:null===(i=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[K].components,mapping:null===(l=null===(s=null==j?void 0:j.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[K]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[n]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=K&&K>-1){const n=t(j);n.components[1].cards[K].components=d.components,n.mapping.cards[K]=d.mapping,null==C||C(Object.assign({},n)),sn(!0)}else null==C||C(Object.assign({},d))},template:j,variableListForImage:x})}),(on.bodyVariables.length>0||on.headerVariables.length>0)&&o(g,{containerStyle:{paddingTop:on.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=on.descriptionComponents)||void 0===L?void 0:L.map(((n,t)=>o(b,{originalVariableList:null!=K&&K>-1?q.cards[K]:q,type:n.type,descriptionComponent:n.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===E?void 0:E.filter((n=>"URL"===n.type)))||void 0===U?void 0:U.length)>0&&o(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(k=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===k?void 0:k.filter((n=>"URL"===n.type)))||void 0===I?void 0:I.map(((n,t)=>{if("URL"===n.type)return o(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:n,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedURLTemplateBtn:ln,variableList:T},`${t}_${K}`)})),(null===(R=null===(w=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===w?void 0:w.filter((n=>"QUICK_REPLY"===n.type)))||void 0===R?void 0:R.length)>0&&(Y!==s.CHATBOT?o(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(r,{backTrackMessage:null===(N=null==H?void 0:H.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==H?void 0:H.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===P?void 0:P.filter((n=>"QUICK_REPLY"===n.type)))||void 0===S?void 0:S.map(((n,t)=>{if("QUICK_REPLY"===n.type)return o(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:n,currentVariableList:null!=K&&K>-1?q.cards[K]:q,updateSelectedQRBTemplateBtn:an},`${t}_${K}`)})),Y===s.CHATBOT&&Z&&o(p,{discountCode:null===(_=null==H?void 0:H.discountCodeExtra)||void 0===_?void 0:_[0],setDiscountCode:null===(M=null==H?void 0:H.discountCodeExtra)||void 0===M?void 0:M[1],variableList:T}),null===(Q=null!=K&&K>-1?q.cards[K].buttons:null==q?void 0:q.buttons)||void 0===Q?void 0:Q.map(((n,t)=>{var e,i,s;if("COPY_CODE"===n.type)return o(m,{index:t,variable:{variableName:null!==(e=n.text)&&void 0!==e?e:"",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(s=n.index)&&void 0!==s?s:0},showVariableModal:!0,variableList:dn,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|