@bikdotai/bik-component-library 0.0.433-beta.11 → 0.0.433-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +2 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +0 -2
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +2 -2
- package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +2 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +0 -2
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +4 -4
- package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js +1 -1
- package/package.json +1 -1
|
@@ -31,6 +31,7 @@ export interface TemplateContextMapperProps {
|
|
|
31
31
|
disableEditVariable?: boolean;
|
|
32
32
|
pod?: POD;
|
|
33
33
|
extras?: ExtrasWhatsapp;
|
|
34
|
+
isProductCarouselType?: boolean;
|
|
34
35
|
pickerConf?: {
|
|
35
36
|
searchInCollection: any;
|
|
36
37
|
searchProducts: any;
|
|
@@ -39,4 +40,4 @@ export interface TemplateContextMapperProps {
|
|
|
39
40
|
storeId: string;
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, isProductCarouselType, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),o=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:m,htmlContent:C,templateVariables:h,onTemplateSelect:b,globalPlaceholders:v,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:g,showVariableModal:P,variableList:x,discountCode:E,setDiscountCode:j,onBackPress:M,enabledCustomText:L,variableListForImage:f,showSampleValues:w,disableEditVariable:y,pod:A,extras:N,isProductCarouselType:V,pickerConf:I}=d;var k,q,H,_;t.useEffect((()=>{B(C)}),[C]);const D=m===s.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(q=null===(k=u.components)||void 0===k?void 0:k[1])||void 0===q?void 0:q.type),[O,F]=t.useState(m===s.CHANNEL_TYPE.EMAIL||D?"desktop":"mobile"),[Y,B]=t.useState(C),[W,z]=t.useState(!1),[U,$]=t.useState(u),[R,G]=t.useState(null!=h?h:[]),[J,K]=t.useState(!1),[Q,X]=t.useState(-1);const Z=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(o.TemplateModalContext.Provider,Object.assign({value:{template:U,setTemplate:$,device:O,setDevice:F,display_content:Y,setDisplayContent:B,originalVariableList:R,setOriginalVariableList:G,isError:W,setIsError:z,channel:m,globalNormalizedPlaceholders:Z,templateSelectionTriggered:J,setTemplateSelectionTriggered:K,enabledCustomText:L,disableEditVariable:y,pod:A,extras:N,isWhatsappCarousel:D,selectedCarouselIndex:Q,setSelectedCarouselIndex:X,isProductCarouselType:u.isProductCarouselType,pickerConf:I}},{children:S?e.jsx(r.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:g,centralContainerStyles:{width:D?900:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==U?void 0:U.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(H=null==U?void 0:U.category)&&void 0!==H?H:"")} • ${null!==(_=null==U?void 0:U.templateCategory)&&void 0!==_?_:""}`:"",onBackPress:()=>{null==M||M()}},{children:[e.jsx(r.default,{showSampleValues:w,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:P,variableList:x,discountCode:E,setDiscountCode:j,variableListForImage:f&&(null==f?void 0:f.length)>0?f:x}),b?e.jsx(i.default,{isWhatsappCarousel:null!=D&&D,onSelect:function(){const e=null==b?void 0:b(U,R,null!=Y?Y:"");e?z(!!e):K(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -30,7 +30,6 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
30
30
|
selectedCarouselIndex?: number | undefined;
|
|
31
31
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
32
32
|
isProductCarouselType?: boolean | undefined;
|
|
33
|
-
cardCount?: number | undefined;
|
|
34
33
|
pickerConf?: {
|
|
35
34
|
searchInCollection: any;
|
|
36
35
|
searchProducts: any;
|
|
@@ -63,7 +62,6 @@ export declare const useTemplateModalContext: () => {
|
|
|
63
62
|
selectedCarouselIndex?: number | undefined;
|
|
64
63
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
65
64
|
isProductCarouselType?: boolean | undefined;
|
|
66
|
-
cardCount?: number | undefined;
|
|
67
65
|
pickerConf?: {
|
|
68
66
|
searchInCollection: any;
|
|
69
67
|
searchProducts: any;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),i=require("../../template-preview/models/Channels.js"),s=require("../../../constants/Theme.js"),n=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),d=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=m(a);const v=f.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,
|
|
4
|
+
`,x=f.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${s.COLORS.stroke.primary} 1px solid;
|
|
12
|
-
`,
|
|
12
|
+
`,C=f.default.div`
|
|
13
13
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
14
14
|
flex: 1;
|
|
15
15
|
height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
|
|
16
16
|
overflow-y: auto;
|
|
17
|
-
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:
|
|
17
|
+
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:f,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:E,variableListForImage:P,showSampleValues:A}=a,L=t.useRef(),T=t.useRef(),{device:y,display_content:M,channel:N,template:S,setTemplate:_,isWhatsappCarousel:V}=n.useTemplateModalContext();const q=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(v,{children:[e.jsx(C,Object.assign({showOnlyContent:f,showVariableMapping:m,isWhatsappCarousel:V},{children:"mobile"===y?e.jsx(c.default,{ref:T,display_content:null!=M?M:"",channel:N,template:S,showSampleValues:A}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.CarouselPreview,{ref:L,channel:N,template:S,showSampleValues:A}):N!==i.CHANNEL_TYPE.MESSAGE?e.jsx(d.default,{ref:L,channel:N,display_content:null!=M?M:"",showSampleValues:A}):e.jsx(e.Fragment,{})})),m&&e.jsx(x,Object.assign({channel:N},{children:N!==i.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:N===i.CHANNEL_TYPE.EMAIL?function(e){var t,a,l;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),n=r.getVariableNameForEmailByIndex(e+1),d=N===i.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),p=q(d),c=null==d?void 0:d.offsetLeft;"desktop"===y?p&&L.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y)):p&&T.current&&(null===(l=null==o?void 0:o.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),u.highlightFor(n,s.COLORS.background.warning.light,2,N,y))}:void 0,showVariableModal:w,variableList:b,discountCode:j,setDiscountCode:E}):N===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(o.default,{whatsappSpecificPickerMeta:g,template:S,showVariableModal:w,variableList:b,variableListForImage:P,discountCode:j,setDiscountCode:E}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:S,onTemplateChange:e=>{null==_||_(e)},showVariableModal:w,variableList:b,variableListForImage:P,discountCode:j,setDiscountCode:E})}))]})};
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("react"),s=require("styled-components"),o=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var r=require("../../button/Button.js"),a=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var l=require("../../TypographyStyle.js"),d=require("../../product-picker-v2/modal.js"),c=require("../context/templateModalContext.js"),u=require("./EditWhatsAppTemplateV2.js"),p=require("../../../assets/icons/box.svg.js"),f=require("../../../assets/icons/delete.svg.js"),m=require("../../../assets/icons/edit.svg.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const h=t=>{const{cardBody:i,deleteItem:s,editItem:o}=t;return e.jsxs(y,Object.assign({width:"100%"},{children:[e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(p.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(l.TitleRegular,{children:i})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[o&&e.jsx(a.IconButton,{style:{display:"flex"},Icon:m.default,onClick:e=>{o(),e.stopPropagation()}}),e.jsx(a.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=g(s).default.div`
|
|
2
2
|
width: ${e=>e.width};
|
|
3
3
|
padding: 12px;
|
|
4
4
|
display: flex;
|
|
@@ -44,4 +44,4 @@
|
|
|
44
44
|
color: #000000;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
`;exports.default=
|
|
47
|
+
`;exports.default=s=>{let{template:a,whatsappSpecificPickerMeta:p,showVariableModal:f,variableList:m,variableListForImage:g,discountCode:y,setDiscountCode:x}=s;const{selectedCarouselIndex:j,setTemplate:b,pickerConf:v,isProductCarouselType:I}=c.useTemplateModalContext(),[C,w]=i.useState(-1==j?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[q,O]=i.useState(!1),[k,S]=i.useState(!1),[T,P]=i.useState([]);i.useEffect((()=>{w(-1==j?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[j]);return e.jsxs("div",{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:C})),I&&T.length>0&&null!=j&&j>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(h,{editItem:()=>O(!q),cardBody:`${T.length} Products Selected`,deleteItem:()=>{P([])}}),e.jsx(r.Button,{disabled:T.length<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{O(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),I&&0===T.length&&null!=j&&j>=0&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(r.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{O(!0)}}),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(l.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(r.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{S(!0)}})]})),e.jsx(u.default,{whatsappSpecificPickerMeta:p,template:a,onTemplateChange:e=>{null==b||b(e)},showVariableModal:f,variableList:m,variableListForImage:g,discountCode:y,setDiscountCode:x}),q&&v&&e.jsx(d.ProductPickerModal,{zIndex:200,limit:1,storeId:v.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const i of e){const e=null==i?void 0:i.collectionId,s=i.productId,o=i.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),s in t[e].products||(t[e].products[s]={variants:{},name:(null==i?void 0:i.productName)||"",image:(null==i?void 0:i.productImage)||""}),t[e].products[s].variants[o]={name:(null==i?void 0:i.name)||"",price:"",image:(null==i?void 0:i.image)||"",quantity:i.quantity||0,displayOrder:i.displayOrder}}return t}return{}})(T),collectionFetcher:v.fetchCollections,productFetcher:v.fetchProducts,onAdd:(e,t)=>{const i=[];delete e.isCustom;for(const t of Object.keys(e)){const s=e[t].products;if(void 0!==s&&Object.keys(s).length)for(const e of Object.keys(s)){const o=s[e].variants;if(void 0!==o&&Object.keys(o).length)for(const r of Object.keys(o)){const{name:a,image:n,quantity:l,displayOrder:d}=o[r],c={name:a,image:n,quantity:l,variantId:r,productId:e,displayOrder:d,collectionId:t,productName:s[e].name,productImage:s[e].image};i.push(c)}}}const s=i.sort(((e,t)=>e.displayOrder-t.displayOrder));P(s),O(!1)},searchInCollectionFetcher:v.searchInCollection,searchFetcher:v.searchProducts,visible:q,onClose:()=>{O(!1)}}),k&&e.jsx(o.AddVariableV2SideModal,{zIndex:2e3,data:null!=m?m:[],showVariable:k,setShowVariable:S,placeholder:"Add a variable",customTrigger:e=>{}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),u=require("./VariableConnector.js"),c=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:f,onTemplateChange:j,whatsappSpecificPickerMeta:C,showVariableModal:h,variableList:O,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,E,B,L,U,k,q,I,w,D,R,A,P,S;const{originalVariableList:N,pod:M,extras:_,selectedCarouselIndex:Q,isProductCarouselType:Y}=i.useTemplateModalContext(),{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}=s.getAllDataFromTemplateComponent(f),[z,G]=n.useState(!1),[J,Z]=n.useState(-1===Q?{descriptionComponents:F,urlBtns:H,qrbBtns:K,imageComponent:W,bodyVariables:$,headerVariables:X}:{}),[ee,te]=n.useState(!1);function ne(e,n,o){var i,l,s,a,d,r,p,u;const c=null!=Q&&Q>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Q].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Q]}:Object.assign({},f),m="custom"===n&&"string"==typeof e?e:"string"!=typeof e?e.defaultValue:"";if(null!=Q&&Q>-1&&Y){const e=Object.assign({},f).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,i;if("BUTTONS"===e.type){const l=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let s=null!==(n=null==l?void 0:l[o])&&void 0!==n?n:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),n=t.cloneDeep(f);return n.components=e,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==c?void 0:c.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const t=null===(s=null==c?void 0:c.components[v].buttons)||void 0===s?void 0:s.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=t[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",o,s,n,e);const u=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),m=Object.assign(Object.assign({},c.components[v]),{buttons:u}),b=null===(p=c.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const g=Object.assign(Object.assign({},c.mapping),{buttons:b});c.mapping=g;const f=[...c.components];f[v]=m,c.components=f}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(u=e.placeHolder)||void 0===u?void 0:u.slice(2,-2))?G(!0):(G(!1),null==y||y(""))}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=c.components,e.mapping.cards[Q]=c.mapping,console.log("templateCopy: ",e),null==j||j(Object.assign({},e))}else null==j||j(c)}function oe(e,n,o){var i,l,s,a,d,r;const p=null!=Q&&Q>-1?{components:null===(i=Object.assign({},f).components[1].cards)||void 0===i?void 0:i[Q].components,mapping:null===(l=Object.assign({},f).mapping.cards)||void 0===l?void 0:l[Q]}:Object.assign({},f);if(null!=Q&&Q>-1&&Y){const n=Object.assign({},f).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,i,l;if("BUTTONS"===t.type){const s=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=t.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),i=t.cloneDeep(f);return i.components=n,void(null==j||j(Object.assign({},i)))}const u=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const t=null===(s=null==p?void 0:p.components[u].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[u])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),l=Object.assign(Object.assign({},p.components[u]),{buttons:i}),s=[...p.components];s[u]=l,p.components=s}}if(null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=p.components,e.mapping.cards[Q]=p.mapping,console.log("templateCopy 2: ",e),null==j||j(Object.assign({},e))}else null==j||j(p)}n.useEffect((()=>{var e,t;if(null===(e=f.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))G(!0);else{G(!1);const e=null===(t=null==_?void 0:_.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[f]),n.useEffect((()=>{console.log("templateComponentData: ",J)}),[J]),n.useEffect((()=>{var e,t,n,o;if(null!=Q&&Q>-1){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=s.getAllDataFromTemplateComponent(i);Z({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u})}else if(null!=Q&&-1===Q){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(f);Z({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Q]),n.useEffect((()=>{var e,t,n,o;if(console.log("right panel selectedCarouselIndex: ",Q),null!=Q&&Q>-1&&ee){const i={components:null===(t=null===(e=f.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[Q].components,mapping:null===(o=null===(n=null==f?void 0:f.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[Q]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=s.getAllDataFromTemplateComponent(i);Z({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}),te(!1)}}),[ee]);const ie=l.useAdditionalVariables({variableList:O,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(c.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!J.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:J.imageComponent,updateTemplateImageUrl:function(e,n){var o,i,l,s,a;let d;d=null!=Q&&Q>-1?{components:null===(i=null===(o=f.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Q].components,mapping:null===(s=null===(l=null==f?void 0:f.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[Q]}:Object.assign({},f);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Q&&Q>-1){const e=t.cloneDeep(f);e.components[1].cards[Q].components=d.components,e.mapping.cards[Q]=d.mapping,null==j||j(Object.assign({},e)),te(!0)}else null==j||j(Object.assign({},d))},template:f,variableListForImage:x})}),(J.bodyVariables.length>0||J.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:J.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(V=J.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=Q&&Q>-1?N.cards[Q]:N,type:t.type,descriptionComponent:t.component,showVariableModal:h,variableList:O},n))),(null===(B=null===(E=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===E?void 0:E.filter((e=>"URL"===e.type)))||void 0===B?void 0:B.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedURLTemplateBtn:ne,variableList:O},`${n}_${Q}`)})),(null===(q=null===(k=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(M!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(I=null==_?void 0:_.backTrackExtra)||void 0===I?void 0:I[0],setBackTrackMessage:null===(w=null==_?void 0:_.backTrackExtra)||void 0===w?void 0:w[1]})),null===(R=null===(D=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===D?void 0:D.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=Q&&Q>-1?N.cards[Q]:N,updateSelectedQRBTemplateBtn:oe},`${n}_${Q}`)})),M===o.POD.CHATBOT&&z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==_?void 0:_.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==_?void 0:_.discountCodeExtra)||void 0===P?void 0:P[1],variableList:O}),null===(S=null!=Q&&Q>-1?N.cards[Q].buttons:null==N?void 0:N.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,i,l;if("COPY_CODE"===t.type)return e.jsx(u.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"",updatedValue:null!==(i=t.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=t.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:ie,componentType:"BUTTONS"},n)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),o=require("react"),t=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),a=require("../utils/getDataFromTemplateComponent.js"),s=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),p=require("./EditWhatsAppTemplateMediaV2.js"),u=require("./VariableConnector.js"),c=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:h,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:j,variableList:x,variableListForImage:T,discountCode:V,setDiscountCode:O}=g;var B,y,q,E,k,D,L,w,I,A,M,S,U,N,P,R,F,H;const{originalVariableList:_,pod:Q,extras:W,selectedCarouselIndex:Y}=i.useTemplateModalContext(),{descriptionComponents:K,urlBtns:$,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}=a.getAllDataFromTemplateComponent(h),[Z,ee]=o.useState(!1),[ne,oe]=o.useState(-1===Y?{descriptionComponents:K,urlBtns:$,qrbBtns:X,imageComponent:z,bodyVariables:G,headerVariables:J}:{}),[te,ie]=o.useState(!1);function le(e,o){var t,i,l,a,s,d,r;const p=null!=Y&&Y>-1?{components:null===(t=Object.assign({},h).components[1].cards)||void 0===t?void 0:t[Y].components,mapping:null===(i=Object.assign({},h).mapping.cards)||void 0===i?void 0:i[Y]}:Object.assign({},h),u=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const n=null===(l=null==p?void 0:p.components[u].buttons)||void 0===l?void 0:l.findIndex((e=>"URL"===e.type));if(void 0!==n&&n>-1){const t="custom"===o&&"string"==typeof e,i=[...null!==(d=null===(s=null===(a=p.components)||void 0===a?void 0:a[u])||void 0===s?void 0:s.buttons)&&void 0!==d?d:[]];i[n]=Object.assign(Object.assign({},i[n]),{url:"https://d.bik.ai/{{1}}",example:[t?e:"string"!=typeof e?e.defaultValue:""]});const l=Object.assign(Object.assign({},p.components[u]),{buttons:i}),r=Object.assign(Object.assign({},p.mapping),{buttons:t?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});p.mapping=r;const c=[...p.components];c[u]=l,p.components=c}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(r=e.placeHolder)||void 0===r?void 0:r.slice(2,-2))?ee(!0):(ee(!1),null==O||O(""))}if(null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=p.components,e.mapping.cards[Y]=p.mapping,null==f||f(Object.assign({},e))}else null==f||f(p)}function ae(e,o,t){var i,l,a;const s=null!=Y&&Y>-1?{components:null===(i=Object.assign({},h).components[1].cards)||void 0===i?void 0:i[Y].components,mapping:null===(l=Object.assign({},h).mapping.cards)||void 0===l?void 0:l[Y]}:Object.assign({},h),d=null==s?void 0:s.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==d&&d>-1){const n=null===(a=null==s?void 0:s.components[d].buttons)||void 0===a?void 0:a.filter((e=>"QUICK_REPLY"===e.type));n&&(n[t]=Object.assign(Object.assign({},n[t]),{flowId:e.flowId,flowName:e.flowName}));const o=Object.assign(Object.assign({},s.components[d]),{buttons:n}),i=[...s.components];i[d]=o,s.components=i}if(null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=s.components,e.mapping.cards[Y]=s.mapping,null==f||f(Object.assign({},e))}else null==f||f(s)}o.useEffect((()=>{var e,n;if(null===(e=h.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ee(!0);else{ee(!1);const e=null===(n=null==W?void 0:W.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[h]),o.useEffect((()=>{var e,n,o,t;if(null!=Y&&Y>-1){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Y].components,mapping:null===(t=null===(o=null==h?void 0:h.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Y]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=a.getAllDataFromTemplateComponent(i);oe({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u})}else if(null!=Y&&-1===Y){const{descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l}=a.getAllDataFromTemplateComponent(h);oe({descriptionComponents:e,urlBtns:n,qrbBtns:o,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[Y]),o.useEffect((()=>{var e,n,o,t;if(console.log("right panel selectedCarouselIndex: ",Y),null!=Y&&Y>-1&&te){const i={components:null===(n=null===(e=h.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Y].components,mapping:null===(t=null===(o=null==h?void 0:h.mapping)||void 0===o?void 0:o.cards)||void 0===t?void 0:t[Y]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}=a.getAllDataFromTemplateComponent(i);oe({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:p,headerVariables:u}),ie(!1)}}),[te]);const se=l.useAdditionalVariables({variableList:x,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(c.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ne.imageComponent&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(p.default,{whatsappSpecificPickerMeta:C,mediaComponent:ne.imageComponent,updateTemplateImageUrl:function(e,o){var t,i,l,a,s;let d;d=null!=Y&&Y>-1?{components:null===(i=null===(t=h.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[Y].components,mapping:null===(a=null===(l=null==h?void 0:h.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Y]}:Object.assign({},h);const r=null===(s=null==d?void 0:d.components)||void 0===s?void 0:s.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 n=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[e]}}),t=[...d.components];t[r]=n,d=Object.assign(Object.assign({},d),{components:t})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=Y&&Y>-1){const e=n.cloneDeep(h);e.components[1].cards[Y].components=d.components,e.mapping.cards[Y]=d.mapping,null==f||f(Object.assign({},e)),ie(!0)}else null==f||f(Object.assign({},d))},template:h,variableListForImage:T})}),(ne.bodyVariables.length>0||ne.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:ne.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===(B=ne.descriptionComponents)||void 0===B?void 0:B.map(((n,o)=>e.jsx(m.default,{originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,type:n.type,descriptionComponent:n.component,showVariableModal:j,variableList:x},o))),(null===(q=null===(y=ne.urlBtns[0])||void 0===y?void 0:y.component)||void 0===q?void 0:q.buttons)&&(null===(D=null===(k=null===(E=ne.urlBtns[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)||void 0===D?void 0:D.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(L=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===L?void 0:L.map(((n,o)=>{if("URL"===n.type)return e.jsx(b.default,{variableListIndex:o,CTAoptions:null==C?void 0:C.CTAoptions,button:n,originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,updateSelectedURLTemplateBtn:le,variableList:x},`${o}`)})),(null===(I=null===(w=ne.qrbBtns[0])||void 0===w?void 0:w.component)||void 0===I?void 0:I.buttons)&&(null===(S=null===(M=null===(A=ne.qrbBtns[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===S?void 0:S.length)>0&&(Q!==t.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(s.BackTrackComponent,{backTrackMessage:null===(U=null==W?void 0:W.backTrackExtra)||void 0===U?void 0:U[0],setBackTrackMessage:null===(N=null==W?void 0:W.backTrackExtra)||void 0===N?void 0:N[1]})),null===(P=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===P?void 0:P.map(((n,o)=>{if("QUICK_REPLY"===n.type)return e.jsx(b.default,{variableListIndex:o,QRBoptions:null==C?void 0:C.QRBoptions,button:n,originalVariableList:null!=Y&&Y>-1?_.cards[Y]:_,updateSelectedQRBTemplateBtn:ae},`${o}`)})),Q===t.POD.CHATBOT&&Z&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(R=null==W?void 0:W.discountCodeExtra)||void 0===R?void 0:R[0],setDiscountCode:null===(F=null==W?void 0:W.discountCodeExtra)||void 0===F?void 0:F[1],variableList:x}),null===(H=null!=Y&&Y>-1?_.cards[Y].buttons:null==_?void 0:_.buttons)||void 0===H?void 0:H.map(((n,o)=>{var t,i,l;if("COPY_CODE"===n.type)return e.jsx(u.default,{index:o,variable:{variableName:null!==(t=n.text)&&void 0!==t?t:"",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:se,componentType:"BUTTONS"},o)}))]}))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),i=require("react"),n=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../custom-date-time/CustomDateTime.js"),u=require("../../dropdown/Dropdown.js"),d=require("../../input/Input.js"),r=require("../../product-picker-v2/collectionScreen.js"),c=require("../../template-preview/constants/regexPatterns.js"),p=require("../../template-preview/models/Channels.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),h=require("../context/templateModalContext.js"),x=require("../utils/getVariableNameEmail.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const O=j(n).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===p.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,_={value:"custom_link",label:"Custom URL"},y={value:"custom_text",label:"Custom text"},f={value:"static_expiry",label:"Static Expiry"};exports.Container=h,exports.default=i=>{let{onFocus:x,variable:E,index:T,showVariableModal:A,variableList:C,setShowDiscountCheckBox:N,componentType:S,CTAoptions:P}=i;var V,L;const[k,H]=n.useState(!1),[w,D]=n.useState(""),[B,q]=n.useState([]),[Y,M]=n.useState(),[R,U]=n.useState(!1),[I,W]=n.useState(!1),{device:$,channel:z,isError:Z,originalVariableList:F,template:G,templateSelectionTriggered:K,setTemplate:J,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:te,pod:le,selectedCarouselIndex:ae,isProductCarouselType:ne}=O.useTemplateModalContext();function ie(){var e,t;const l=[];let a=[];if(z!==p.CHANNEL_TYPE.MESSAGE||te){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[_,y]}),M(_)):"date_time"===(null==E?void 0:E.type)?(l.push({label:"",options:[_,y]}),M(f)):(l.push({label:"",options:[_,y,f]}),M(y));const e=null!=ee?ee:[];q([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ee?ee:[];q([{label:"",options:[y,_]},...e]),a=[{label:"",options:[y,_]},...e]}if((z===p.CHANNEL_TYPE.WHATSAPP||z===p.CHANNEL_TYPE.EMAIL||z===p.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(r.placeHolderNamePattern.test(E.updatedValue)&&z===p.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(A){let t=e.updatedValue;if(le===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,a,z);e.value&&M(e)}else"date_time"===E.type?(M(f),D(E.updatedValue),de(null!==(e=E.index)&&void 0!==e?e:0,E.updatedValue)):(null===(t=E.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(M(_),D(E.updatedValue.split("https://")[1])):(M(y),D(E.updatedValue))}function se(e,t){var l,a,n;const i=e;D(""),M(i),z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(ue(null!==(l=i.value)&&void 0!==l?l:"","string"),null==de||de(null!==(a=E.index)&&void 0!==a?a:0,i.value,!0)):(null==de||de(null!==(n=E.index)&&void 0!==n?n:0,w,!0,i.value),ue("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?ue(i.value,"url"===i.bikPlaceholderType?"link":"string"):(D(""),ue("",i.value))}function oe(e,t){var l;D(t);const a="custom_link"===(null==Y?void 0:Y.value)&&t?t.includes("https")?t:`https://${t}`:t;ue(a,"static_expiry"===e?"string":e),z===p.CHANNEL_TYPE.WHATSAPP&&(null==de||de(null!==(l=E.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ue(e,t){var l,n,i,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(z!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(T+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===$?"template_html_mobile":"template_html_desktop"),i=z===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:E.variableName);const s=F.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==X||X(s)}if(z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ae&&ae>-1&&ne){const t=Object.assign({},F).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>T===a?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):t))})}));return void(null==X||X((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ae&&ae>-1?F.cards[ae]:F;let u=l.body,d=l.header,c=l.buttons;if("BODY"===S?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(c=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===T?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ae&&ae>-1){const e=a.cloneDeep(F.cards);e[ae]={header:d,body:u,buttons:c},null==X||X((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==X||X((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function de(e,t,l,n){var i,s,o,u,d,c,r;if(null!=ae&&ae>-1&&ne){const s=Object.assign({},G).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,s,o;if("BODY"!==l.type)return l;if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(o=null===(s=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}}))})))}):l})),o=a.cloneDeep(G);if(l){const l=null===(i=Object.assign({},G).mapping.cards)||void 0===i?void 0:i.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==J||J(o))}const p=null!=ae&&ae>-1?{components:null===(s=Object.assign({},G).components[1].cards)||void 0===s?void 0:s[ae].components,mapping:null===(o=Object.assign({},G).mapping.cards)||void 0===o?void 0:o[ae]}:Object.assign({},G),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,s,o,u,d,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(o=null===(s=null===(i=m.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(r=l.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;m.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=ae&&ae>-1&&G){const e=a.cloneDeep(G);e.components[1].cards[ae].components=p.components,e.mapping.cards[ae]=p.mapping,null==J||J(e)}else null==J||J(Object.assign({},p))}return n.useEffect((()=>{k&&(null==x||x())}),[k]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===$?"template_html_mobile":"template_html_desktop",s=document.getElementById(i),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==s?void 0:s.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);z===p.CHANNEL_TYPE.EMAIL&&(null==Q||Q(o))}()}),[K]),n.useEffect((()=>{ie()}),[]),n.useEffect((()=>{ie()}),[ae]),n.useEffect((()=>{$&&Y&&w&&setTimeout((()=>{ue("custom_link"===(null==Y?void 0:Y.value)&&w?w.includes("https")?w:`https://${w}`:w,Y.value)}),100)}),[$]),n.useEffect((()=>{!I&&Y&&E.updatedValue&&setTimeout((()=>{ue("custom_link"===(null==Y?void 0:Y.value)&&E.updatedValue?E.updatedValue.includes("https")?E.updatedValue:`https://${E.updatedValue}`:E.updatedValue,Y.value),W(!0)}),100)}),[Y]),e.jsxs(h,Object.assign({channel:z,focused:k,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:Z&&!Y?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(V=E.variableName)||void 0===V?void 0:V.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:A?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==Y?void 0:Y.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:le===m.POD.CHATBOT?null==Y?void 0:Y.value:c.truncate(null!==(L=null==Y?void 0:Y.label)&&void 0!==L?L:"",20,!0)})),e.jsx(t.default,{onClick:()=>{U(!R)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{options:B,isSearchable:!1,onSelect:se,defaultOptions:Y?[Object.assign(Object.assign({},Y),{selected:!0})]:[]})})),("custom_text"===(null==Y?void 0:Y.value)||"custom_link"===(null==Y?void 0:Y.value))&&e.jsx(d.Input,{labelText:"custom_text"===(null==Y?void 0:Y.value)?"Custom text value":"custom_link"===(null==Y?void 0:Y.value)?"Custom URL value":"",id:`variable-value-${null==Y?void 0:Y.value}-${T}`,value:w,errorMessage:Z?w&&0!==w.trim().length?"custom_link"!==Y.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==Y.value&&w.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==Y.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==Y?void 0:Y.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==Y?void 0:Y.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===Y.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(Y.value,e)}}),"static_expiry"===(null==Y?void 0:Y.value)&&e.jsx(o.CustomDateTime,{placement:"auto",time:w?l.format(new Date(w),"hh:mm a"):l.format(new Date,"hh:mm a"),date:w?new Date(w):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{oe("static_expiry",e.toISOString())}}),R&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=C?C:[],showVariable:R,setShowVariable:U,placeholder:"Add a variable",customTrigger:e=>{null==N||N(!1),"{{custom.url}}"===e.actualValue?se({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?se({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?se({label:e.displayName,selected:!0,value:"static_expiry"}):se({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,_={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=O,exports.default=n=>{let{onFocus:j,variable:y,index:T,showVariableModal:A,variableList:N,setShowDiscountCheckBox:C,componentType:S,CTAoptions:P}=n;var V,L;const[k,H]=i.useState(!1),[w,D]=i.useState(""),[B,q]=i.useState([]),[Y,M]=i.useState(),[R,U]=i.useState(!1),[I,W]=i.useState(!1),{device:$,channel:z,isError:Z,originalVariableList:F,template:G,templateSelectionTriggered:K,setTemplate:J,setDisplayContent:Q,setOriginalVariableList:X,globalNormalizedPlaceholders:ee,enabledCustomText:te,pod:le,selectedCarouselIndex:ae}=h.useTemplateModalContext();function ie(){var e,t;const l=[];let a=[];if(z!==p.CHANNEL_TYPE.MESSAGE||te){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,f]}),M(_)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,f]}),M(E)):(l.push({label:"",options:[_,f,E]}),M(f));const e=null!=ee?ee:[];q([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ee?ee:[];q([{label:"",options:[f,_]},...e]),a=[{label:"",options:[f,_]},...e]}if((z===p.CHANNEL_TYPE.WHATSAPP||z===p.CHANNEL_TYPE.EMAIL||z===p.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(c.placeHolderNamePattern.test(y.updatedValue)&&z===p.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&z!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(A){let t=e.updatedValue;if(le===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==P?void 0:P.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,z);e.value&&M(e)}else"date_time"===y.type?(M(E),D(y.updatedValue),ue(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(M(_),D(y.updatedValue.split("https://")[1])):(M(f),D(y.updatedValue))}function ne(e,t){var l,a,i;const n=e;D(""),M(n),z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(oe(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=y.index)&&void 0!==i?i:0,w,!0,n.value),oe("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?oe(n.value,"url"===n.bikPlaceholderType?"link":"string"):(D(""),oe("",n.value))}function se(e,t){var l;D(t);const a="custom_link"===(null==Y?void 0:Y.value)&&t?t.includes("https")?t:`https://${t}`:t;oe(a,"static_expiry"===e?"string":e),z===p.CHANNEL_TYPE.WHATSAPP&&(null==ue||ue(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function oe(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(z!==p.CHANNEL_TYPE.WHATSAPP){const a=x.getVariableNameForEmailByIndex(T+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===$?"template_html_mobile":"template_html_desktop"),n=z===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=F.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==X||X(s)}if(z===p.CHANNEL_TYPE.WHATSAPP){const l=null!=ae&&ae>-1?F.cards[ae]:F;let u=l.body,d=l.header,r=l.buttons;if(console.log("variableList: ",l),"BODY"===S?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===T?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ae&&ae>-1){const e=a.cloneDeep(F.cards);e[ae]={header:d,body:u,buttons:r},null==X||X((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==X||X((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ue(e,t,l,i){var n,s,o,u,d,r;const c=null!=ae&&ae>-1?{components:null===(n=Object.assign({},G).components[1].cards)||void 0===n?void 0:n[ae].components,mapping:null===(s=Object.assign({},G).mapping.cards)||void 0===s?void 0:s[ae]}:Object.assign({},G),p=null===(o=null==c?void 0:c.components)||void 0===o?void 0:o.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(c.components=p,l)if("BODY"===S&&(null===(u=null==c?void 0:c.mapping)||void 0===u?void 0:u.body))c.mapping=Object.assign(Object.assign({},c.mapping),{body:c.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(d=null==c?void 0:c.mapping)||void 0===d?void 0:d.header))c.mapping=Object.assign(Object.assign({},c.mapping),{header:c.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(r=null==c?void 0:c.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;p.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),c.mapping=Object.assign(Object.assign({},c.mapping),{buttons:c.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ae&&ae>-1&&G){const e=a.cloneDeep(G);e.components[1].cards[ae].components=c.components,e.mapping.cards[ae]=c.mapping,null==J||J(e)}else null==J||J(Object.assign({},c))}return i.useEffect((()=>{k&&(null==j||j())}),[k]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===$?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);z===p.CHANNEL_TYPE.EMAIL&&(null==Q||Q(o))}()}),[K]),i.useEffect((()=>{ie()}),[]),i.useEffect((()=>{ie()}),[ae]),i.useEffect((()=>{$&&Y&&w&&setTimeout((()=>{oe("custom_link"===(null==Y?void 0:Y.value)&&w?w.includes("https")?w:`https://${w}`:w,Y.value)}),100)}),[$]),i.useEffect((()=>{!I&&Y&&y.updatedValue&&setTimeout((()=>{oe("custom_link"===(null==Y?void 0:Y.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,Y.value),W(!0)}),100)}),[Y]),e.jsxs(O,Object.assign({channel:z,focused:k,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:Z&&!Y?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(V=y.variableName)||void 0===V?void 0:V.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:A?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==Y?void 0:Y.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:le===m.POD.CHATBOT?null==Y?void 0:Y.value:r.truncate(null!==(L=null==Y?void 0:Y.label)&&void 0!==L?L:"",20,!0)})),e.jsx(t.default,{onClick:()=>{U(!R)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{options:B,isSearchable:!1,onSelect:ne,defaultOptions:Y?[Object.assign(Object.assign({},Y),{selected:!0})]:[]})})),("custom_text"===(null==Y?void 0:Y.value)||"custom_link"===(null==Y?void 0:Y.value))&&e.jsx(d.Input,{labelText:"custom_text"===(null==Y?void 0:Y.value)?"Custom text value":"custom_link"===(null==Y?void 0:Y.value)?"Custom URL value":"",id:`variable-value-${null==Y?void 0:Y.value}-${T}`,value:w,errorMessage:Z?w&&0!==w.trim().length?"custom_link"!==Y.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==Y.value&&w.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==Y.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==Y?void 0:Y.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==Y?void 0:Y.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===Y.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{se(Y.value,e)}}),"static_expiry"===(null==Y?void 0:Y.value)&&e.jsx(o.CustomDateTime,{placement:"auto",time:w?l.format(new Date(w),"hh:mm a"):l.format(new Date,"hh:mm a"),date:w?new Date(w):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{se("static_expiry",e.toISOString())}}),R&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:R,setShowVariable:U,placeholder:"Add a variable",customTrigger:e=>{null==C||C(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAp
|
|
|
5
5
|
export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
6
6
|
export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
7
7
|
export interface WhatsAppTemplateCardButtonV2Props {
|
|
8
|
-
|
|
8
|
+
originalVariableList: WhatsAppTemplateVariables;
|
|
9
9
|
updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
|
|
10
10
|
updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
|
|
11
11
|
button: TEMPLATE_BUTTON;
|
|
@@ -14,5 +14,5 @@ export interface WhatsAppTemplateCardButtonV2Props {
|
|
|
14
14
|
variableList?: VariableListInterfaceV2[];
|
|
15
15
|
variableListIndex: number;
|
|
16
16
|
}
|
|
17
|
-
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn,
|
|
17
|
+
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
export default WhatsAppTemplateCardButtonV2;
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../dropdown/Dropdown.js"),l=require("../../input/Input.js"),i=require("../../template-preview/constants/regexPatterns.js"),s=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),d=require("../context/templateModalContext.js"),u=require("../custom-hooks/useAdditionalVariables.js"),b=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{variableListIndex:m,button:j,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:x,originalVariableList:y,CTAoptions:g,QRBoptions:O,variableList:h}=c;var f,L,T,V;const[U,R]=t.useState(""),[q,C]=t.useState(),w=u.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{setOriginalVariableList:B,isError:N,disableEditVariable:S,pod:I}=d.useTemplateModalContext();function E(e){R(e);const t=[Object.assign(Object.assign({},y.buttons[0]),{type:o.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==B||B((e=>Object.assign(Object.assign({},e),{body:[...y.body],buttons:[...t]}))),null==v||v(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(j.buttonVariable&&i.editableVarPattern.test(j.buttonVariable))C(s.CUSTOM_URL_NAME),R((null===(e=j.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===j.type?g:O;e="URL"===j.type?t.findIndex((e=>e.placeHolder===j.buttonVariable)):t.findIndex((e=>e.label===j.flowName)),e>-1&&C(t[e])}}),[]),I!==o.POD.CHATBOT?e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:[j.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(a.Dropdown,{disabled:S,options:"URL"===j.type?g:O,isSearchable:!0,onSelect:function(e,t){const a=e;C(a);const l=("URL"===j.type?g:O).find((e=>e.placeHolder===a.placeHolder));if(l)if("custom_link"!==l.value){let e;"URL"===j.type?(e=[Object.assign(Object.assign({},y.buttons[0]),{type:"URL",buttonVariable:a.placeHolder,example:["https://bik.ai/"]})],null==v||v({defaultValue:l.value,placeHolder:l.placeHolder},"placeholder")):(e=y.buttons.map(((e,t)=>t===j.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:a.label,flowId:a.value}):e)),null==x||x({flowName:a.label,flowId:a.value},"placeholder",j.index)),null==B||B((t=>Object.assign(Object.assign({},t),{body:[...y.body],buttons:[...e]})))}else E("")},defaultOptions:q?[Object.assign(Object.assign({},q),{selected:!0})]:[]})})),"custom_link"===(null==q?void 0:q.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(l.Input,{state:S?"disabled":"none",errorMessage:N?U?b.validateIsUrl(U)?"":"Enter valid URL":"Required field":"",value:U,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:E,maxCharLimit:2e3})}))]}):e.jsx(p.default,{index:m,variable:{variableName:null!==(f=j.text)&&void 0!==f?f:"",updatedValue:"((customPlaceholderName))"===j.buttonVariable?`${null===(L=j.example)||void 0===L?void 0:L[0]}`:null!==(T=j.buttonVariable)&&void 0!==T?T:"",type:"link",isEditableVariable:!0,index:null!==(V=j.index)&&void 0!==V?V:0},showVariableModal:!0,componentType:"BUTTONS",variableList:w,CTAoptions:g})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),a=require("../../../assets/icons/qrb.svg.js"),i=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),l=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),a=require("../../../assets/icons/qrb.svg.js"),i=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),l=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),x=require("../helpers/VariableEditorHelper.js"),u=require("../models/TemplateMeta.js"),c=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=T(o);const y=f.default.div`
|
|
2
2
|
position: absolute;
|
|
3
3
|
width: 8px;
|
|
4
4
|
height: 8px;
|
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
`,g=f.default(C)`
|
|
17
17
|
font-weight: 600;
|
|
18
18
|
margin-bottom: 8px;
|
|
19
|
-
`,E=new
|
|
19
|
+
`,E=new x.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:x,headerMediaType:T,headerText:f,headerAssetLink:b,headerAssetName:q,quickReplybtn:v,ctaBtn:O,actionTypes:_,extras:S,showHeader:w,imagePreviewStyles:I,size:L,bodyVariableList:P,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R}=o,B=E.format(p,P),H=E.format(f,A),{isWhatsappCarousel:Y,selectedCarouselIndex:U}=n.useTemplateModalContext(),D={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:i.default,QUICK_REPLY:a.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===U,isWhatsappCarousel:Y},{children:[!Y&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===u.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:H}}):T!==u.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:b,headerAssetName:q,mediaType:T,imagePreviewStyles:T===u.HEADER_TYPES.IMAGE?I:{}}):e.jsx(e.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsx(m.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:B}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(l.Tooltip,Object.assign({body:null!=x?x:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:x}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,r)=>e.jsx(c.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:D[t.type],size:L},r))):_===u.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):_===u.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:w?d.Caption:d.BodySecondary,extraContent:S?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:i.default,size:L},r)))}):e.jsx(e.Fragment,{})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("date-fns"),i=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),l=require("../constants/TemplateConstants.js"),o=require("../models/TemplateMeta.js"),a=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e,t){var i,n,l,a,d,r,v,s,E,u;const p={headerType:o.HEADER_TYPES.NONE,headerVariables:[]},T=null===(i=e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(T){p.headerType=T.format,p.headerText=T.text,p.headerAssetLink=null===(l=null===(n=T.example)||void 0===n?void 0:n.header_handle)||void 0===l?void 0:l[0];const i=null===(d=null===(a=T.example)||void 0===a?void 0:a.header_text)||void 0===d?void 0:d[0],o=null===(v=null===(r=e.mapping)||void 0===r?void 0:r.header)||void 0===v?void 0:v[0],c=o;if(i&&o){const e=null==o?void 0:o.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(o),l={idx:0,variableVal:t?i:c,editable:n,editableDefaultValues:n?void 0:i,variableName:e};p.headerVariables=[l],(null===(E=null===(s=T.example)||void 0===s?void 0:s.header_text)||void 0===E?void 0:E.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,i,d,r,v,s,E,u,p,T,c,_,m,h,R,b,I,L,y,B,N,C,O;const D=/\p{Extended_Pictographic}/u;let x="valid";const A={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},f=new a.TemplateHelperUtils;let P=!1;const k=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?(null===(i=e.meta.name)||void 0===i?void 0:i.trim().length)>l.NAME_LEN_LIMIT?(A.meta.name=l.NAME_LEN_ERROR,x="invalid"):n.specialCharPattern.test(null===(d=e.meta.name)||void 0===d?void 0:d.trim())&&(A.meta.name=l.NO_SPECIAL_CHAR,x="invalid"):(A.meta.name=l.REQUIRED_FIELD,x="invalid"),A.meta.name&&!P&&(k(l.CREATE_TEMPLATE_DOM_IDS.name),P=!0),e.headerType===o.HEADER_TYPES.TEXT){const t=null!==(v=null===(r=e.headerText)||void 0===r?void 0:r.trim())&&void 0!==v?v:"";if(t)if(t.length>l.HEADER_TEXT_LEN_LIMIT)A.header=l.HEADER_LEN_ERROR,x="invalid";else{const e=f.getTemplateVariablesFromState(t);e&&e.length>1&&(A.header=l.ONE_VAR_ALLOWED,x="invalid")}else A.header=l.REQUIRED_FIELD,x="invalid"}else e.headerType===o.HEADER_TYPES.DOCUMENT||e.headerType===o.HEADER_TYPES.IMAGE||(e.headerType,o.HEADER_TYPES.VIDEO);if(e.headerType!==o.HEADER_TYPES.DOCUMENT&&e.headerType!==o.HEADER_TYPES.IMAGE&&e.headerType!==o.HEADER_TYPES.VIDEO||e.headerAssetLink||(A.header=l.HEADER_ASSET_LINK_ERROR,x="invalid"),A.header&&!P&&(k(l.CREATE_TEMPLATE_DOM_IDS.header),P=!0),e.bodyText?e.bodyTextRaw&&(null===(s=e.bodyTextRaw)||void 0===s?void 0:s.trim().length)>l.BODY_TEXT_LEN_LIMIT&&(A.body=l.BODY_LEN_ERROR,x="invalid"):(A.body=l.REQUIRED_FIELD,x="invalid"),A.body&&!P&&(k(l.CREATE_TEMPLATE_DOM_IDS.body),P=!0),e.footerText&&e.footerText.length>l.HEADER_TEXT_LEN_LIMIT&&(A.footer=l.HEADER_LEN_ERROR,x="invalid"),(null==A?void 0:A.footer)&&!P&&(k(l.CREATE_TEMPLATE_DOM_IDS.footer),P=!0),e.actionsType===o.ACTIONS_TYPES.CTA_BTN){if(null===(u=null===(E=e.ctaBtn)||void 0===E?void 0:E.phoneNumber)||void 0===u?void 0:u.isChecked){const t=null===(p=e.ctaBtn.phoneNumber.btnText)||void 0===p?void 0:p.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;A.ctaBtn&&!t?(A.ctaBtn.phoneNumber.btnText=l.REQUIRED_FIELD,x="invalid"):A.ctaBtn&&t&&t.length>l.QUICK_REPLY_BTN_TEXT_LIMIT?(A.ctaBtn.phoneNumber.btnText=l.QUICK_REPLY_LEN_ERROR,x="invalid"):A.ctaBtn&&t&&D.test(t)&&(A.ctaBtn.phoneNumber.btnText=l.BUTTON_EMOJI_ERROR,x="invalid"),A.ctaBtn&&!i?(A.ctaBtn.phoneNumber.link=l.REQUIRED_FIELD,x="invalid"):A.ctaBtn&&i&&i.length<10&&(A.ctaBtn.phoneNumber.link=l.VALID_PHONE_NUMBER,x="invalid")}if(null===(c=null===(T=e.ctaBtn)||void 0===T?void 0:T.websiteLinkBtn)||void 0===c?void 0:c.isChecked){const t=null===(_=e.ctaBtn.websiteLinkBtn.btnText)||void 0===_?void 0:_.trim(),i=null===(m=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===m?void 0:m.trim(),n=null===(h=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===h?void 0:h.trim();A.ctaBtn&&!t?(A.ctaBtn.websiteLink.btnText=l.REQUIRED_FIELD,x="invalid"):A.ctaBtn&&t&&t.length>l.QUICK_REPLY_BTN_TEXT_LIMIT?(A.ctaBtn.websiteLink.btnText=l.QUICK_REPLY_LEN_ERROR,x="invalid"):A.ctaBtn&&t&&D.test(t)&&(A.ctaBtn.websiteLink.btnText=l.BUTTON_EMOJI_ERROR,x="invalid"),!A.ctaBtn||i||n||(A.ctaBtn.websiteLink.link=l.REQUIRED_FIELD,x="invalid")}}else if(e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{var o;const a=null===(o=i.text)||void 0===o?void 0:o.trim();if(a)if(a.length>l.QUICK_REPLY_NAME_LEN_LIMIT)t[n]=l.QUICK_REPLY_LEN_ERROR,x="invalid";else if(D.test(a))t[n]=l.BUTTON_EMOJI_ERROR,x="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===a))&&(t[n]=l.QUICK_REPLY_NAME_ERROR,x="invalid")}else t[n]=l.REQUIRED_FIELD,x="invalid"})),A.quickReply=t}if(e.actionsType===o.ACTIONS_TYPES.CTA_BTN||e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=A.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(I=null===(b=null==A?void 0:A.ctaBtn)||void 0===b?void 0:b.websiteLink)||void 0===I?void 0:I.link)||(null===(y=null===(L=A.ctaBtn)||void 0===L?void 0:L.websiteLink)||void 0===y?void 0:y.btnText)||(null===(N=null===(B=A.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.link)||(null===(O=null===(C=A.ctaBtn)||void 0===C?void 0:C.phoneNumber)||void 0===O?void 0:O.btnText)||e)&&!P&&(k(l.CREATE_TEMPLATE_DOM_IDS.actionButtons),P=!0)}return{status:x,errors:A}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],l=arguments.length>2?arguments[2]:void 0;var o,a,d,r,v;const s=[];let E="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,v=d&&/\(\(/.test(d),E=null==d?void 0:d.match(n.placeHolderNamePattern);(null==E?void 0:E[2])&&(d=null==E?void 0:E[2]),s.push({idx:i,variableVal:l?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),E=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==s?void 0:s[n]){const l=s[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${i.COLORS.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:E}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,l,a,d,r,v;const s={actionsType:o.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},E=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(E&&(null===(i=null==E?void 0:E.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(l=null==E?void 0:E.buttons)||void 0===l?void 0:l[0].type)?o.ACTIONS_TYPES.QUICK_REPLY:o.ACTIONS_TYPES.CTA_BTN;if(s.actionsType=t,t===o.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==E?void 0:E.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];s.quickReply=e}else t===o.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==E?void 0:E.buttons)||void 0===r||r.forEach((t=>{var i,l,o,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(l=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===l?void 0:l[0])&&void 0!==o?o:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),s.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));s.allButtons=null===(v=E.buttons)||void 0===v?void 0:v.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return s}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t.format(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:l=!1,showSampleValues:o}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:E,bodyVariable:u}=yield this.parseBodyComponent(e,l,o),{actionsType:p,quickReply:T,ctaBtn:c,allButtons:_}=yield this.parseButtonComponent(e),m=this.parseLimitedTimeOfferComponent(e,_),h={quickReply:T,ctaBtn:c,allButtons:_,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:p,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:E,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:m},{errors:R}=this.validateState(h);return h.error=R,h}))}};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("date-fns"),i=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),l=require("../constants/TemplateConstants.js"),o=require("../models/TemplateMeta.js"),a=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e,t){var i,n,l,a,d,r,s,v,E,u;const p={headerType:o.HEADER_TYPES.NONE,headerVariables:[]},T=null===(i=e.components)||void 0===i?void 0:i.find((e=>"HEADER"===e.type));if(T){p.headerType=T.format,p.headerText=T.text,p.headerAssetLink=null===(l=null===(n=T.example)||void 0===n?void 0:n.header_handle)||void 0===l?void 0:l[0];const i=null===(d=null===(a=T.example)||void 0===a?void 0:a.header_text)||void 0===d?void 0:d[0],o=null===(s=null===(r=e.mapping)||void 0===r?void 0:r.header)||void 0===s?void 0:s[0],c=o;if(i&&o){const e=null==o?void 0:o.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),n=/\(\(/.test(o),l={idx:0,variableVal:t?i:c,editable:n,editableDefaultValues:n?void 0:i,variableName:e};p.headerVariables=[l],(null===(E=null===(v=T.example)||void 0===v?void 0:v.header_text)||void 0===E?void 0:E.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,i,d,r,s,v,E,u,p,T,c,_,m,h,R,b,I,L,y,B,N;const C=/\p{Extended_Pictographic}/u;let O="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},x=new a.TemplateHelperUtils;let A=!1;const f=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>l.NAME_LEN_LIMIT?(D.meta.name=l.NAME_LEN_ERROR,O="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=l.NO_SPECIAL_CHAR,O="invalid"):(D.meta.name=l.REQUIRED_FIELD,O="invalid"),D.meta.name&&!A&&(f(l.CREATE_TEMPLATE_DOM_IDS.name),A=!0),e.headerType===o.HEADER_TYPES.TEXT){const t=null!==(d=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==d?d:"";if(t)if(t.length>l.HEADER_TEXT_LEN_LIMIT)D.header=l.HEADER_LEN_ERROR,O="invalid";else{const e=x.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=l.ONE_VAR_ALLOWED,O="invalid")}else D.header=l.REQUIRED_FIELD,O="invalid"}else e.headerType===o.HEADER_TYPES.DOCUMENT||e.headerType===o.HEADER_TYPES.IMAGE||(e.headerType,o.HEADER_TYPES.VIDEO);if(e.headerType!==o.HEADER_TYPES.DOCUMENT&&e.headerType!==o.HEADER_TYPES.IMAGE&&e.headerType!==o.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=l.HEADER_ASSET_LINK_ERROR,O="invalid"),D.header&&!A&&(f(l.CREATE_TEMPLATE_DOM_IDS.header),A=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>l.BODY_TEXT_LEN_LIMIT&&(D.body=l.BODY_LEN_ERROR,O="invalid"):(D.body=l.REQUIRED_FIELD,O="invalid"),D.body&&!A&&(f(l.CREATE_TEMPLATE_DOM_IDS.body),A=!0),e.footerText&&e.footerText.length>l.HEADER_TEXT_LEN_LIMIT&&(D.footer=l.HEADER_LEN_ERROR,O="invalid"),(null==D?void 0:D.footer)&&!A&&(f(l.CREATE_TEMPLATE_DOM_IDS.footer),A=!0),e.actionsType===o.ACTIONS_TYPES.CTA_BTN){if(null===(v=null===(s=e.ctaBtn)||void 0===s?void 0:s.phoneNumber)||void 0===v?void 0:v.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),i=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=l.REQUIRED_FIELD,O="invalid"):D.ctaBtn&&t&&t.length>l.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=l.QUICK_REPLY_LEN_ERROR,O="invalid"):D.ctaBtn&&t&&C.test(t)&&(D.ctaBtn.phoneNumber.btnText=l.BUTTON_EMOJI_ERROR,O="invalid"),D.ctaBtn&&!i?(D.ctaBtn.phoneNumber.link=l.REQUIRED_FIELD,O="invalid"):D.ctaBtn&&i&&i.length<10&&(D.ctaBtn.phoneNumber.link=l.VALID_PHONE_NUMBER,O="invalid")}if(null===(p=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===p?void 0:p.isChecked){const t=null===(T=e.ctaBtn.websiteLinkBtn.btnText)||void 0===T?void 0:T.trim(),i=null===(c=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===c?void 0:c.trim(),n=null===(_=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===_?void 0:_.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=l.REQUIRED_FIELD,O="invalid"):D.ctaBtn&&t&&t.length>l.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=l.QUICK_REPLY_LEN_ERROR,O="invalid"):D.ctaBtn&&t&&C.test(t)&&(D.ctaBtn.websiteLink.btnText=l.BUTTON_EMOJI_ERROR,O="invalid"),!D.ctaBtn||i||n||(D.ctaBtn.websiteLink.link=l.REQUIRED_FIELD,O="invalid")}}else if(e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((i,n)=>{const o=i.text.trim();if(o)if(o.length>l.QUICK_REPLY_NAME_LEN_LIMIT)t[n]=l.QUICK_REPLY_LEN_ERROR,O="invalid";else if(C.test(o))t[n]=l.BUTTON_EMOJI_ERROR,O="invalid";else{const i=[...e.quickReply];i.splice(n,1);i.find((e=>e.text===o))&&(t[n]=l.QUICK_REPLY_NAME_ERROR,O="invalid")}else t[n]=l.REQUIRED_FIELD,O="invalid"})),D.quickReply=t}if(e.actionsType===o.ACTIONS_TYPES.CTA_BTN||e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const e=null===(m=D.quickReply)||void 0===m?void 0:m.reduce(((e,t)=>e||!!t),!1);((null===(R=null===(h=null==D?void 0:D.ctaBtn)||void 0===h?void 0:h.websiteLink)||void 0===R?void 0:R.link)||(null===(I=null===(b=D.ctaBtn)||void 0===b?void 0:b.websiteLink)||void 0===I?void 0:I.btnText)||(null===(y=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===y?void 0:y.link)||(null===(N=null===(B=D.ctaBtn)||void 0===B?void 0:B.phoneNumber)||void 0===N?void 0:N.btnText)||e)&&!A&&(f(l.CREATE_TEMPLATE_DOM_IDS.actionButtons),A=!0)}return{status:O,errors:D}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],l=arguments.length>2?arguments[2]:void 0;var o,a,d,r,s;const v=[];let E="";const u=null===(o=e.components)||void 0===o?void 0:o.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,i)=>{var o,a;let d=null===(a=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===a?void 0:a[i];const r=d,s=d&&/\(\(/.test(d),E=null==d?void 0:d.match(n.placeHolderNamePattern);(null==E?void 0:E[2])&&(d=null==E?void 0:E[2]),v.push({idx:i,variableVal:l?t:r,editable:!!s,editableDefaultValues:s?void 0:t,variableName:null!=d?d:""})})),E=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(s=u.text)||void 0===s?void 0:s.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==v?void 0:v[n]){const l=v[n].variableName;return t?`${e}{{${l}}}`:`${e} <span> </span><span style="color: ${i.COLORS.content.brand}; text-decoration: underline;">{{${l}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:v,bodyText:E}}parseFooterComponent(e){var t;const i=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==i?void 0:i.text}parseButtonComponent(e){var t,i,l,a,d,r,s;const v={actionsType:o.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},E=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(E&&(null===(i=null==E?void 0:E.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(l=null==E?void 0:E.buttons)||void 0===l?void 0:l[0].type)?o.ACTIONS_TYPES.QUICK_REPLY:o.ACTIONS_TYPES.CTA_BTN;if(v.actionsType=t,t===o.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==E?void 0:E.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];v.quickReply=e}else t===o.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==E?void 0:E.buttons)||void 0===r||r.forEach((t=>{var i,l,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(l=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===l?void 0:l[0])&&void 0!==o?o:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));v.allButtons=null===(s=E.buttons)||void 0===s?void 0:s.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return v}parseLimitedTimeOfferComponent(e,i){const n={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var l,o,a;if("limited_time_offer"===e.type){n.text=null!==(o=null===(l=e.limited_time_offer)||void 0===l?void 0:l.text)&&void 0!==o?o:"";const i=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;i&&i.startsWith("{{")&&i.endsWith("}}")?n.dateTime=i:n.dateTime=t.format(i?new Date(i):new Date,"MMM dd")}i.forEach((e=>{var t;"COPY_CODE"===e.type&&(n.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),n}parseUITemplateFromDBFormat(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:n,isV2:l=!1,showSampleValues:o}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:s,headerVariables:v}=yield this.parseDataFromHeaderComponent(e),{bodyText:E,bodyVariable:u}=yield this.parseBodyComponent(e,l,o),{actionsType:p,quickReply:T,ctaBtn:c,allButtons:_}=yield this.parseButtonComponent(e),m=this.parseLimitedTimeOfferComponent(e,_),h={quickReply:T,ctaBtn:c,allButtons:_,meta:{name:n?`${e.label} Copy`:e.label,category:null===(i=e.category)||void 0===i?void 0:i.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:p,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:E,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:s,headerVariables:v,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:m},{errors:R}=this.validateState(h);return h.error=R,h}))}};
|
|
@@ -31,6 +31,7 @@ export interface TemplateContextMapperProps {
|
|
|
31
31
|
disableEditVariable?: boolean;
|
|
32
32
|
pod?: POD;
|
|
33
33
|
extras?: ExtrasWhatsapp;
|
|
34
|
+
isProductCarouselType?: boolean;
|
|
34
35
|
pickerConf?: {
|
|
35
36
|
searchInCollection: any;
|
|
36
37
|
searchProducts: any;
|
|
@@ -39,4 +40,4 @@ export interface TemplateContextMapperProps {
|
|
|
39
40
|
storeId: string;
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues, disableEditVariable, pod, extras, isProductCarouselType, pickerConf, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import s from"../../utils/StringUtils.js";import{StyledModal as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import s from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as n}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as m}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:C,showVariableMapping:b,channel:g,htmlContent:v,templateVariables:S,onTemplateSelect:T,globalPlaceholders:f,showOnlyContent:P,whatsappSpecificPickerMeta:w,zIndex:x,showVariableModal:M,variableList:y,discountCode:L,setDiscountCode:V,onBackPress:j,enabledCustomText:E,variableListForImage:I,showSampleValues:k,disableEditVariable:A,pod:D,extras:O,isProductCarouselType:F,pickerConf:W}=u;var z,B,H,U;o((()=>{q(v)}),[v]);const $=g===n.WHATSAPP&&"CAROUSEL"===(null===(B=null===(z=h.components)||void 0===z?void 0:z[1])||void 0===B?void 0:B.type),[N,R]=a(g===n.EMAIL||$?"desktop":"mobile"),[_,q]=a(v),[G,J]=a(!1),[K,Q]=a(h),[X,Y]=a(null!=S?S:[]),[Z,ee]=a(!1),[le,te]=a(-1);const oe=i((()=>m(f)),[f]);return e(d.Provider,Object.assign({value:{template:K,setTemplate:Q,device:N,setDevice:R,display_content:_,setDisplayContent:q,originalVariableList:X,setOriginalVariableList:Y,isError:G,setIsError:J,channel:g,globalNormalizedPlaceholders:oe,templateSelectionTriggered:Z,setTemplateSelectionTriggered:ee,enabledCustomText:E,disableEditVariable:A,pod:D,extras:O,isWhatsappCarousel:$,selectedCarouselIndex:le,setSelectedCarouselIndex:te,isProductCarouselType:h.isProductCarouselType,pickerConf:W}},{children:P?e(p,{channel:n.EMAIL,hideHeader:!0}):l(r,Object.assign({zIndex:x,centralContainerStyles:{width:$?900:g===n.EMAIL&&b?1e3:800},open:!0,onClose:()=>{null==C||C()},headingTitle:null==K?void 0:K.label,headingSubtitle:g===n.WHATSAPP?`${s.capitaliseFirstLetterOfString(null!==(H=null==K?void 0:K.category)&&void 0!==H?H:"")} • ${null!==(U=null==K?void 0:K.templateCategory)&&void 0!==U?U:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e(p,{showSampleValues:k,showVariableMapping:b,channel:g,whatsappSpecificPickerMeta:w,showVariableModal:M,variableList:y,discountCode:L,setDiscountCode:V,variableListForImage:I&&(null==I?void 0:I.length)>0?I:y}),T?e(c,{isWhatsappCarousel:null!=$&&$,onSelect:function(){const e=null==T?void 0:T(K,X,null!=_?_:"");e?J(!!e):ee(!0)}}):e(t,{})]}))}))};export{u as TemplateContextMapper};
|
|
@@ -30,7 +30,6 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
30
30
|
selectedCarouselIndex?: number | undefined;
|
|
31
31
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
32
32
|
isProductCarouselType?: boolean | undefined;
|
|
33
|
-
cardCount?: number | undefined;
|
|
34
33
|
pickerConf?: {
|
|
35
34
|
searchInCollection: any;
|
|
36
35
|
searchProducts: any;
|
|
@@ -63,7 +62,6 @@ export declare const useTemplateModalContext: () => {
|
|
|
63
62
|
selectedCarouselIndex?: number | undefined;
|
|
64
63
|
setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
|
|
65
64
|
isProductCarouselType?: boolean | undefined;
|
|
66
|
-
cardCount?: number | undefined;
|
|
67
65
|
pickerConf?: {
|
|
68
66
|
searchInCollection: any;
|
|
69
67
|
searchProducts: any;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as a}from"react";import l from"styled-components";import{CarouselPreview as i}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as a}from"react";import l from"styled-components";import{CarouselPreview as i}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as m}from"../utils/getVariableNameEmail.js";import{highlightFor as d}from"../utils/highlightFor.js";import c from"./DesktopPreview.js";import u from"./EditWhatsAppTemplateV2.js";import h from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const v=l.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
4
|
`,w=l.div`
|
|
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as
|
|
|
14
14
|
flex: 1;
|
|
15
15
|
height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
|
|
16
16
|
overflow-y: auto;
|
|
17
|
-
`,b=l=>{const{showVariableMapping:b,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:
|
|
17
|
+
`,b=l=>{const{showVariableMapping:b,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:j,discountCode:y,setDiscountCode:M,variableListForImage:V,showSampleValues:A}=l,S=a(),W=a(),{device:T,display_content:E,channel:L,template:k,setTemplate:I,isWhatsappCarousel:_}=p();const D=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(v,{children:[t(g,Object.assign({showOnlyContent:C,showVariableMapping:b,isWhatsappCarousel:_},{children:"mobile"===T?t(h,{ref:W,display_content:null!=E?E:"",channel:L,template:k,showSampleValues:A}):L===s.WHATSAPP&&_?t(i,{ref:S,channel:L,template:k,showSampleValues:A}):L!==s.MESSAGE?t(c,{ref:S,channel:L,display_content:null!=E?E:"",showSampleValues:A}):t(o,{})})),b&&t(w,Object.assign({channel:L},{children:L!==s.WHATSAPP?t(f,{onFocus:L===s.EMAIL?function(e){var t,o,a;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===T?"template_html_mobile":"template_html_desktop"),i=m(e+1),n=L===s.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(i):document.getElementById(i),p=D(n),c=null==n?void 0:n.offsetLeft;"desktop"===T?p&&S.current&&(null===(o=null==l?void 0:l.contentWindow)||void 0===o||o.scrollTo(null!=c?c:0,p),d(i,r.background.warning.light,2,L,T)):p&&W.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),d(i,r.background.warning.light,2,L,T))}:void 0,showVariableModal:P,variableList:j,discountCode:y,setDiscountCode:M}):L===s.WHATSAPP&&_?t(n,{whatsappSpecificPickerMeta:x,template:k,showVariableModal:P,variableList:j,variableListForImage:V,discountCode:y,setDiscountCode:M}):t(u,{whatsappSpecificPickerMeta:x,template:k,onTemplateChange:e=>{null==I||I(e)},showVariableModal:P,variableList:j,variableListForImage:V,discountCode:y,setDiscountCode:M})}))]})};export{b as default};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/PlusIcon.js";import{useState as i,useEffect as s}from"react";import r from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as l}from"../../button/Button.js";import{IconButton as a}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as d}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as c,BodyCaption as m,TitleRegular as p}from"../../TypographyStyle.js";import{ProductPickerModal as f}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import h from"./EditWhatsAppTemplateV2.js";import g from"../../../assets/icons/box.svg.js";import y from"../../../assets/icons/delete.svg.js";import b from"../../../assets/icons/edit.svg.js";const x=r=>{let{template:a,whatsappSpecificPickerMeta:p,showVariableModal:g,variableList:y,variableListForImage:b,discountCode:x,setDiscountCode:v}=r;const{selectedCarouselIndex:I,setTemplate:C,pickerConf:w,isProductCarouselType:O}=u(),[k,T]=i(-1==I?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[P,S]=i(!1),[V,B]=i(!1),[L,F]=i([]);s((()=>{T(-1==I?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[I]);return e("div",{children:[t(c,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:k})),O&&L.length>0&&null!=I&&I>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(j,{editItem:()=>S(!P),cardBody:`${L.length} Products Selected`,deleteItem:()=>{F([])}}),t(l,{disabled:L.length<=1,style:{alignSelf:"flex-end",background:d.surface.subdued},onClick:()=>{S(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),O&&0===L.length&&null!=I&&I>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:o,onClick:e=>{S(!0)}}),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(m,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:o,onClick:e=>{B(!0)}})]})),t(h,{whatsappSpecificPickerMeta:p,template:a,onTemplateChange:e=>{null==C||C(e)},showVariableModal:g,variableList:y,variableListForImage:b,discountCode:x,setDiscountCode:v}),P&&w&&t(f,{zIndex:200,limit:1,storeId:w.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,s=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[s]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(L),collectionFetcher:w.fetchCollections,productFetcher:w.fetchProducts,onAdd:(e,t)=>{const o=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const s=i[e].variants;if(void 0!==s&&Object.keys(s).length)for(const r of Object.keys(s)){const{name:n,image:l,quantity:a,displayOrder:d}=s[r],c={name:n,image:l,quantity:a,variantId:r,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};o.push(c)}}}const i=o.sort(((e,t)=>e.displayOrder-t.displayOrder));F(i),S(!1)},searchInCollectionFetcher:w.searchInCollection,searchFetcher:w.searchProducts,visible:P,onClose:()=>{S(!1)}}),V&&t(n,{zIndex:2e3,data:null!=y?y:[],showVariable:V,setShowVariable:B,placeholder:"Add a variable",customTrigger:e=>{}})]})},j=o=>{const{cardBody:i,deleteItem:s,editItem:r}=o;return e(v,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(g,{})})),t("div",Object.assign({className:"card-body"},{children:t(p,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[r&&t(a,{style:{display:"flex"},Icon:b,onClick:e=>{r(),e.stopPropagation()}}),t(a,{style:{display:"flex",color:"#919191"},Icon:y,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},v=r.div`
|
|
2
2
|
width: ${e=>e.width};
|
|
3
3
|
padding: 12px;
|
|
4
4
|
display: flex;
|
|
@@ -44,4 +44,4 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"..
|
|
|
44
44
|
color: #000000;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
`;export{
|
|
47
|
+
`;export{x as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,_,D,M;const{originalVariableList:Q,pod:q,extras:Y,selectedCarouselIndex:H,isProductCarouselType:K}=s(),{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}=d(C),[J,Z]=e(!1),[oo,no]=e(-1===H?{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}:{}),[to,eo]=e(!1);function io(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=H&&H>-1&&K){const o=Object.assign({},C).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o?o.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?Z(!0):(Z(!1),null==B||B(""))}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=u.components,o.mapping.cards[H]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function lo(o,n,e){var i,l,s,a,d,r;const p=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C);if(null!=H&&H>-1&&K){const n=Object.assign({},C).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=p.components,o.mapping.cards[H]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Z(!0);else{Z(!1);const o=null===(n=null==Y?void 0:Y.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",oo)}),[oo]),i((()=>{var o,n,t,e;if(null!=H&&H>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);no({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[H]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",H),null!=H&&H>-1&&to){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),eo(!1)}}),[to]);const so=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!oo.imageComponent&&!K&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:oo.imageComponent,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[H].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[H]}:Object.assign({},C);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=d.components,o.mapping.cards[H]=d.mapping,null==j||j(Object.assign({},o)),eo(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(oo.bodyVariables.length>0||oo.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:oo.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(L=oo.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=H&&H>-1?Q.cards[H]:Q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedURLTemplateBtn:io,variableList:T},`${t}_${H}`)})),(null===(R=null===(w=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(q!==l.CHATBOT?n(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):n(r,{backTrackMessage:null===(N=null==Y?void 0:Y.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==Y?void 0:Y.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedQRBTemplateBtn:lo},`${t}_${H}`)})),q===l.CHATBOT&&J&&n(p,{discountCode:null===(_=null==Y?void 0:Y.discountCodeExtra)||void 0===_?void 0:_[0],setDiscountCode:null===(D=null==Y?void 0:Y.discountCodeExtra)||void 0===D?void 0:D[1],variableList:T}),null===(M=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===M?void 0:M.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:so,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|
|
1
|
+
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as e}from"lodash";import{useState as t,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 m from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import h from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:T,showVariableModal:V,variableList:x,variableListForImage:O,discountCode:B,setDiscountCode:y}=f;var E,k,L,w,I,A,U,q,M,N,D,R,S,H,P,Q,W,_;const{originalVariableList:F,pod:Y,extras:K,selectedCarouselIndex:$}=s(),{descriptionComponents:X,urlBtns:z,qrbBtns:G,imageComponent:J,bodyVariables:Z,headerVariables:oo}=d(C),[no,eo]=t(!1),[to,io]=t(-1===$?{descriptionComponents:X,urlBtns:z,qrbBtns:G,imageComponent:J,bodyVariables:Z,headerVariables:oo}:{}),[lo,so]=t(!1);function ao(o,n){var t,i,l,s,a,d,r;const p=null!=$&&$>-1?{components:null===(t=Object.assign({},C).components[1].cards)||void 0===t?void 0:t[$].components,mapping:null===(i=Object.assign({},C).mapping.cards)||void 0===i?void 0:i[$]}:Object.assign({},C),c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(l=null==p?void 0:p.components[c].buttons)||void 0===l?void 0:l.findIndex((o=>"URL"===o.type));if(void 0!==e&&e>-1){const t="custom"===n&&"string"==typeof o,i=[...null!==(d=null===(a=null===(s=p.components)||void 0===s?void 0:s[c])||void 0===a?void 0:a.buttons)&&void 0!==d?d:[]];i[e]=Object.assign(Object.assign({},i[e]),{url:"https://d.bik.ai/{{1}}",example:[t?o:"string"!=typeof o?o.defaultValue:""]});const l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),r=Object.assign(Object.assign({},p.mapping),{buttons:t?["((customBtnPlaceholder))"]:"string"!=typeof o?[o.placeHolder]:void 0});p.mapping=r;const m=[...p.components];m[c]=l,p.components=m}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(r=o.placeHolder)||void 0===r?void 0:r.slice(2,-2))?eo(!0):(eo(!1),null==y||y(""))}if(null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=p.components,o.mapping.cards[$]=p.mapping,null==j||j(Object.assign({},o))}else null==j||j(p)}function ro(o,n,t){var i,l,s;const a=null!=$&&$>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[$].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[$]}:Object.assign({},C),d=null==a?void 0:a.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==d&&d>-1){const n=null===(s=null==a?void 0:a.components[d].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));n&&(n[t]=Object.assign(Object.assign({},n[t]),{flowId:o.flowId,flowName:o.flowName}));const e=Object.assign(Object.assign({},a.components[d]),{buttons:n}),i=[...a.components];i[d]=e,a.components=i}if(null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=a.components,o.mapping.cards[$]=a.mapping,null==j||j(Object.assign({},o))}else null==j||j(a)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))eo(!0);else{eo(!1);const o=null===(n=null==K?void 0:K.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{var o,n,e,t;if(null!=$&&$>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[$].components,mapping:null===(t=null===(e=null==C?void 0:C.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[$]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);io({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=$&&-1===$){const{descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:l}=d(C);io({descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:l})}}),[$]),i((()=>{var o,n,e,t;if(console.log("right panel selectedCarouselIndex: ",$),null!=$&&$>-1&&lo){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[$].components,mapping:null===(t=null===(e=null==C?void 0:C.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[$]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);io({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),so(!1)}}),[lo]);const po=a({variableList:x,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!to.imageComponent&&n(c,{children:n(m,{whatsappSpecificPickerMeta:T,mediaComponent:to.imageComponent,updateTemplateImageUrl:function(o,n){var t,i,l,s,a;let d;d=null!=$&&$>-1?{components:null===(i=null===(t=C.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[$].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[$]}: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 e=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),t=[...d.components];t[r]=e,d=Object.assign(Object.assign({},d),{components:t})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=d.components,o.mapping.cards[$]=d.mapping,null==j||j(Object.assign({},o)),so(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:O})}),(to.bodyVariables.length>0||to.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:to.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===(E=to.descriptionComponents)||void 0===E?void 0:E.map(((o,e)=>n(b,{originalVariableList:null!=$&&$>-1?F.cards[$]:F,type:o.type,descriptionComponent:o.component,showVariableModal:V,variableList:x},e))),(null===(L=null===(k=to.urlBtns[0])||void 0===k?void 0:k.component)||void 0===L?void 0:L.buttons)&&(null===(A=null===(I=null===(w=to.urlBtns[0])||void 0===w?void 0:w.component)||void 0===I?void 0:I.buttons)||void 0===A?void 0:A.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===U?void 0:U.map(((o,e)=>{if("URL"===o.type)return n(h,{variableListIndex:e,CTAoptions:null==T?void 0:T.CTAoptions,button:o,originalVariableList:null!=$&&$>-1?F.cards[$]:F,updateSelectedURLTemplateBtn:ao,variableList:x},`${e}`)})),(null===(M=null===(q=to.qrbBtns[0])||void 0===q?void 0:q.component)||void 0===M?void 0:M.buttons)&&(null===(R=null===(D=null===(N=to.qrbBtns[0])||void 0===N?void 0:N.component)||void 0===D?void 0:D.buttons)||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===(S=null==K?void 0:K.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(H=null==K?void 0:K.backTrackExtra)||void 0===H?void 0:H[1]})),null===(P=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===P?void 0:P.map(((o,e)=>{if("QUICK_REPLY"===o.type)return n(h,{variableListIndex:e,QRBoptions:null==T?void 0:T.QRBoptions,button:o,originalVariableList:null!=$&&$>-1?F.cards[$]:F,updateSelectedQRBTemplateBtn:ro},`${e}`)})),Y===l.CHATBOT&&no&&n(p,{discountCode:null===(Q=null==K?void 0:K.discountCodeExtra)||void 0===Q?void 0:Q[0],setDiscountCode:null===(W=null==K?void 0:K.discountCodeExtra)||void 0===W?void 0:W[1],variableList:x}),null===(_=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===_?void 0:_.map(((o,e)=>{var t,i,l;if("COPY_CODE"===o.type)return n(u,{index:e,variable:{variableName:null!==(t=o.text)&&void 0!==t?t:"",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:po,componentType:"BUTTONS"},e)}))]}))};export{f as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{format as a}from"date-fns";import{cloneDeep as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{format as a}from"date-fns";import{cloneDeep as i}from"lodash";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{AddVariableV2SideModal as u}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as d}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as c}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as g,BodyPrimary as h}from"../../TypographyStyle.js";import f from"../../../utils/StringUtils.js";import{COLORS as x}from"../../../constants/Theme.js";import{useTemplateModalContext as O}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as j}from"../utils/getVariableNameEmail.js";const y=s.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===v.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===v.EMAIL?x.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,_={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},V={value:"static_expiry",label:"Static Expiry"},k=s=>{let{onFocus:k,variable:A,index:E,showVariableModal:S,variableList:C,setShowDiscountCheckBox:w,componentType:P,CTAoptions:B}=s;var L,D;const[N,H]=i(!1),[U,M]=i(""),[W,R]=i([]),[$,I]=i(),[z,Y]=i(!1),[Z,G]=i(!1),{device:q,channel:F,isError:K,originalVariableList:J,template:Q,templateSelectionTriggered:X,setTemplate:ee,setDisplayContent:te,setOriginalVariableList:le,globalNormalizedPlaceholders:ae,enabledCustomText:ne,pod:ie,selectedCarouselIndex:oe,isProductCarouselType:se}=x();function ue(){var e,t;const l=[];let a=[];if(F!==v.MESSAGE||ne){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),I(_)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),I(V)):(l.push({label:"",options:[_,T,V]}),I(T));const e=null!=ae?ae:[];R([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:j.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ae?ae:[];R([{label:"",options:[T,_]},...e]),a=[{label:"",options:[T,_]},...e]}if((F===v.WHATSAPP||F===v.EMAIL||F===v.MESSAGE)&&A.updatedValue)if(m.test(A.updatedValue)&&F===v.WHATSAPP||A.updatedValue.startsWith("{{")&&F!==v.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(S){let t=e.updatedValue;if(ie===b.CHATBOT&&"BUTTONS"===P){const l=null==B?void 0:B.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(A,a,F);e.value&&I(e)}else"date_time"===A.type?(I(V),M(A.updatedValue),pe(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(I(_),M(A.updatedValue.split("https://")[1])):(I(T),M(A.updatedValue))}function de(e,t){var l,a,n;const i=e;M(""),I(i),F===v.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(re(null!==(l=i.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=A.index)&&void 0!==a?a:0,i.value,!0)):(null==pe||pe(null!==(n=A.index)&&void 0!==n?n:0,U,!0,i.value),re("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?re(i.value,"url"===i.bikPlaceholderType?"link":"string"):(M(""),re("",i.value))}function ce(e,t){var l;M(t);const a="custom_link"===(null==$?void 0:$.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),F===v.WHATSAPP&&(null==pe||pe(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==v.WHATSAPP){const a=f(E+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),i=F===v.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=J.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==le||le(o)}if(F===v.WHATSAPP){if(null!=oe&&oe>-1&&se){const t=Object.assign({},J).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>E===a?Object.assign(Object.assign({},l),{type:s,updatedValue:e}):t))})}));return void(null==le||le((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=oe&&oe>-1?J.cards[oe]:J;let u=l.body,d=l.header,c=l.buttons;if("BODY"===P?u=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===P?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===P&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===E?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=oe&&oe>-1){const e=n(J.cards);e[oe]={header:d,body:u,buttons:c},null==le||le((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==le||le((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function pe(e,t,l,a){var i,o,s,u,d,c,r;if(null!=oe&&oe>-1&&se){const o=Object.assign({},Q).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,o,s;if("BODY"!==l.type)return l;if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(s=null===(o=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}}))})))}):l})),s=n(Q);if(l){const l=null===(i=Object.assign({},Q).mapping.cards)||void 0===i?void 0:i.map((l=>{var n;return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,console.log("mappingComponent templateCopy: ",s),void(null==ee||ee(s))}const p=null!=oe&&oe>-1?{components:null===(o=Object.assign({},Q).components[1].cards)||void 0===o?void 0:o[oe].components,mapping:null===(s=Object.assign({},Q).mapping.cards)||void 0===s?void 0:s[oe]}:Object.assign({},Q),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,o,s,u,d,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(s=null===(o=null===(i=m.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(r=l.buttons)||void 0===r?void 0:r[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===P&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))});else if("HEADER"===P&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,n=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(n=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===n?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=oe&&oe>-1&&Q){const e=n(Q);e.components[1].cards[oe].components=p.components,e.mapping.cards[oe]=p.mapping,null==ee||ee(e)}else null==ee||ee(Object.assign({},p))}return o((()=>{N&&(null==k||k())}),[N]),o((()=>{!function(){var e,t,l,a,n;const i="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);F===v.EMAIL&&(null==te||te(s))}()}),[X]),o((()=>{ue()}),[]),o((()=>{ue()}),[oe]),o((()=>{q&&$&&U&&setTimeout((()=>{re("custom_link"===(null==$?void 0:$.value)&&U?U.includes("https")?U:`https://${U}`:U,$.value)}),100)}),[q]),o((()=>{!Z&&$&&A.updatedValue&&setTimeout((()=>{re("custom_link"===(null==$?void 0:$.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,$.value),G(!0)}),100)}),[$]),e(y,Object.assign({channel:F,focused:N,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(g,Object.assign({style:{color:K&&!$?h.content.negative:h.content.primary}},{children:[null===(L=A.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:S?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==$?void 0:$.label)?"space-between":"flex-end"}},{children:[t(O,Object.assign({numberOfLines:1},{children:ie===b.CHATBOT?null==$?void 0:$.value:p(null!==(D=null==$?void 0:$.label)&&void 0!==D?D:"",20,!0)})),t(l,{onClick:()=>{Y(!z)},width:24,height:24,color:h.content.primary})]})):t(c,{options:W,isSearchable:!1,onSelect:de,defaultOptions:$?[Object.assign(Object.assign({},$),{selected:!0})]:[]})})),("custom_text"===(null==$?void 0:$.value)||"custom_link"===(null==$?void 0:$.value))&&t(r,{labelText:"custom_text"===(null==$?void 0:$.value)?"Custom text value":"custom_link"===(null==$?void 0:$.value)?"Custom URL value":"",id:`variable-value-${null==$?void 0:$.value}-${E}`,value:U,errorMessage:K?U&&0!==U.trim().length?"custom_link"!==$.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==$.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==$.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==$?void 0:$.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==$?void 0:$.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===$.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ce($.value,e)}}),"static_expiry"===(null==$?void 0:$.value)&&t(d,{placement:"auto",time:a(U?new Date(U):new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ce("static_expiry",e.toISOString())}}),z&&t(u,{zIndex:2e3,data:null!=C?C:[],showVariable:z,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?de({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"static_expiry"}):de({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{y as Container,k as default};
|
|
7
|
+
`,_={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},k={value:"static_expiry",label:"Static Expiry"},V=s=>{let{onFocus:V,variable:A,index:E,showVariableModal:S,variableList:w,setShowDiscountCheckBox:C,componentType:P,CTAoptions:B}=s;var L,D;const[N,H]=n(!1),[U,M]=n(""),[W,I]=n([]),[R,$]=n(),[z,Y]=n(!1),[Z,G]=n(!1),{device:q,channel:F,isError:K,originalVariableList:J,template:Q,templateSelectionTriggered:X,setTemplate:ee,setDisplayContent:te,setOriginalVariableList:le,globalNormalizedPlaceholders:ae,enabledCustomText:ie,pod:ne,selectedCarouselIndex:oe}=O();function se(){var e,t;const l=[];let a=[];if(F!==v.MESSAGE||ie){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),$(_)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),$(k)):(l.push({label:"",options:[_,T,k]}),$(T));const e=null!=ae?ae:[];I([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:f.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ae?ae:[];I([{label:"",options:[T,_]},...e]),a=[{label:"",options:[T,_]},...e]}if((F===v.WHATSAPP||F===v.EMAIL||F===v.MESSAGE)&&A.updatedValue)if(m.test(A.updatedValue)&&F===v.WHATSAPP||A.updatedValue.startsWith("{{")&&F!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(S){let t=e.updatedValue;if(ne===b.CHATBOT&&"BUTTONS"===P){const l=null==B?void 0:B.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(A,a,F);e.value&&$(e)}else"date_time"===A.type?($(k),M(A.updatedValue),ce(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?($(_),M(A.updatedValue.split("https://")[1])):($(T),M(A.updatedValue))}function ue(e,t){var l,a,i;const n=e;M(""),$(n),F===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(re(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ce||ce(null!==(a=A.index)&&void 0!==a?a:0,n.value,!0)):(null==ce||ce(null!==(i=A.index)&&void 0!==i?i:0,U,!0,n.value),re("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?re(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),re("",n.value))}function de(e,t){var l;M(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),F===v.WHATSAPP&&(null==ce||ce(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,a,n,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==v.WHATSAPP){const a=j(E+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),n=F===v.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=J.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==le||le(o)}if(F===v.WHATSAPP){const l=null!=oe&&oe>-1?J.cards[oe]:J;let u=l.body,d=l.header,r=l.buttons;if(console.log("variableList: ",l),"BODY"===P?u=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===P?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===P&&(r=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===E?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=oe&&oe>-1){const e=i(J.cards);e[oe]={header:d,body:u,buttons:r},null==le||le((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==le||le((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ce(e,t,l,a){var n,o,s,u,d,r;const c=null!=oe&&oe>-1?{components:null===(n=Object.assign({},Q).components[1].cards)||void 0===n?void 0:n[oe].components,mapping:null===(o=Object.assign({},Q).mapping.cards)||void 0===o?void 0:o[oe]}:Object.assign({},Q),p=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(c.components=p,l)if("BODY"===P&&(null===(u=null==c?void 0:c.mapping)||void 0===u?void 0:u.body))c.mapping=Object.assign(Object.assign({},c.mapping),{body:c.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===P&&(null===(d=null==c?void 0:c.mapping)||void 0===d?void 0:d.header))c.mapping=Object.assign(Object.assign({},c.mapping),{header:c.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==c?void 0:c.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-1;p.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),c.mapping=Object.assign(Object.assign({},c.mapping),{buttons:c.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=oe&&oe>-1&&Q){const e=i(Q);e.components[1].cards[oe].components=c.components,e.mapping.cards[oe]=c.mapping,null==ee||ee(e)}else null==ee||ee(Object.assign({},c))}return o((()=>{N&&(null==V||V())}),[N]),o((()=>{!function(){var e,t,l,a,i;const n="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);F===v.EMAIL&&(null==te||te(s))}()}),[X]),o((()=>{se()}),[]),o((()=>{se()}),[oe]),o((()=>{q&&R&&U&&setTimeout((()=>{re("custom_link"===(null==R?void 0:R.value)&&U?U.includes("https")?U:`https://${U}`:U,R.value)}),100)}),[q]),o((()=>{!Z&&R&&A.updatedValue&&setTimeout((()=>{re("custom_link"===(null==R?void 0:R.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,R.value),G(!0)}),100)}),[R]),e(y,Object.assign({channel:F,focused:N,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(g,Object.assign({style:{color:K&&!R?x.content.negative:x.content.primary}},{children:[null===(L=A.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:S?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[t(h,Object.assign({numberOfLines:1},{children:ne===b.CHATBOT?null==R?void 0:R.value:p(null!==(D=null==R?void 0:R.label)&&void 0!==D?D:"",20,!0)})),t(l,{onClick:()=>{Y(!z)},width:24,height:24,color:x.content.primary})]})):t(r,{options:W,isSearchable:!1,onSelect:ue,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&t(c,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${E}`,value:U,errorMessage:K?U&&0!==U.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==R.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{de(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&t(d,{placement:"auto",time:a(U?new Date(U):new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{de("static_expiry",e.toISOString())}}),z&&t(u,{zIndex:2e3,data:null!=w?w:[],showVariable:z,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==C||C(!1),"{{custom.url}}"===e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"static_expiry"}):ue({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{y as Container,V as default};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAp
|
|
|
5
5
|
export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
6
6
|
export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
|
|
7
7
|
export interface WhatsAppTemplateCardButtonV2Props {
|
|
8
|
-
|
|
8
|
+
originalVariableList: WhatsAppTemplateVariables;
|
|
9
9
|
updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
|
|
10
10
|
updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
|
|
11
11
|
button: TEMPLATE_BUTTON;
|
|
@@ -14,5 +14,5 @@ export interface WhatsAppTemplateCardButtonV2Props {
|
|
|
14
14
|
variableList?: VariableListInterfaceV2[];
|
|
15
15
|
variableListIndex: number;
|
|
16
16
|
}
|
|
17
|
-
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn,
|
|
17
|
+
declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
export default WhatsAppTemplateCardButtonV2;
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as l}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as s}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as n}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as u}from"../utils/validateIsUrl.js";import v,{Container as f}from"./VariableConnector.js";const j=j=>{let{variableListIndex:g,button:y,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:x,originalVariableList:O,CTAoptions:L,QRBoptions:V,variableList:R}=j;var T,U,w,C;const[B,N]=a(""),[I,H]=a(),E=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{setOriginalVariableList:S,isError:k,disableEditVariable:A,pod:M}=b();function P(e){N(e);const t=[Object.assign(Object.assign({},O.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==S||S((e=>Object.assign(Object.assign({},e),{body:[...O.body],buttons:[...t]}))),null==h||h(`https://${e}`,"custom")}return l((()=>{var e;if(y.buttonVariable&&s.test(y.buttonVariable))H(n),N((null===(e=y.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===y.type?L:V;e="URL"===y.type?t.findIndex((e=>e.placeHolder===y.buttonVariable)):t.findIndex((e=>e.label===y.flowName)),e>-1&&H(t[e])}}),[]),M!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[y.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:A,options:"URL"===y.type?L:V,isSearchable:!0,onSelect:function(e,t){const a=e;H(a);const l=("URL"===y.type?L:V).find((e=>e.placeHolder===a.placeHolder));if(l)if("custom_link"!==l.value){let e;"URL"===y.type?(e=[Object.assign(Object.assign({},O.buttons[0]),{type:"URL",buttonVariable:a.placeHolder,example:["https://bik.ai/"]})],null==h||h({defaultValue:l.value,placeHolder:l.placeHolder},"placeholder")):(e=O.buttons.map(((e,t)=>t===y.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:a.label,flowId:a.value}):e)),null==x||x({flowName:a.label,flowId:a.value},"placeholder",y.index)),null==S||S((t=>Object.assign(Object.assign({},t),{body:[...O.body],buttons:[...e]})))}else P("")},defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),"custom_link"===(null==I?void 0:I.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:A?"disabled":"none",errorMessage:k?B?u(B)?"":"Enter valid URL":"Required field":"",value:B,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:P,maxCharLimit:2e3})}))]}):t(v,{index:g,variable:{variableName:null!==(T=y.text)&&void 0!==T?T:"",updatedValue:"((customPlaceholderName))"===y.buttonVariable?`${null===(U=y.example)||void 0===U?void 0:U[0]}`:null!==(w=y.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(C=y.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:E,CTAoptions:L})};export{j as default};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import m from"styled-components";import{useTemplateModalContext as p}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as l}from"../../tooltips/Tooltip.js";import{Caption as d,BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as x,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as g,FooterWrapper as C,TimeStamp as j}from"./ChatUI.style.js";import{LimitedTimeOffer as u}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=m.div`
|
|
2
2
|
position: absolute;
|
|
3
3
|
width: 8px;
|
|
4
4
|
height: 8px;
|
|
5
5
|
left: -8px;
|
|
6
6
|
top: -9px;
|
|
7
|
-
`,w=
|
|
7
|
+
`,w=m.div`
|
|
8
8
|
font-family: 'Inter';
|
|
9
9
|
font-style: normal;
|
|
10
10
|
font-weight: 400;
|
|
@@ -13,7 +13,7 @@ import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"..
|
|
|
13
13
|
padding: 8px 12px 0px;
|
|
14
14
|
color: ${h.content.primary};
|
|
15
15
|
word-wrap: break-word;
|
|
16
|
-
`,O=
|
|
16
|
+
`,O=m(w)`
|
|
17
17
|
font-weight: 600;
|
|
18
18
|
margin-bottom: 8px;
|
|
19
|
-
`,I=new f,L=
|
|
19
|
+
`,I=new f,L=m=>{const{bodyText:h,footerText:f,headerMediaType:L,headerText:E,headerAssetLink:_,headerAssetName:N,quickReplybtn:M,ctaBtn:P,actionTypes:R,extras:A,showHeader:B,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:Y,carouselCardIndex:V}=m,q=I.format(h,U),D=I.format(E,k),{isWhatsappCarousel:K,selectedCarouselIndex:Q}=p(),W={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return e(g,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===Q,isWhatsappCarousel:K},{children:[!K&&t(v,{children:t(i,{color:"white",height:8,width:8})}),L===x.TEXT?t(O,{dangerouslySetInnerHTML:{__html:D}}):L!==x.NONE?t(b,{headerAssetLink:_,headerAssetName:N,mediaType:L,imagePreviewStyles:L===x.IMAGE?H:{}}):t(o,{}),(null==Y?void 0:Y.dateTime)?t(u,{text:Y.text,dateTime:Y.dateTime,code:Y.code}):t(o,{}),!!h&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:q}})}),e(C,{children:[t(l,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(j,Object.assign({style:{flex:1}},{children:f}))})),t(j,{children:"16:48"})]}),z&&z.length>0?z.map(((e,o)=>t(T,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:W[e.type],size:S},o))):R===y.QUICK_REPLY?t("div",{children:null==M?void 0:M.map(((e,o)=>t(T,{text:e.text},o)))}):R===y.CTA_BTN?t("div",{children:null==P?void 0:P.map(((e,o)=>t(T,{textTypography:B?d:c,extraContent:A?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:S},o)))}):t(o,{})]}))};export{L as ChatUIV2};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as n}from"../../../constants/Theme.js";import{specialCharPattern as i,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var n,i,o,l,a,d,r,v,s,p;const u={headerType:C.NONE,headerVariables:[]},m=null===(n=e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(m){u.headerType=m.format,u.headerText=m.text,u.headerAssetLink=null===(o=null===(i=m.example)||void 0===i?void 0:i.header_handle)||void 0===o?void 0:o[0];const n=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(n&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),i=/\(\(/.test(c),o={idx:0,variableVal:t?n:h,editable:i,editableDefaultValues:i?void 0:n,variableName:e};u.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(p=u.headerText)||void 0===p?void 0:p.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,n,o,l,E,_,L,O,w,R,D,V,A,I,U,q,j,F,P,M,Y;const $=/\p{Extended_Pictographic}/u;let K="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new N;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>d?(Q.meta.name=r,K="invalid"):i.test(e.meta.name.trim())&&(Q.meta.name=v,K="invalid"):(Q.meta.name=a,K="invalid"),Q.meta.name&&!H&&(G(x.name),H=!0),e.headerType===C.TEXT){const t=null!==(o=null===(n=e.headerText)||void 0===n?void 0:n.trim())&&void 0!==o?o:"";if(t)if(t.length>s)Q.header=p,K="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,K="invalid")}else Q.header=a,K="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(Q.header=m,K="invalid"),Q.header&&!H&&(G(x.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(l=e.bodyTextRaw)||void 0===l?void 0:l.trim().length)>c&&(Q.body=h,K="invalid"):(Q.body=a,K="invalid"),Q.body&&!H&&(G(x.body),H=!0),e.footerText&&e.footerText.length>s&&(Q.footer=p,K="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(x.footer),H=!0),e.actionsType===g.CTA_BTN){if(null===(_=null===(E=e.ctaBtn)||void 0===E?void 0:E.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(L=e.ctaBtn.phoneNumber.btnText)||void 0===L?void 0:L.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.phoneNumber.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.phoneNumber.btnText=y,K="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=a,K="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=f,K="invalid")}if(null===(w=null===(O=e.ctaBtn)||void 0===O?void 0:O.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),n=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===V?void 0:V.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.websiteLink.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.websiteLink.btnText=y,K="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=a,K="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=T,K="invalid";else if($.test(o))t[i]=y,K="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=k,K="invalid")}else t[i]=a,K="invalid"})),Q.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(A=Q.quickReply)||void 0===A?void 0:A.reduce(((e,t)=>e||!!t),!1);((null===(U=null===(I=null==Q?void 0:Q.ctaBtn)||void 0===I?void 0:I.websiteLink)||void 0===U?void 0:U.link)||(null===(j=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===j?void 0:j.btnText)||(null===(P=null===(F=Q.ctaBtn)||void 0===F?void 0:F.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===(M=Q.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(x.actionButtons),H=!0)}return{status:K,errors:Q}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let p="";const u=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),p=null==d?void 0:d.match(o);(null==p?void 0:p[2])&&(d=null==p?void 0:p[2]),s.push({idx:n,variableVal:i?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span style="color: ${n.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:p}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var n,i,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return v}parseLimitedTimeOfferComponent(e,n){const i={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){i.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const n=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;n&&n.startsWith("{{")&&n.endsWith("}}")?i.dateTime=n:i.dateTime=t(n?new Date(n):new Date,"MMM dd")}n.forEach((e=>{var t;"COPY_CODE"===e.type&&(i.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),i}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:p,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E as TemplateCreatorHelper};
|