@bikdotai/bik-component-library 0.0.509-beta.1 → 0.0.509-beta.carousel-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/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- 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/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/package.json +1 -1
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),r=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),n=require("lodash"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var o=require("../../button/Button.js"),d=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var c=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var u=require("../../TypographyStyle.js"),p=require("../../product-picker-v2/modal.js"),h=require("../Badge/index.js"),m=require("../context/templateModalContext.js"),v=require("./EditWhatsAppTemplateV2.js"),g=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var j=require("../../template-preview/models/WhatsAppTemplate.js");exports.default=x=>{let{template:y,whatsappSpecificPickerMeta:f,showVariableModal:b,variableList:C,variableListForImage:O,discountCode:I,setDiscountCode:q}=x;var S,w;const{selectedCarouselIndex:P,setTemplate:k,pickerConf:T,isProductCarouselType:L,pod:B,cardCount:R,carouselProducts:V,setCarouselProducts:A,isError:E,cardImages:M,disableEditVariable:D,onDeleteSelectedProducts:F,setSelectedCarouselIndex:N,sliderRef:W}=m.useTemplateModalContext(),[_,$]=a.useState(-1==P?"First Message (Step 1/2)":L?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[z,G]=a.useState(!1),[H,J]=a.useState(!1),[K,Q]=a.useState(!1);a.useEffect((()=>{$(-1==P?"First Message (Step 1/2)":L?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[P]);return e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=P&&P>=0&&e.jsx(d.IconButton,{Icon:t.default,onClick:()=>{null==N||N(-1)}}),e.jsx(u.TitleMedium,Object.assign({style:{marginLeft:10}},{children:_})),P!==(null!=R?R:0)-1&&e.jsx(o.Button,{buttonText:"Next",onClick:()=>{var e;console.log("sliderRef",W),null===(e=null==W?void 0:W.current)||void 0===e||e.slickNext(),null==N||N((e=>e+1))}})]})),L&&(null!==(S=null==V?void 0:V.length)&&void 0!==S?S:0)>0&&null!=P&&P>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),r=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),n=require("lodash"),a=require("react"),s=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var o=require("../../button/Button.js"),d=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var c=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var u=require("../../TypographyStyle.js"),p=require("../../product-picker-v2/modal.js"),h=require("../Badge/index.js"),m=require("../context/templateModalContext.js"),v=require("./EditWhatsAppTemplateV2.js"),g=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var j=require("../../template-preview/models/WhatsAppTemplate.js");exports.default=x=>{let{template:y,whatsappSpecificPickerMeta:f,showVariableModal:b,variableList:C,variableListForImage:O,discountCode:I,setDiscountCode:q}=x;var S,w;const{selectedCarouselIndex:P,setTemplate:k,pickerConf:T,isProductCarouselType:L,pod:B,cardCount:R,carouselProducts:V,setCarouselProducts:A,isError:E,cardImages:M,disableEditVariable:D,onDeleteSelectedProducts:F,setSelectedCarouselIndex:N,sliderRef:W}=m.useTemplateModalContext(),[_,$]=a.useState(-1==P?"First Message (Step 1/2)":L?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[z,G]=a.useState(!1),[H,J]=a.useState(!1),[K,Q]=a.useState(!1);a.useEffect((()=>{$(-1==P?"First Message (Step 1/2)":L?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[P]);return e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=P&&P>=0&&e.jsx(d.IconButton,{Icon:t.default,onClick:()=>{null==N||N(-1)}}),e.jsx(u.TitleMedium,Object.assign({style:{marginLeft:10}},{children:_})),P!==(null!=R?R:0)-1&&e.jsx(o.Button,{buttonText:"Next",onClick:()=>{var e;console.log("sliderRef",W),null===(e=null==W?void 0:W.current)||void 0===e||e.slickNext(),null==N||N((e=>e+1))}})]})),L&&(null!==(S=null==V?void 0:V.length)&&void 0!==S?S:0)>0&&null!=P&&P>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(g.ProductBox,{editItem:()=>{1===(null==V?void 0:V.length)&&"variable"===V[0].name?Q(!0):G(!z)},cardBody:1===(null==V?void 0:V.length)&&"variable"===V[0].name?`${V[0].productName}`:`${null==V?void 0:V.length} Products Selected`,hideIcon:1===(null==V?void 0:V.length)&&"variable"===V[0].name,deleteItem:()=>{var e;if(1===(null==V?void 0:V.length)&&"variable"===V[0].name)return void(null==A||A([]));const t=n.cloneDeep(Object.assign({},y));t&&(M&&M.length>0?null==M||M.forEach(((e,l)=>{var r;t.components[1].cards[l].components[0].example.header_handle=[null!==(r=M[l])&&void 0!==r?r:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==k||k(t)),null==A||A([]),null==F||F()}}),V&&(null==V?void 0:V.length)>0&&"variable"!=V[0].name&&e.jsx(o.Button,{disabled:(null!==(w=null==V?void 0:V.length)&&void 0!==w?w:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{J(!0),G(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!D&&L&&0===(null==V?void 0:V.length)&&null!=P&&P>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(u.TitleRegular,{children:"Product(s)"}),e.jsx(u.BodySecondary,{children:`Select ${null!=R?R:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:E?16:12,marginRight:E?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:E?`2px dashed ${c.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:E?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(i.default,{width:18,height:18,color:c.COLORS.content.secondary})})),onClick:e=>{G(!0)}}),B===j.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(u.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(o.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:E?`2px dashed ${c.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:E?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(i.default,{width:18,height:18,color:c.COLORS.content.secondary})})),onClick:e=>{Q(!0)}})]})]})),E&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(h.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!L&&(null!=P?P:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:c.COLORS.surface.hovered,alignItems:"center"}},{children:[(null!=P?P:-1)>0&&e.jsx(d.IconButton,{Icon:l.default,color:c.COLORS.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==W?void 0:W.current)||void 0===e||e.slickPrev(),null==N||N((e=>e-1))}}),e.jsx(u.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:c.COLORS.content.secondary},{children:`Card ${(null!=P?P:0)+1}/${R}`})),P!==(null!=R?R:0)-1&&e.jsx(d.IconButton,{Icon:r.default,color:c.COLORS.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==W?void 0:W.current)||void 0===e||e.slickNext(),null==N||N((e=>e+1))}})]})),e.jsx(v.default,{whatsappSpecificPickerMeta:f,template:y,onTemplateChange:e=>{null==k||k(e)},showVariableModal:b,variableList:C,variableListForImage:O,discountCode:I,setDiscountCode:q}),z&&T&&e.jsx(p.ProductPickerModal,{zIndex:200,startupScreen:H?p.ScreenName.RearrangeProducts:p.ScreenName.Collections,rearrangeEnabled:!0,storeId:T.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,r=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),r in t[e].products||(t[e].products[r]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[r].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=V?V:[]),collectionFetcher:T.fetchCollections,productFetcher:T.fetchProducts,onAdd:(e,t)=>{var l,r,i,a,s,o;J(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const n=e[t].products;if(void 0!==n&&Object.keys(n).length)for(const e of Object.keys(n)){const c=n[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:h,quantity:m,displayOrder:v}=c[u],g={name:p,image:null!==(r=null!=h?h:null===(l=n[e])||void 0===l?void 0:l.image)&&void 0!==r?r:"",quantity:m,variantId:u,productId:e,displayOrder:v,collectionId:t,productName:null!==(a=null===(i=n[e])||void 0===i?void 0:i.name)&&void 0!==a?a:"",productImage:null!==(o=null===(s=n[e])||void 0===s?void 0:s.image)&&void 0!==o?o:""};d.push(g)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=n.cloneDeep(Object.assign({},y));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==M?void 0:M[t])&&void 0!==l?l:""]})),null==k||k(p)),null==A||A(c),G(!1)},searchInCollectionFetcher:T.searchInCollection,searchFetcher:T.searchProducts,visible:z,onClose:()=>{G(!1)},exactLimit:null!=R?R:1}),K&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=C?C:[],showVariable:K,setShowVariable:Q,placeholder:"Add a variable",customTrigger:e=>{null==A||A([{name:"variable",productName:e.actualValue}])}})]}))};
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
padding-right: 10px;
|
|
5
5
|
margin-bottom: 8px;
|
|
6
6
|
line-height: normal;
|
|
7
|
-
`;exports.default=o=>{let{template:h,onTemplateChange:C,whatsappSpecificPickerMeta:T,showVariableModal:x,variableList:y,variableListForImage:B,discountCode:E,setDiscountCode:V,fileName:k,setFileName:L}=o;var q,D,U,I,P,R,w,A,M,N,S,_,F,H,Q,Y,K,W,$,X,z;const G=h.isCarouselType,{originalVariableList:J,pod:Z,extras:ee,selectedCarouselIndex:ne,isProductCarouselType:te}=a.useTemplateModalContext(),{descriptionComponents:oe,urlBtns:ie,qrbBtns:le,imageComponent:se,bodyVariables:ae,headerVariables:de}=d.getAllDataFromTemplateComponent(h),[re,ue]=t.useState(!1),[pe,ce]=t.useState(-1===ne?{descriptionComponents:oe,urlBtns:ie,qrbBtns:le,imageComponent:se,bodyVariables:ae,headerVariables:de}:{}),[ve,me]=t.useState(!1),[be,ge]=t.useState(k),[fe,je]=t.useState();function he(e,t,o){var i,l,s,a,d,r,u,p,c,v;const m=null!=ne&&ne>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ne].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ne]}: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!=ne&&ne>-1&&te){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==C||C(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))?ue(!0):(ue(!1),null==V||V(""))}if(null!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].components=b.components,e.mapping.cards[ne]=b.mapping,null==C||C(Object.assign({},e))}else null==C||C(b)}function Oe(e,t,o){var i,l,s,a,d,r;const u=null!=ne&&ne>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ne].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ne]}:Object.assign({},h);if(null!=ne&&ne>-1&&te){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==C||C(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!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].components=u.components,null==C||C(Object.assign({},e))}else null==C||C(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))))ue(!0);else{ue(!1);const e=null===(n=null==ee?void 0:ee.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[h]),t.useEffect((()=>{var e,n,t,o;if(null!=ne&&ne>-1){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ne].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[ne]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);ce({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p})}else if(null!=ne&&-1===ne){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=d.getAllDataFromTemplateComponent(h);ce({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ne]),t.useEffect((()=>{var e,n,t,o;if(null!=ne&&ne>-1&&ve){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ne].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[ne]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);ce({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}),me(!1)}}),[ve]);return e.jsxs(b.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!pe.imageComponent&&!te&&e.jsxs(c.EditTemplateMediaContainer,{children:[e.jsx(v.default,{whatsappSpecificPickerMeta:T,mediaComponent:G?pe.imageComponent:se,updateTemplateImageUrl:function(e,t){var o,i,l,s,a,d,r,u;let p;p=null!=ne&&ne>-1?{components:null===(i=null===(o=h.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ne].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[ne]}: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!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].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[ne]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==C||C(Object.assign({},e)),me(!0)}else null==C||C(Object.assign({},p))},template:h,variableListForImage:B}),(null==se?void 0:se.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(O,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:be,errorMessage:fe||void 0,onBlur:()=>{if(!be)return null==L||L(""),void je("PDF name is Required");const e=r.validateInputName(be);null==L||L(be),je(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{je(""),ge(e)}})}):e.jsx(e.Fragment,{})]}),pe.bodyVariables.length>0&&e.jsx(f.default,{containerStyle:{paddingTop:pe.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===(q=pe.descriptionComponents)||void 0===q?void 0:q.map(((n,t)=>e.jsx(g.default,{originalVariableList:null!=ne&&ne>-1?J.cards[ne]:J,type:n.type,descriptionComponent:n.component,showVariableModal:x,variableList:y},t))),(null===(U=null===(D=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===D?void 0:D.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.length)>0&&e.jsx(f.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(P=null===(I=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===I?void 0:I.filter((e=>Z===s.POD.CHATBOT||"URL"===e.type)))||void 0===P?void 0:P.map(((n,t)=>{if("URL"===n.type)return e.jsx(j.default,{variableListIndex:t,CTAoptions:null==T?void 0:T.CTAoptions,button:n,currentVariableList:null!=ne&&ne>-1?Object.assign({},J.cards[ne]):Object.assign({},J),updateSelectedURLTemplateBtn:he,variableList:y},`${t}_${ne}`)})),Z===s.POD.CHATBOT&&(null===(w=null===(R=le[0])||void 0===R?void 0:R.component)||void 0===w?void 0:w.buttons)&&(null===(N=null===(M=null===(A=le[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===N?void 0:N.length)>0&&e.jsx(u.BackTrackComponent,{backTrackMessage:null===(S=null==ee?void 0:ee.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(_=null==ee?void 0:ee.backTrackExtra)||void 0===_?void 0:_[1]}),(null===(H=null===(F=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===F?void 0:F.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.length)>0&&(Z!==s.POD.CHATBOT?e.jsx(f.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(u.BackTrackComponent,{backTrackMessage:null===(Q=null==ee?void 0:ee.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(Y=null==ee?void 0:ee.backTrackExtra)||void 0===Y?void 0:Y[1]})),null===(W=null===(K=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===K?void 0:K.filter((e=>"QUICK_REPLY"===e.type)))||void 0===W?void 0:W.map(((n,t)=>{if("QUICK_REPLY"===n.type&&Z!==s.POD.CHATBOT)return e.jsx(j.default,{variableListIndex:t,QRBoptions:null==T?void 0:T.QRBoptions,button:n,currentVariableList:null!=ne&&ne>-1?Object.assign({},J.cards[ne]):Object.assign({},J),updateSelectedQRBTemplateBtn:Oe},`${t}_${ne}`)})),Z===s.POD.CHATBOT&&re&&e.jsx(p.DiscountCodeComponent,{discountCode:null===($=null==ee?void 0:ee.discountCodeExtra)||void 0===$?void 0:$[0],setDiscountCode:null===(X=null==ee?void 0:ee.discountCodeExtra)||void 0===X?void 0:X[1],variableList:y}),null===(z=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===z?void 0:z.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(m.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:y,componentType:"BUTTONS"},t)}))]}))};
|
|
7
|
+
`;exports.default=o=>{let{template:h,onTemplateChange:C,whatsappSpecificPickerMeta:T,showVariableModal:x,variableList:y,variableListForImage:B,discountCode:E,setDiscountCode:V,fileName:k,setFileName:L}=o;var q,D,U,I,P,R,w,A,M,N,S,_,F,H,Q,Y,K,W,$,X,z;const G=h.isCarouselType,{originalVariableList:J,pod:Z,extras:ee,selectedCarouselIndex:ne,isProductCarouselType:te}=a.useTemplateModalContext(),{descriptionComponents:oe,urlBtns:ie,qrbBtns:le,imageComponent:se,bodyVariables:ae,headerVariables:de}=d.getAllDataFromTemplateComponent(h),[re,ue]=t.useState(!1),[pe,ce]=t.useState(-1===ne?{descriptionComponents:oe,urlBtns:ie,qrbBtns:le,imageComponent:se,bodyVariables:ae,headerVariables:de}:{}),[ve,me]=t.useState(!1),[be,ge]=t.useState(k),[fe,je]=t.useState();function he(e,t,o){var i,l,s,a,d,r,u,p,c,v;const m=null!=ne&&ne>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ne].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ne]}: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!=ne&&ne>-1&&te){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==C||C(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))?ue(!0):(ue(!1),null==V||V(""))}if(null!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].components=b.components,e.mapping.cards[ne]=b.mapping,null==C||C(Object.assign({},e))}else null==C||C(b)}function Oe(e,t,o){var i,l,s,a,d,r;const u=null!=ne&&ne>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[ne].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[ne]}:Object.assign({},h);if(null!=ne&&ne>-1&&te){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==C||C(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!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].components=u.components,null==C||C(Object.assign({},e))}else null==C||C(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))))ue(!0);else{ue(!1);const e=null===(n=null==ee?void 0:ee.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[h]),t.useEffect((()=>{var e,n,t,o;if(null!=ne&&ne>-1){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ne].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[ne]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);ce({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p})}else if(null!=ne&&-1===ne){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=d.getAllDataFromTemplateComponent(h);ce({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[ne]),t.useEffect((()=>{var e,n,t,o;if(null!=ne&&ne>-1&&ve){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[ne].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[ne]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}=d.getAllDataFromTemplateComponent(i);ce({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:u,headerVariables:p}),me(!1)}}),[ve]);return e.jsxs(b.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!pe.imageComponent&&!te&&e.jsxs(c.EditTemplateMediaContainer,{children:[e.jsx(v.default,{whatsappSpecificPickerMeta:T,mediaComponent:G?pe.imageComponent:se,updateTemplateImageUrl:function(e,t){var o,i,l,s,a,d,r,u;let p;p=null!=ne&&ne>-1?{components:null===(i=null===(o=h.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[ne].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[ne]}: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!=ne&&ne>-1){const e=n.cloneDeep(h);e.components[1].cards[ne].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[ne]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==C||C(Object.assign({},e)),me(!0)}else null==C||C(Object.assign({},p))},template:h,variableListForImage:B}),(null==se?void 0:se.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(O,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:be,errorMessage:fe||void 0,onBlur:()=>{if(!be)return null==L||L(""),void je("PDF name is Required");const e=r.validateInputName(be);null==L||L(be),je(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{je(""),ge(e)}})}):e.jsx(e.Fragment,{})]}),pe.bodyVariables.length>0&&e.jsx(f.default,{containerStyle:{paddingTop:pe.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===(q=pe.descriptionComponents)||void 0===q?void 0:q.map(((n,t)=>e.jsx(g.default,{originalVariableList:null!=ne&&ne>-1?J.cards[ne]:J,type:n.type,descriptionComponent:n.component,showVariableModal:x,variableList:y},t))),(null===(U=null===(D=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===D?void 0:D.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.length)>0&&e.jsx(f.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(P=null===(I=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===I?void 0:I.filter((e=>Z===s.POD.CHATBOT||"URL"===e.type)))||void 0===P?void 0:P.map(((n,t)=>{if("URL"===n.type)return e.jsx(j.default,{variableListIndex:t,CTAoptions:null==T?void 0:T.CTAoptions,button:n,currentVariableList:null!=ne&&ne>-1?Object.assign({},J.cards[ne]):Object.assign({},J),updateSelectedURLTemplateBtn:he,variableList:y},`${t}_${ne}`)})),Z===s.POD.CHATBOT&&(null===(w=null===(R=le[0])||void 0===R?void 0:R.component)||void 0===w?void 0:w.buttons)&&(null===(N=null===(M=null===(A=le[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===N?void 0:N.length)>0&&e.jsx(u.BackTrackComponent,{backTrackMessage:null===(S=null==ee?void 0:ee.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(_=null==ee?void 0:ee.backTrackExtra)||void 0===_?void 0:_[1]}),(null===(H=null===(F=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===F?void 0:F.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.length)>0&&(Z!==s.POD.CHATBOT?e.jsx(f.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(u.BackTrackComponent,{backTrackMessage:null===(Q=null==ee?void 0:ee.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(Y=null==ee?void 0:ee.backTrackExtra)||void 0===Y?void 0:Y[1]})),null===(W=null===(K=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===K?void 0:K.filter((e=>"QUICK_REPLY"===e.type)))||void 0===W?void 0:W.map(((n,t)=>{if("QUICK_REPLY"===n.type&&Z!==s.POD.CHATBOT)return e.jsx(j.default,{variableListIndex:t,QRBoptions:null==T?void 0:T.QRBoptions,button:n,currentVariableList:null!=ne&&ne>-1?Object.assign({},J.cards[ne]):Object.assign({},J),updateSelectedQRBTemplateBtn:Oe},`${t}_${ne}`)})),Z===s.POD.CHATBOT&&re&&e.jsx(p.DiscountCodeComponent,{discountCode:null===($=null==ee?void 0:ee.discountCodeExtra)||void 0===$?void 0:$[0],setDiscountCode:null===(X=null==ee?void 0:ee.discountCodeExtra)||void 0===X?void 0:X[1],variableList:y}),null===(z=null!=ne&&ne>-1?J.cards[ne].buttons:null==J?void 0:J.buttons)||void 0===z?void 0:z.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(m.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:y,componentType:"BUTTONS"},t)}))]}))};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import n from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as s,useEffect as d}from"react";import{AddVariableV2SideModal as c}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as h,TitleRegular as v,BodySecondary as g,BodyCaption as f}from"../../TypographyStyle.js";import{ProductPickerModal as y,ScreenName as b}from"../../product-picker-v2/modal.js";import{Badge as j}from"../Badge/index.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import C from"./EditWhatsAppTemplateV2.js";import{ProductBox as I}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as w}from"../../template-preview/models/WhatsAppTemplate.js";const O=O=>{let{template:k,whatsappSpecificPickerMeta:P,showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}=O;var E,B;const{selectedCarouselIndex:M,setTemplate:R,pickerConf:D,isProductCarouselType:F,pod:W,cardCount:N,carouselProducts:$,setCarouselProducts:q,isError:_,cardImages:z,disableEditVariable:G,onDeleteSelectedProducts:H,setSelectedCarouselIndex:J,sliderRef:K}=x(),[Q,U]=s(-1==M?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[X,Y]=s(!1),[Z,ee]=s(!1),[te,le]=s(!1);d((()=>{U(-1==M?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[M]);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=M&&M>=0&&t(p,{Icon:o,onClick:()=>{null==J||J(-1)}}),t(h,Object.assign({style:{marginLeft:10}},{children:Q})),M!==(null!=N?N:0)-1&&t(u,{buttonText:"Next",onClick:()=>{var e;console.log("sliderRef",K),null===(e=null==K?void 0:K.current)||void 0===e||e.slickNext(),null==J||J((e=>e+1))}})]})),F&&(null!==(E=null==$?void 0:$.length)&&void 0!==E?E:0)>0&&null!=M&&M>=0&&e("div",Object.assign({style:{display:"flex",rowGap:
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import n from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as s,useEffect as d}from"react";import{AddVariableV2SideModal as c}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as h,TitleRegular as v,BodySecondary as g,BodyCaption as f}from"../../TypographyStyle.js";import{ProductPickerModal as y,ScreenName as b}from"../../product-picker-v2/modal.js";import{Badge as j}from"../Badge/index.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import C from"./EditWhatsAppTemplateV2.js";import{ProductBox as I}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as w}from"../../template-preview/models/WhatsAppTemplate.js";const O=O=>{let{template:k,whatsappSpecificPickerMeta:P,showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}=O;var E,B;const{selectedCarouselIndex:M,setTemplate:R,pickerConf:D,isProductCarouselType:F,pod:W,cardCount:N,carouselProducts:$,setCarouselProducts:q,isError:_,cardImages:z,disableEditVariable:G,onDeleteSelectedProducts:H,setSelectedCarouselIndex:J,sliderRef:K}=x(),[Q,U]=s(-1==M?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[X,Y]=s(!1),[Z,ee]=s(!1),[te,le]=s(!1);d((()=>{U(-1==M?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[M]);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=M&&M>=0&&t(p,{Icon:o,onClick:()=>{null==J||J(-1)}}),t(h,Object.assign({style:{marginLeft:10}},{children:Q})),M!==(null!=N?N:0)-1&&t(u,{buttonText:"Next",onClick:()=>{var e;console.log("sliderRef",K),null===(e=null==K?void 0:K.current)||void 0===e||e.slickNext(),null==J||J((e=>e+1))}})]})),F&&(null!==(E=null==$?void 0:$.length)&&void 0!==E?E:0)>0&&null!=M&&M>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(I,{editItem:()=>{1===(null==$?void 0:$.length)&&"variable"===$[0].name?le(!0):Y(!X)},cardBody:1===(null==$?void 0:$.length)&&"variable"===$[0].name?`${$[0].productName}`:`${null==$?void 0:$.length} Products Selected`,hideIcon:1===(null==$?void 0:$.length)&&"variable"===$[0].name,deleteItem:()=>{var e;if(1===(null==$?void 0:$.length)&&"variable"===$[0].name)return void(null==q||q([]));const t=a(Object.assign({},k));t&&(z&&z.length>0?null==z||z.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=z[l])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==R||R(t)),null==q||q([]),null==H||H()}}),$&&(null==$?void 0:$.length)>0&&"variable"!=$[0].name&&t(u,{disabled:(null!==(B=null==$?void 0:$.length)&&void 0!==B?B:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{ee(!0),Y(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!G&&F&&0===(null==$?void 0:$.length)&&null!=M&&M>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(v,{children:"Product(s)"}),t(g,{children:`Select ${null!=N?N:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:_?16:12,marginRight:_?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:_?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(n,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{Y(!0)}}),W===w.CHATBOT&&e(l,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(f,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:_?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(n,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{le(!0)}})]})]})),_&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(j,{padding:"8px",errorText:"Please add products"})}))]}),!F&&(null!=M?M:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:m.surface.hovered,alignItems:"center"}},{children:[(null!=M?M:-1)>0&&t(p,{Icon:i,color:m.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==K?void 0:K.current)||void 0===e||e.slickPrev(),null==J||J((e=>e-1))}}),t(v,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:m.content.secondary},{children:`Card ${(null!=M?M:0)+1}/${N}`})),M!==(null!=N?N:0)-1&&t(p,{Icon:r,color:m.content.secondary,width:8,height:14,onClick:()=>{var e;null===(e=null==K?void 0:K.current)||void 0===e||e.slickNext(),null==J||J((e=>e+1))}})]})),t(C,{whatsappSpecificPickerMeta:P,template:k,onTemplateChange:e=>{null==R||R(e)},showVariableModal:T,variableList:S,variableListForImage:L,discountCode:V,setDiscountCode:A}),X&&D&&t(y,{zIndex:200,startupScreen:Z?b.RearrangeProducts:b.Collections,rearrangeEnabled:!0,storeId:D.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=$?$:[]),collectionFetcher:D.fetchCollections,productFetcher:D.fetchProducts,onAdd:(e,t)=>{var l,o,i,r,n,s;ee(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const a=e[t].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const c=a[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:h,displayOrder:v}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=a[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:h,variantId:u,productId:e,displayOrder:v,collectionId:t,productName:null!==(r=null===(i=a[e])||void 0===i?void 0:i.name)&&void 0!==r?r:"",productImage:null!==(s=null===(n=a[e])||void 0===n?void 0:n.image)&&void 0!==s?s:""};d.push(g)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=a(Object.assign({},k));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==z?void 0:z[t])&&void 0!==l?l:""]})),null==R||R(p)),null==q||q(c),Y(!1)},searchInCollectionFetcher:D.searchInCollection,searchFetcher:D.searchProducts,visible:X,onClose:()=>{Y(!1)},exactLimit:null!=N?N:1}),te&&t(c,{zIndex:2e3,data:null!=S?S:[],showVariable:te,setShowVariable:le,placeholder:"Add a variable",customTrigger:e=>{null==q||q([{name:"variable",productName:e.actualValue}])}})]}))};export{O as default};
|
|
@@ -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 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{validateInputName as u}from"../utils/validateName.js";import{BackTrackComponent as m}from"./BackTrackComponent.js";import{DiscountCodeComponent as v}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as b}from"./EditMediaV2.style.js";import g from"./EditWhatsAppTemplateMediaV2.js";import f from"./VariableConnector.js";import{Container as h}from"./VariableConnectorsPanel.js";import j from"./VariableConnectorWhatsApp.js";import O from"./VariableEditorHeader.js";import C from"./WhatsAppTemplateCardButtonV2.js";const T=s=>{let{template:T,onTemplateChange:y,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:E,variableListForImage:k,discountCode:L,setDiscountCode:U,fileName:I,setFileName:w}=s;var R,P,N,A,M,S,D,H,_,Q,q,Y,F,K,W,$,X,z,G,J,Z;const nn=T.isCarouselType,{originalVariableList:on,pod:tn,extras:en,selectedCarouselIndex:ln,isProductCarouselType:sn}=p(),{descriptionComponents:an,urlBtns:dn,qrbBtns:rn,imageComponent:pn,bodyVariables:cn,headerVariables:un}=c(T),[mn,vn]=i(!1),[bn,gn]=i(-1===ln?{descriptionComponents:an,urlBtns:dn,qrbBtns:rn,imageComponent:pn,bodyVariables:cn,headerVariables:un}:{}),[fn,hn]=i(!1),[jn,On]=i(I),[Cn,Tn]=i();function xn(n,o,t){var i,l,s,a,d,r,p,c,u,m;const v=null!=ln&&ln>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ln].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ln]}:Object.assign({},T),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!=ln&&ln>-1&&sn){const o=Object.assign({},T).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({},T).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(T);return l.components=o,l.mapping.cards=i,void(null==y||y(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))?vn(!0):(vn(!1),null==U||U(""))}if(null!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].components=b.components,n.mapping.cards[ln]=b.mapping,null==y||y(Object.assign({},n))}else null==y||y(b)}function yn(n,o,t){var i,l,s,a,d,r;const p=null!=ln&&ln>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ln].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ln]}:Object.assign({},T);if(null!=ln&&ln>-1&&sn){const o=Object.assign({},T).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(T);return i.components=o,void(null==y||y(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!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].components=p.components,null==y||y(Object.assign({},n))}else null==y||y(p)}l((()=>{var n,o;if(null===(n=T.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))vn(!0);else{vn(!1);const n=null===(o=null==en?void 0:en.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[T]),l((()=>{var n,o,t,e;if(null!=ln&&ln>-1){const i={components:null===(o=null===(n=T.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[ln].components,mapping:null===(e=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[ln]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);gn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=ln&&-1===ln){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=c(T);gn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[ln]),l((()=>{var n,o,t,e;if(null!=ln&&ln>-1&&fn){const i={components:null===(o=null===(n=T.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[ln].components,mapping:null===(e=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[ln]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);gn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}),hn(!1)}}),[fn]);return n(h,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!bn.imageComponent&&!sn&&n(b,{children:[o(g,{whatsappSpecificPickerMeta:V,mediaComponent:nn?bn.imageComponent:pn,updateTemplateImageUrl:function(n,o){var t,i,l,s,a,d,r,p;let c;c=null!=ln&&ln>-1?{components:null===(i=null===(t=T.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[ln].components,mapping:null===(s=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[ln]}:Object.assign({},T);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!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].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[ln]=null!==(p=c.mapping)&&void 0!==p?p:{}),null==y||y(Object.assign({},n)),hn(!0)}else null==y||y(Object.assign({},c))},template:T,variableListForImage:k}),(null==pn?void 0:pn.format)==d.DOCUMENT?o(x,{children:o(a,{labelText:"PDF Name",placeholder:"Enter the name",value:jn,errorMessage:Cn||void 0,onBlur:()=>{if(!jn)return null==w||w(""),void Tn("PDF name is Required");const n=u(jn);null==w||w(jn),Tn(n?"Please enter a valid PDF name":void 0)},onChangeText:n=>{Tn(""),On(n)}})}):o(t,{})]}),bn.bodyVariables.length>0&&o(O,{containerStyle:{paddingTop:bn.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===(R=bn.descriptionComponents)||void 0===R?void 0:R.map(((n,t)=>o(j,{originalVariableList:null!=ln&&ln>-1?on.cards[ln]:on,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:E},t))),(null===(N=null===(P=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===P?void 0:P.filter((n=>"URL"===n.type)))||void 0===N?void 0:N.length)>0&&o(O,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(M=null===(A=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===A?void 0:A.filter((n=>tn===r.CHATBOT||"URL"===n.type)))||void 0===M?void 0:M.map(((n,t)=>{if("URL"===n.type)return o(C,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=ln&&ln>-1?Object.assign({},on.cards[ln]):Object.assign({},on),updateSelectedURLTemplateBtn:xn,variableList:E},`${t}_${ln}`)})),tn===r.CHATBOT&&(null===(D=null===(S=rn[0])||void 0===S?void 0:S.component)||void 0===D?void 0:D.buttons)&&(null===(Q=null===(_=null===(H=rn[0])||void 0===H?void 0:H.component)||void 0===_?void 0:_.buttons)||void 0===Q?void 0:Q.length)>0&&o(m,{backTrackMessage:null===(q=null==en?void 0:en.backTrackExtra)||void 0===q?void 0:q[0],setBackTrackMessage:null===(Y=null==en?void 0:en.backTrackExtra)||void 0===Y?void 0:Y[1]}),(null===(K=null===(F=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===F?void 0:F.filter((n=>"QUICK_REPLY"===n.type)))||void 0===K?void 0:K.length)>0&&(tn!==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(m,{backTrackMessage:null===(W=null==en?void 0:en.backTrackExtra)||void 0===W?void 0:W[0],setBackTrackMessage:null===($=null==en?void 0:en.backTrackExtra)||void 0===$?void 0:$[1]})),null===(z=null===(X=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===X?void 0:X.filter((n=>"QUICK_REPLY"===n.type)))||void 0===z?void 0:z.map(((n,t)=>{if("QUICK_REPLY"===n.type&&tn!==r.CHATBOT)return o(C,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=ln&&ln>-1?Object.assign({},on.cards[ln]):Object.assign({},on),updateSelectedQRBTemplateBtn:yn},`${t}_${ln}`)})),tn===r.CHATBOT&&mn&&o(v,{discountCode:null===(G=null==en?void 0:en.discountCodeExtra)||void 0===G?void 0:G[0],setDiscountCode:null===(J=null==en?void 0:en.discountCodeExtra)||void 0===J?void 0:J[1],variableList:E}),null===(Z=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===Z?void 0:Z.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(f,{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:E,componentType:"BUTTONS"},t)}))]}))},x=s.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{validateInputName as u}from"../utils/validateName.js";import{BackTrackComponent as m}from"./BackTrackComponent.js";import{DiscountCodeComponent as v}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as b}from"./EditMediaV2.style.js";import g from"./EditWhatsAppTemplateMediaV2.js";import f from"./VariableConnector.js";import{Container as h}from"./VariableConnectorsPanel.js";import j from"./VariableConnectorWhatsApp.js";import O from"./VariableEditorHeader.js";import C from"./WhatsAppTemplateCardButtonV2.js";const T=s=>{let{template:T,onTemplateChange:y,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:E,variableListForImage:k,discountCode:L,setDiscountCode:U,fileName:I,setFileName:R}=s;var w,P,N,A,M,S,D,H,_,Q,q,Y,F,K,W,$,X,z,G,J,Z;const nn=T.isCarouselType,{originalVariableList:on,pod:tn,extras:en,selectedCarouselIndex:ln,isProductCarouselType:sn}=p(),{descriptionComponents:an,urlBtns:dn,qrbBtns:rn,imageComponent:pn,bodyVariables:cn,headerVariables:un}=c(T),[mn,vn]=i(!1),[bn,gn]=i(-1===ln?{descriptionComponents:an,urlBtns:dn,qrbBtns:rn,imageComponent:pn,bodyVariables:cn,headerVariables:un}:{}),[fn,hn]=i(!1),[jn,On]=i(I),[Cn,Tn]=i();function xn(n,o,t){var i,l,s,a,d,r,p,c,u,m;const v=null!=ln&&ln>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ln].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ln]}:Object.assign({},T),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!=ln&&ln>-1&&sn){const o=Object.assign({},T).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({},T).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(T);return l.components=o,l.mapping.cards=i,void(null==y||y(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))?vn(!0):(vn(!1),null==U||U(""))}if(null!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].components=b.components,n.mapping.cards[ln]=b.mapping,null==y||y(Object.assign({},n))}else null==y||y(b)}function yn(n,o,t){var i,l,s,a,d,r;const p=null!=ln&&ln>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[ln].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[ln]}:Object.assign({},T);if(null!=ln&&ln>-1&&sn){const o=Object.assign({},T).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(T);return i.components=o,void(null==y||y(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!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].components=p.components,null==y||y(Object.assign({},n))}else null==y||y(p)}l((()=>{var n,o;if(null===(n=T.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))vn(!0);else{vn(!1);const n=null===(o=null==en?void 0:en.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[T]),l((()=>{var n,o,t,e;if(null!=ln&&ln>-1){const i={components:null===(o=null===(n=T.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[ln].components,mapping:null===(e=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[ln]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);gn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=ln&&-1===ln){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=c(T);gn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[ln]),l((()=>{var n,o,t,e;if(null!=ln&&ln>-1&&fn){const i={components:null===(o=null===(n=T.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[ln].components,mapping:null===(e=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[ln]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}=c(i);gn({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:d,bodyVariables:r,headerVariables:p}),hn(!1)}}),[fn]);return n(h,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!bn.imageComponent&&!sn&&n(b,{children:[o(g,{whatsappSpecificPickerMeta:V,mediaComponent:nn?bn.imageComponent:pn,updateTemplateImageUrl:function(n,o){var t,i,l,s,a,d,r,p;let c;c=null!=ln&&ln>-1?{components:null===(i=null===(t=T.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[ln].components,mapping:null===(s=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[ln]}:Object.assign({},T);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!=ln&&ln>-1){const n=e(T);n.components[1].cards[ln].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[ln]=null!==(p=c.mapping)&&void 0!==p?p:{}),null==y||y(Object.assign({},n)),hn(!0)}else null==y||y(Object.assign({},c))},template:T,variableListForImage:k}),(null==pn?void 0:pn.format)==d.DOCUMENT?o(x,{children:o(a,{labelText:"PDF Name",placeholder:"Enter the name",value:jn,errorMessage:Cn||void 0,onBlur:()=>{if(!jn)return null==R||R(""),void Tn("PDF name is Required");const n=u(jn);null==R||R(jn),Tn(n?"Please enter a valid PDF name":void 0)},onChangeText:n=>{Tn(""),On(n)}})}):o(t,{})]}),bn.bodyVariables.length>0&&o(O,{containerStyle:{paddingTop:bn.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=bn.descriptionComponents)||void 0===w?void 0:w.map(((n,t)=>o(j,{originalVariableList:null!=ln&&ln>-1?on.cards[ln]:on,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:E},t))),(null===(N=null===(P=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===P?void 0:P.filter((n=>"URL"===n.type)))||void 0===N?void 0:N.length)>0&&o(O,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(M=null===(A=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===A?void 0:A.filter((n=>tn===r.CHATBOT||"URL"===n.type)))||void 0===M?void 0:M.map(((n,t)=>{if("URL"===n.type)return o(C,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=ln&&ln>-1?Object.assign({},on.cards[ln]):Object.assign({},on),updateSelectedURLTemplateBtn:xn,variableList:E},`${t}_${ln}`)})),tn===r.CHATBOT&&(null===(D=null===(S=rn[0])||void 0===S?void 0:S.component)||void 0===D?void 0:D.buttons)&&(null===(Q=null===(_=null===(H=rn[0])||void 0===H?void 0:H.component)||void 0===_?void 0:_.buttons)||void 0===Q?void 0:Q.length)>0&&o(m,{backTrackMessage:null===(q=null==en?void 0:en.backTrackExtra)||void 0===q?void 0:q[0],setBackTrackMessage:null===(Y=null==en?void 0:en.backTrackExtra)||void 0===Y?void 0:Y[1]}),(null===(K=null===(F=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===F?void 0:F.filter((n=>"QUICK_REPLY"===n.type)))||void 0===K?void 0:K.length)>0&&(tn!==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(m,{backTrackMessage:null===(W=null==en?void 0:en.backTrackExtra)||void 0===W?void 0:W[0],setBackTrackMessage:null===($=null==en?void 0:en.backTrackExtra)||void 0===$?void 0:$[1]})),null===(z=null===(X=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===X?void 0:X.filter((n=>"QUICK_REPLY"===n.type)))||void 0===z?void 0:z.map(((n,t)=>{if("QUICK_REPLY"===n.type&&tn!==r.CHATBOT)return o(C,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=ln&&ln>-1?Object.assign({},on.cards[ln]):Object.assign({},on),updateSelectedQRBTemplateBtn:yn},`${t}_${ln}`)})),tn===r.CHATBOT&&mn&&o(v,{discountCode:null===(G=null==en?void 0:en.discountCodeExtra)||void 0===G?void 0:G[0],setDiscountCode:null===(J=null==en?void 0:en.discountCodeExtra)||void 0===J?void 0:J[1],variableList:E}),null===(Z=null!=ln&&ln>-1?on.cards[ln].buttons:null==on?void 0:on.buttons)||void 0===Z?void 0:Z.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(f,{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:E,componentType:"BUTTONS"},t)}))]}))},x=s.div`
|
|
2
2
|
padding-top: 24px;
|
|
3
3
|
padding-left: 10px;
|
|
4
4
|
padding-right: 10px;
|