@bikdotai/bik-component-library 0.0.44-4.beta-1 → 0.0.44-4.beta-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
  2. package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts +1 -0
  3. package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
  4. package/dist/cjs/components/carousel-preview/CarouselPreviewCard.d.ts +1 -0
  5. package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js +1 -1
  6. package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
  7. package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
  8. package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +4 -4
  9. package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
  10. package/dist/esm/components/carousel-preview/CarouselPreview.d.ts +1 -0
  11. package/dist/esm/components/carousel-preview/CarouselPreview.js +2 -2
  12. package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts +1 -0
  13. package/dist/esm/components/carousel-preview/CarouselPreviewCard.js +1 -1
  14. package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
  15. package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
  16. package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +5 -5
  17. package/package.json +1 -1
package/dist/cjs/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Menus: ({
3
2
  displayName: string;
4
3
  key: number;
package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts CHANGED
@@ -10,4 +10,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
10
10
  template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
11
11
  showSampleValues?: boolean | undefined;
12
12
  isPreview?: boolean | undefined;
13
+ cardWidth?: number | undefined;
13
14
  } & React.RefAttributes<HTMLDivElement>>;
package/dist/cjs/components/carousel-preview/CarouselPreview.js CHANGED
@@ -49,4 +49,4 @@
49
49
  width: 100%;
50
50
  height: 480px;
51
51
  }
52
- `,h=d.default.forwardRef(((o,n)=>{let{channel:l,template:d,showSampleValues:c,isPreview:h}=o;var b,x,g,v;const f=null===(b=null==d?void 0:d.components)||void 0===b?void 0:b[1].cards;return e.jsxs(u,{children:[e.jsx(s.default,{channel:l,template:d,carouselCardIndex:-1,isPreview:h}),!!(null==f?void 0:f.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(x=null==f?void 0:f.length)&&void 0!==x?x:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e.jsxs(p,{children:[e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(v=null===(g=null==d?void 0:d.components)||void 0===g?void 0:g[1].cards)||void 0===v?void 0:v.map(((t,i)=>{var o,n;const a={components:t.components,mapping:null===(n=null===(o=null==d?void 0:d.mapping)||void 0===o?void 0:o.cards)||void 0===n?void 0:n[i]};return e.jsx(r.Slide,Object.assign({index:i},{children:e.jsx(s.default,{channel:l,template:a,carouselCardIndex:i,isPreview:h},i)}),i)}))})),e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(i.default,{height:10,width:10,color:a.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;
52
+ `,h=d.default.forwardRef(((o,n)=>{let{channel:l,template:d,showSampleValues:c,isPreview:h,cardWidth:b}=o;var x,g,v,f;const m=null===(x=null==d?void 0:d.components)||void 0===x?void 0:x[1].cards;return e.jsxs(u,{children:[e.jsx(s.default,{channel:l,template:d,carouselCardIndex:-1,isPreview:h,width:b}),!!(null==m?void 0:m.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(g=null==m?void 0:m.length)&&void 0!==g?g:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e.jsxs(p,{children:[e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:a.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(f=null===(v=null==d?void 0:d.components)||void 0===v?void 0:v[1].cards)||void 0===f?void 0:f.map(((t,i)=>{var o,n;const a={components:t.components,mapping:null===(n=null===(o=null==d?void 0:d.mapping)||void 0===o?void 0:o.cards)||void 0===n?void 0:n[i]};return e.jsx(r.Slide,Object.assign({index:i},{children:e.jsx(s.default,{channel:l,template:a,carouselCardIndex:i,isPreview:h,width:b},i)}),i)}))})),e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(i.default,{height:10,width:10,color:a.COLORS.content.primary})}))]})}))]})}));exports.CarouselPreview=h;
package/dist/cjs/components/carousel-preview/CarouselPreviewCard.d.ts CHANGED
@@ -6,5 +6,6 @@ declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
6
6
  showSampleValues?: boolean | undefined;
7
7
  carouselCardIndex?: number | undefined;
8
8
  isPreview?: boolean | undefined;
9
+ width?: number | undefined;
9
10
  } & React.RefAttributes<HTMLDivElement>>;
10
11
  export default CarouselPreviewCard;
package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const l=s(t).default.forwardRef((t=>{let{channel:s,template:l,showSampleValues:i,carouselCardIndex:p,isPreview:u}=t;const{cardWidth:n}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:null!=n?n:360}},{children:e.jsx(a.TemplatePreview,{showSampleValues:i,template:l,channel:s,size:"small",hideHeader:!0,carouselCardIndex:p,isWhatsappCarousel:!0,isPreview:u})}))}));exports.default=l;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const i=s(t).default.forwardRef((t=>{let{channel:s,template:i,showSampleValues:p,carouselCardIndex:l,isPreview:u,width:n}=t;const{cardWidth:o}=r.useTemplateModalContext();return e.jsx("div",Object.assign({style:{width:n||(o||360)}},{children:e.jsx(a.TemplatePreview,{showSampleValues:p,template:i,channel:s,size:"small",hideHeader:!0,carouselCardIndex:l,isWhatsappCarousel:!0,isPreview:u})}))}));exports.default=i;
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js CHANGED
@@ -13,4 +13,4 @@
13
13
  background-color: rgba(0, 0, 0, 0.1);
14
14
  z-index: 1000;
15
15
  cursor: not-allowed;
16
- `,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=n;var k,L;const[H,w]=i.useState(!1),[D,B]=i.useState(""),[q,Y]=i.useState([]),[M,R]=i.useState(),[U,I]=i.useState(!1),[W,$]=i.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ie,isProductCarouselType:ne,disableEditVariable:se,disableEditExpiry:oe}=j.useTemplateModalContext();function ue(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...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!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.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(C){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){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}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),pe(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function de(e,t){var l,a,i;const n=e;B(""),R(n),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==pe||pe(null!==(i=h.index)&&void 0!==i?i:0,D,!0,n.value),ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(B(""),ce("",n.value))}function re(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;ce(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==pe||pe(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ce(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=O.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"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:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&ne){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ie&&ie>-1?G.cards[ie]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(G.cards);e[ie]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function pe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ie&&ie>-1&&ne){const s=Object.assign({},K).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,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(n=Object.assign({},K).mapping.cards)||void 0===n?void 0:n.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"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,console.log("mappingComponent templateCopy: ",o),void(null==Q||Q(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){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"===V){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"===V){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"===V)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"===V&&(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"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.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))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return i.useEffect((()=>{H&&(null==x||x())}),[H]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"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==X||X(o))}()}),[J]),i.useEffect((()=>{ue()}),[]),i.useEffect((()=>{ue()}),[ie]),i.useEffect((()=>{z&&M&&D&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),i.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),se||"date_time"===(null==h?void 0:h.type)&&oe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:de,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{state:se?"disabled":"none",labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!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"})}})]}))};
16
+ `,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:N,variableList:C,setShowDiscountCheckBox:S,componentType:V,CTAoptions:P}=n;var k,L;const[H,w]=i.useState(!1),[D,B]=i.useState(""),[q,Y]=i.useState([]),[M,R]=i.useState(),[U,I]=i.useState(!1),[W,$]=i.useState(!1),{device:z,channel:Z,isError:F,originalVariableList:G,template:K,templateSelectionTriggered:J,setTemplate:Q,setDisplayContent:X,setOriginalVariableList:ee,globalNormalizedPlaceholders:te,enabledCustomText:le,pod:ae,selectedCarouselIndex:ie,isProductCarouselType:ne,disableEditVariable:se,disableEditExpiry:oe}=j.useTemplateModalContext();function ue(){var e,t;const l=[];let a=[];if(Z!==p.CHANNEL_TYPE.MESSAGE||le){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),R(T)):(l.push({label:"",options:[f,E,T]}),R(E));const e=null!=te?te:[];Y([...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!=te?te:[];Y([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((Z===p.CHANNEL_TYPE.WHATSAPP||Z===p.CHANNEL_TYPE.EMAIL||Z===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&Z===p.CHANNEL_TYPE.WHATSAPP||h.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(N){let t=e.updatedValue;if(ae===m.POD.CHATBOT&&"BUTTONS"===V){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}(h,a,Z);e.value&&R(e)}else"date_time"===h.type?(R(T),B(h.updatedValue),pe(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(R(f),B(h.updatedValue.split("https://")[1])):(R(E),B(h.updatedValue))}function de(e,t){var l,a,i;const n=e;B(""),R(n),Z===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ce(null!==(l=n.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==pe||pe(null!==(i=h.index)&&void 0!==i?i:0,D,!0,n.value),ce("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ce(n.value,"url"===n.bikPlaceholderType?"link":"string"):(B(""),ce("",n.value))}function re(e,t){var l;B(t);const a="custom_link"===(null==M?void 0:M.value)&&t?t.includes("https")?t:`https://${t}`:t;ce(a,"static_expiry"===e?"string":e),Z===p.CHANNEL_TYPE.WHATSAPP&&(null==pe||pe(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ce(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=O.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"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:h.variableName);const s=G.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==ee||ee(s)}if(Z===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&ne){const t=Object.assign({},G).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==ee||ee((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ie&&ie>-1?G.cards[ie]:G;let u=l.body,d=l.header,r=l.buttons;if("BODY"===V?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===V?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===V&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(G.cards);e[ie]={header:d,body:u,buttons:r},null==ee||ee((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ee||ee((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function pe(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ie&&ie>-1&&ne){const s=Object.assign({},K).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,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(K);if(l){const l=null===(n=Object.assign({},K).mapping.cards)||void 0===n?void 0:n.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"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,void(null==Q||Q(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},K).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},K).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},K),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===V){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"===V){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"===V){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"===V)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"===V&&(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"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===V&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===V&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.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))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&K){const e=a.cloneDeep(K);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==Q||Q(e)}else null==Q||Q(Object.assign({},p))}return i.useEffect((()=>{H&&(null==x||x())}),[H]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"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==X||X(o))}()}),[J]),i.useEffect((()=>{ue()}),[]),i.useEffect((()=>{ue()}),[ie]),i.useEffect((()=>{z&&M&&D&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&D?D.includes("https")?D:`https://${D}`:D,M.value)}),100)}),[z]),i.useEffect((()=>{!W&&M&&h.updatedValue&&setTimeout((()=>{ce("custom_link"===(null==M?void 0:M.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,M.value),$(!0)}),100)}),[M]),e.jsxs(y,Object.assign({channel:Z,focused:H,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:F&&!M?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:N?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==M?void 0:M.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ae===m.POD.CHATBOT?null==M?void 0:M.value:r.truncate(null!==(L=null==M?void 0:M.label)&&void 0!==L?L:"",20,!0)})),se||"date_time"===(null==h?void 0:h.type)&&oe?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{I(!U)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:se,options:q,isSearchable:!1,onSelect:de,defaultOptions:M?[Object.assign(Object.assign({},M),{selected:!0})]:[]})})),("custom_text"===(null==M?void 0:M.value)||"custom_link"===(null==M?void 0:M.value))&&e.jsx(d.Input,{state:se?"disabled":"none",labelText:"custom_text"===(null==M?void 0:M.value)?"Custom text value":"custom_link"===(null==M?void 0:M.value)?"Custom URL value":"",id:`variable-value-${null==M?void 0:M.value}-${A}`,value:D,errorMessage:F?D&&0!==D.trim().length?"custom_link"!==M.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${D.trim()}`)&&0!==D.trim().length?"custom_link"!==M.value&&D.length>30?"Length cannot be more than 30":"BUTTONS"===V&&"custom_link"!==M.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==M?void 0:M.value)?2e3:"BUTTONS"===V?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==M?void 0:M.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===M.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(M.value,e)}}),"static_expiry"===(null==M?void 0:M.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[se&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:D?l.format(new Date(D),"hh:mm a"):l.format(new Date,"hh:mm a"),date:D?new Date(D):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),U&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=C?C:[],showVariable:U,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!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"})}})]}))};
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"),l=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),a=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),c=require("../custom-hooks/useAdditionalVariables.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:v,currentVariableList:O,CTAoptions:x,QRBoptions:f,variableList:y}=p;var L,R,U,h;const[V,C]=t.useState(""),[w,T]=t.useState(),I=c.useAdditionalVariables({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:q,disableEditVariable:N,pod:P,selectedCarouselIndex:E,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:B}=u.useTemplateModalContext();function H(e){if(C(e),null!=E&&E>-1&&B){const t=S;if("URL"===m.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:l}))),null==g||g(`https://${e}`,"custom",j)}return}let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(s.buttons=l,null!=E&&E>-1){const e=[...S.cards];e[E]=s,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==g||g(`https://${e}`,"custom",j)}return t.useEffect((()=>{var e;if(m.buttonVariable&&a.editableVarPattern.test(m.buttonVariable))T(n.CUSTOM_URL_NAME),C((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&T(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:N,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,t){const l=e;T(l);const s=("URL"===m.type?x:f).find((e=>e.placeHolder===l.placeHolder));if(s)if("custom_link"!==s.value){if(null!=E&&E>-1&&B){const e=S;if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const s=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll: ",t)}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const s=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==v||v({flowName:l.label,flowId:l.value},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll uui: ",t)}return}let e;if("URL"===m.type){let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j)}else{let t=O.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=O.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({flowName:l.label,flowId:l.value},"placeholder",j)}console.log("templateCopy updatedVariables: ",e);const t=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(t.buttons=e,null!=E&&E>-1){const e=[...S.cards];e[E]=t,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else H("")},defaultOptions:w?[Object.assign(Object.assign({},w),{selected:!0})]:[]})})),"custom_link"===(null==w?void 0:w.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(s.Input,{state:N?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:H,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(L=m.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(R=m.example)||void 0===R?void 0:R[0]}`:null!==(U=m.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(h=m.index)&&void 0!==h?h:0},showVariableModal:!0,componentType:"BUTTONS",variableList:I,CTAoptions:x})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),s=require("../../input/Input.js"),a=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),c=require("../custom-hooks/useAdditionalVariables.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:v,currentVariableList:O,CTAoptions:x,QRBoptions:f,variableList:y}=p;var L,R,U,h;const[V,C]=t.useState(""),[T,I]=t.useState(),w=c.useAdditionalVariables({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:q,disableEditVariable:N,pod:P,selectedCarouselIndex:E,originalVariableList:S,setOriginalVariableList:_,isProductCarouselType:B}=u.useTemplateModalContext();function H(e){if(C(e),null!=E&&E>-1&&B){const t=S;if("URL"===m.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==_||_((e=>Object.assign(Object.assign({},e),{cards:l}))),null==g||g(`https://${e}`,"custom",j)}return}let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(s.buttons=l,null!=E&&E>-1){const e=[...S.cards];e[E]=s,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==g||g(`https://${e}`,"custom",j)}return t.useEffect((()=>{var e;if(m.buttonVariable&&a.editableVarPattern.test(m.buttonVariable))I(n.CUSTOM_URL_NAME),C((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&I(t[e])}}),[]),P!==i.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{disabled:N,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,t){const l=e;I(l);const s=("URL"===m.type?x:f).find((e=>e.placeHolder===l.placeHolder));if(s)if("custom_link"!==s.value){if(null!=E&&E>-1&&B){const e=S;if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const s=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const s=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:s})}));null==v||v({flowName:l.label,flowId:l.value},"placeholder",j),null==_||_((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=O.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=O.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:s.value,placeHolder:s.placeHolder},"placeholder",j)}else{let t=O.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=O.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({flowName:l.label,flowId:l.value},"placeholder",j)}const t=Object.assign({},null!=E&&E>-1?S.cards[E]:S);if(t.buttons=e,null!=E&&E>-1){const e=[...S.cards];e[E]=t,null==_||_((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==_||_((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else H("")},defaultOptions:T?[Object.assign(Object.assign({},T),{selected:!0})]:[]})})),"custom_link"===(null==T?void 0:T.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(s.Input,{state:N?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:H,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(L=m.text)&&void 0!==L?L:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(R=m.example)||void 0===R?void 0:R[0]}`:null!==(U=m.buttonVariable)&&void 0!==U?U:"",type:"link",isEditableVariable:!0,index:null!==(h=m.index)&&void 0!==h?h:0},showVariableModal:!0,componentType:"BUTTONS",variableList:w,CTAoptions:x})};
package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js CHANGED
@@ -1,10 +1,10 @@
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"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("react"),l=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),d=require("../../tooltips/Tooltip.js"),u=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),c=require("../helpers/VariableEditorHelper.js"),x=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),m=require("./ChatUI.style.js"),j=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),f=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=T(l);const y=C.default.div`
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"),i=require("../../../assets/icons/qrb.svg.js"),a=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"),u=require("../helpers/VariableEditorHelper.js"),x=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;
5
5
  left: -8px;
6
6
  top: -9px;
7
- `,g=C.default.div`
7
+ `,C=f.default.div`
8
8
  font-family: 'Inter';
9
9
  font-style: normal;
10
10
  font-weight: 400;
@@ -13,7 +13,7 @@
13
13
  padding: 8px 12px 0px;
14
14
  color: ${p.COLORS.content.primary};
15
15
  word-wrap: break-word;
16
- `,E=C.default(g)`
16
+ `,g=f.default(C)`
17
17
  font-weight: 600;
18
18
  margin-bottom: 8px;
19
- `,v=new c.VariableEditorHelper;exports.ChatUIV2=l=>{const{bodyText:p,footerText:c,headerMediaType:T,headerText:C,headerAssetLink:q,headerAssetName:b,quickReplybtn:O,ctaBtn:w,actionTypes:I,extras:P,showHeader:_,imagePreviewStyles:S,size:L,bodyVariableList:A,headerVariableList:M,buttons:N,limitedTimeOfferComponent:R,carouselCardIndex:B,isWhatsappCarousel:H,isPreview:Y}=l,U=v.format(p,A),D=v.format(C,M),{selectedCarouselIndex:F,isProductCarouselType:V,errorIndexes:k}=n.useTemplateModalContext(),z={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return o.useEffect((()=>{console.log("errorIndexes: ",k),console.log("carouselCardIndex: ",B,null==k?void 0:k.includes(null!=B?B:-2))}),[k]),console.log("isPreview: ",Y),e.jsxs(m.Container,Object.assign({isCarouselCard:null!=B&&B>-1,showBorder:null!=B&&B===F||V&&null!=B&&B>-1&&null!=F&&F>-1,hasError:null==k?void 0:k.includes(null!=B?B:-2),isWhatsappCarousel:H,isPreview:Y},{children:[!H&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(E,{dangerouslySetInnerHTML:{__html:D}}):T!==x.HEADER_TYPES.NONE?e.jsx(f.MediaCard,{headerAssetLink:q,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?S:{}}):e.jsx(e.Fragment,{}),(null==R?void 0:R.dateTime)?e.jsx(j.LimitedTimeOffer,{text:R.text,dateTime:R.dateTime,code:R.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(g,{dangerouslySetInnerHTML:{__html:U}})}),e.jsxs(m.FooterWrapper,{children:[e.jsx(d.Tooltip,Object.assign({body:null!=c?c:"",placement:"top"},{children:e.jsx(m.TimeStamp,Object.assign({style:{flex:1}},{children:c}))})),e.jsx(m.TimeStamp,{children:"16:48"})]}),N&&N.length>0?N.map(((t,r)=>e.jsx(h.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:z[t.type],size:L},r))):I===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):I===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==w?void 0:w.map(((t,r)=>e.jsx(h.ChatBtn,{textTypography:_?u.Caption:u.BodySecondary,extraContent:P?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:L},r)))}):e.jsx(e.Fragment,{})]}))};
19
+ `,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:v,headerAssetName:b,quickReplybtn:q,ctaBtn:O,actionTypes:_,extras:w,showHeader:P,imagePreviewStyles:S,size:I,bodyVariableList:L,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R,isWhatsappCarousel:B,isPreview:H}=o,Y=E.format(p,L),U=E.format(f,A),{selectedCarouselIndex:D,isProductCarouselType:F,errorIndexes:V}=n.useTemplateModalContext(),k={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===D||F&&null!=R&&R>-1&&null!=D&&D>-1,hasError:null==V?void 0:V.includes(null!=R?R:-2),isWhatsappCarousel:B,isPreview:H},{children:[!B&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:U}}):T!==x.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:v,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?S:{}}):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:Y}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(l.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(h.TimeStamp,Object.assign({style:{flex:1}},{children:u}))})),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:k[t.type],size:I},r))):_===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):_===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:P?d.Caption:d.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:I},r)))}):e.jsx(e.Fragment,{})]}))};
package/dist/esm/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export declare const Menus: ({
3
2
  displayName: string;
4
3
  key: number;
package/dist/esm/components/carousel-preview/CarouselPreview.d.ts CHANGED
@@ -10,4 +10,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
10
10
  template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
11
11
  showSampleValues?: boolean | undefined;
12
12
  isPreview?: boolean | undefined;
13
+ cardWidth?: number | undefined;
13
14
  } & React.RefAttributes<HTMLDivElement>>;
package/dist/esm/components/carousel-preview/CarouselPreview.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as a,Slide as l,ButtonNext as s}from"pure-react-carousel";import d from"react";import c from"styled-components";import p from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const m=c.div`
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as a,Slide as d,ButtonNext as l}from"pure-react-carousel";import s from"react";import c from"styled-components";import p from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const m=c.div`
2
2
  background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
3
3
  border-color: ${h.stroke.primary};
4
4
  border-top-style: solid;
@@ -49,4 +49,4 @@ import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"../../assets/ico
49
49
  width: 100%;
50
50
  height: 480px;
51
51
  }
52
- `,u=d.forwardRef(((d,c)=>{let{channel:u,template:g,showSampleValues:v,isPreview:x}=d;var f,w,y,j;const k=null===(f=null==g?void 0:g.components)||void 0===f?void 0:f[1].cards;return e(m,{children:[o(p,{channel:u,template:g,carouselCardIndex:-1,isPreview:x}),!!(null==k?void 0:k.length)&&o(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(w=null==k?void 0:k.length)&&void 0!==w?w:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e(b,{children:[o(n,Object.assign({className:"left_button"},{children:o(t,{height:10,width:10,color:h.content.primary})})),o(a,Object.assign({className:"slider"},{children:null===(j=null===(y=null==g?void 0:g.components)||void 0===y?void 0:y[1].cards)||void 0===j?void 0:j.map(((e,t)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==g?void 0:g.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[t]};return o(l,Object.assign({index:t},{children:o(p,{channel:u,template:n,carouselCardIndex:t,isPreview:x},t)}),t)}))})),o(s,Object.assign({className:"right_button"},{children:o(i,{height:10,width:10,color:h.content.primary})}))]})}))]})}));export{u as CarouselPreview};
52
+ `,u=s.forwardRef(((s,c)=>{let{channel:u,template:g,showSampleValues:v,isPreview:x,cardWidth:f}=s;var w,y,j,k;const O=null===(w=null==g?void 0:g.components)||void 0===w?void 0:w[1].cards;return e(m,{children:[o(p,{channel:u,template:g,carouselCardIndex:-1,isPreview:x,width:f}),!!(null==O?void 0:O.length)&&o(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(y=null==O?void 0:O.length)&&void 0!==y?y:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e(b,{children:[o(n,Object.assign({className:"left_button"},{children:o(t,{height:10,width:10,color:h.content.primary})})),o(a,Object.assign({className:"slider"},{children:null===(k=null===(j=null==g?void 0:g.components)||void 0===j?void 0:j[1].cards)||void 0===k?void 0:k.map(((e,t)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==g?void 0:g.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[t]};return o(d,Object.assign({index:t},{children:o(p,{channel:u,template:n,carouselCardIndex:t,isPreview:x,width:f},t)}),t)}))})),o(l,Object.assign({className:"right_button"},{children:o(i,{height:10,width:10,color:h.content.primary})}))]})}))]})}));export{u as CarouselPreview};
package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts CHANGED
@@ -6,5 +6,6 @@ declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
6
6
  showSampleValues?: boolean | undefined;
7
7
  carouselCardIndex?: number | undefined;
8
8
  isPreview?: boolean | undefined;
9
+ width?: number | undefined;
9
10
  } & React.RefAttributes<HTMLDivElement>>;
10
11
  export default CarouselPreviewCard;
package/dist/esm/components/carousel-preview/CarouselPreviewCard.js CHANGED
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,template:s,showSampleValues:i,carouselCardIndex:m,isPreview:l}=t;const{cardWidth:o}=a();return e("div",Object.assign({style:{width:null!=o?o:360}},{children:e(p,{showSampleValues:i,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:m,isWhatsappCarousel:!0,isPreview:l})}))}));export{r as default};
1
+ import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,template:s,showSampleValues:i,carouselCardIndex:m,isPreview:l,width:o}=t;const{cardWidth:n}=a();return e("div",Object.assign({style:{width:o||(n||360)}},{children:e(p,{showSampleValues:i,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:m,isWhatsappCarousel:!0,isPreview:l})}))}));export{r as default};
package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import d from"styled-components";import{AddVariableV2SideModal as u}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as c}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{POD as g}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as O,BodyPrimary as h}from"../../TypographyStyle.js";import j from"../../../utils/StringUtils.js";import{COLORS as x}from"../../../constants/Theme.js";import{useTemplateModalContext as y}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";const _=d.div`
1
+ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import d from"styled-components";import{AddVariableV2SideModal as u}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as c}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{POD as g}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as O,BodyPrimary as h}from"../../TypographyStyle.js";import j from"../../../utils/StringUtils.js";import{COLORS as x}from"../../../constants/Theme.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as y}from"../utils/getVariableNameEmail.js";const _=d.div`
2
2
  /* surface/$color-background-warning-light */
3
3
 
4
4
  background: ${e=>e.focused&&e.channel===b.EMAIL?x.background.warning.light:"transparent"};
@@ -13,4 +13,4 @@ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"..
13
13
  background-color: rgba(0, 0, 0, 0.1);
14
14
  z-index: 1000;
15
15
  cursor: not-allowed;
16
- `,V={value:"custom_link",label:"Custom URL"},k={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"},A=d=>{let{onFocus:A,variable:S,index:w,showVariableModal:C,variableList:P,setShowDiscountCheckBox:B,componentType:D,CTAoptions:L}=d;var N,H;const[U,M]=o(!1),[W,R]=o(""),[$,I]=o([]),[z,Y]=o(),[Z,G]=o(!1),[q,F]=o(!1),{device:K,channel:J,isError:Q,originalVariableList:X,template:ee,templateSelectionTriggered:te,setTemplate:le,setDisplayContent:ae,setOriginalVariableList:ie,globalNormalizedPlaceholders:ne,enabledCustomText:oe,pod:se,selectedCarouselIndex:de,isProductCarouselType:ue,disableEditVariable:ce,disableEditExpiry:re}=y();function pe(){var e,t;const l=[];let a=[];if(J!==b.MESSAGE||oe){"link"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Y(V)):"date_time"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Y(E)):(l.push({label:"",options:[V,k,E]}),Y(k));const e=null!=ne?ne:[];I([...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!=ne?ne:[];I([{label:"",options:[k,V]},...e]),a=[{label:"",options:[k,V]},...e]}if((J===b.WHATSAPP||J===b.EMAIL||J===b.MESSAGE)&&S.updatedValue)if(v.test(S.updatedValue)&&J===b.WHATSAPP||S.updatedValue.startsWith("{{")&&J!==b.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===b.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(se===g.CHATBOT&&"BUTTONS"===D){const l=null==L?void 0:L.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}(S,a,J);e.value&&Y(e)}else"date_time"===S.type?(Y(E),R(S.updatedValue),ge(null!==(e=S.index)&&void 0!==e?e:0,S.updatedValue)):(null===(t=S.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Y(V),R(S.updatedValue.split("https://")[1])):(Y(k),R(S.updatedValue))}function me(e,t){var l,a,i;const n=e;R(""),Y(n),J===b.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(be(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ge||ge(null!==(a=S.index)&&void 0!==a?a:0,n.value,!0)):(null==ge||ge(null!==(i=S.index)&&void 0!==i?i:0,W,!0,n.value),be("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?be(n.value,"url"===n.bikPlaceholderType?"link":"string"):(R(""),be("",n.value))}function ve(e,t){var l;R(t);const a="custom_link"===(null==z?void 0:z.value)&&t?t.includes("https")?t:`https://${t}`:t;be(a,"static_expiry"===e?"string":e),J===b.WHATSAPP&&(null==ge||ge(null!==(l=S.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function be(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(J!==b.WHATSAPP){const a=f(w+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===K?"template_html_mobile":"template_html_desktop"),n=J===b.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:S.variableName);const o=X.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ie||ie(o)}if(J===b.WHATSAPP){if(null!=de&&de>-1&&ue){const t=Object.assign({},X).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>w===l?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t))})}));return void(null==ie||ie((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=de&&de>-1?X.cards[de]:X;let d=l.body,u=l.header,c=l.buttons;if("BODY"===D?d=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===D?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===D&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===w?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=de&&de>-1){const e=n(X.cards);e[de]={header:u,body:d,buttons:c},null==ie||ie((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ie||ie((e=>Object.assign(Object.assign({},e),{header:u,body:d,buttons:c})))}}function ge(e,t,l,a){var i,o,s,d,u,c,r;if(null!=de&&de>-1&&ue){const o=Object.assign({},ee).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,i,n,o,s;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),s=n(ee);if(l){const l=null===(i=Object.assign({},ee).mapping.cards)||void 0===i?void 0:i.map((l=>{var i;return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,console.log("mappingComponent templateCopy: ",s),void(null==le||le(s))}const p=null!=de&&de>-1?{components:null===(o=Object.assign({},ee).components[1].cards)||void 0===o?void 0:o[de].components,mapping:null===(s=Object.assign({},ee).mapping.cards)||void 0===s?void 0:s[de]}:Object.assign({},ee),m=null===(d=null==p?void 0:p.components)||void 0===d?void 0:d.map((l=>{var a,i,n,o,s,d,u,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===D){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"===D){if(null===(d=l.example)||void 0===d?void 0:d.header_text){const l=[...null!==(c=null===(u=m.example)||void 0===u?void 0:u.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"===D){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"===D)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"===D&&(null===(u=null==p?void 0:p.mapping)||void 0===u?void 0:u.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===D&&(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,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===D&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-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&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=de&&de>-1&&ee){const e=n(ee);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==le||le(e)}else null==le||le(Object.assign({},p))}return s((()=>{U&&(null==A||A())}),[U]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===K?"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);J===b.EMAIL&&(null==ae||ae(s))}()}),[te]),s((()=>{pe()}),[]),s((()=>{pe()}),[de]),s((()=>{K&&z&&W&&setTimeout((()=>{be("custom_link"===(null==z?void 0:z.value)&&W?W.includes("https")?W:`https://${W}`:W,z.value)}),100)}),[K]),s((()=>{!q&&z&&S.updatedValue&&setTimeout((()=>{be("custom_link"===(null==z?void 0:z.value)&&S.updatedValue?S.updatedValue.includes("https")?S.updatedValue:`https://${S.updatedValue}`:S.updatedValue,z.value),F(!0)}),100)}),[z]),e(_,Object.assign({channel:J,focused:U,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:Q&&!z?x.content.negative:x.content.primary}},{children:[null===(N=S.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==S?void 0:S.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:C?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==z?void 0:z.label)?"space-between":"flex-end"}},{children:[t(h,Object.assign({numberOfLines:1},{children:se===g.CHATBOT?null==z?void 0:z.value:m(null!==(H=null==z?void 0:z.label)&&void 0!==H?H:"",20,!0)})),ce||"date_time"===(null==S?void 0:S.type)&&re?t(l,{}):t(a,{onClick:()=>{G(!Z)},width:24,height:24,color:x.content.primary})]})):t(r,{disabled:ce,options:$,isSearchable:!1,onSelect:me,defaultOptions:z?[Object.assign(Object.assign({},z),{selected:!0})]:[]})})),("custom_text"===(null==z?void 0:z.value)||"custom_link"===(null==z?void 0:z.value))&&t(p,{state:ce?"disabled":"none",labelText:"custom_text"===(null==z?void 0:z.value)?"Custom text value":"custom_link"===(null==z?void 0:z.value)?"Custom URL value":"",id:`variable-value-${null==z?void 0:z.value}-${w}`,value:W,errorMessage:Q?W&&0!==W.trim().length?"custom_link"!==z.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"!==z.value&&W.length>30?"Length cannot be more than 30":"BUTTONS"===D&&"custom_link"!==z.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==z?void 0:z.value)?2e3:"BUTTONS"===D?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==z?void 0:z.value)?"https://":"",placeholder:"link"===S.type||"custom_link"===z.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ve(z.value,e)}}),"static_expiry"===(null==z?void 0:z.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[ce&&t(T,{onClick:e=>e.preventDefault()}),t(c,{placement:"auto",time:i(W?new Date(W):new Date,"hh:mm a"),date:W?new Date(W):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ve("static_expiry",e.toISOString())}})]})),Z&&t(u,{zIndex:2e3,data:null!=P?P:[],showVariable:Z,setShowVariable:G,placeholder:"Add a variable",customTrigger:e=>{null==B||B(!1),"{{custom.url}}"===e.actualValue?me({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"static_expiry"}):me({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{_ as Container,A as default};
16
+ `,V={value:"custom_link",label:"Custom URL"},k={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"},A=d=>{let{onFocus:A,variable:S,index:w,showVariableModal:C,variableList:P,setShowDiscountCheckBox:B,componentType:D,CTAoptions:L}=d;var N,H;const[U,M]=o(!1),[W,R]=o(""),[$,I]=o([]),[z,Y]=o(),[Z,G]=o(!1),[q,F]=o(!1),{device:K,channel:J,isError:Q,originalVariableList:X,template:ee,templateSelectionTriggered:te,setTemplate:le,setDisplayContent:ae,setOriginalVariableList:ie,globalNormalizedPlaceholders:ne,enabledCustomText:oe,pod:se,selectedCarouselIndex:de,isProductCarouselType:ue,disableEditVariable:ce,disableEditExpiry:re}=f();function pe(){var e,t;const l=[];let a=[];if(J!==b.MESSAGE||oe){"link"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Y(V)):"date_time"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Y(E)):(l.push({label:"",options:[V,k,E]}),Y(k));const e=null!=ne?ne:[];I([...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!=ne?ne:[];I([{label:"",options:[k,V]},...e]),a=[{label:"",options:[k,V]},...e]}if((J===b.WHATSAPP||J===b.EMAIL||J===b.MESSAGE)&&S.updatedValue)if(v.test(S.updatedValue)&&J===b.WHATSAPP||S.updatedValue.startsWith("{{")&&J!==b.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===b.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(se===g.CHATBOT&&"BUTTONS"===D){const l=null==L?void 0:L.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}(S,a,J);e.value&&Y(e)}else"date_time"===S.type?(Y(E),R(S.updatedValue),ge(null!==(e=S.index)&&void 0!==e?e:0,S.updatedValue)):(null===(t=S.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Y(V),R(S.updatedValue.split("https://")[1])):(Y(k),R(S.updatedValue))}function me(e,t){var l,a,i;const n=e;R(""),Y(n),J===b.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(be(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ge||ge(null!==(a=S.index)&&void 0!==a?a:0,n.value,!0)):(null==ge||ge(null!==(i=S.index)&&void 0!==i?i:0,W,!0,n.value),be("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?be(n.value,"url"===n.bikPlaceholderType?"link":"string"):(R(""),be("",n.value))}function ve(e,t){var l;R(t);const a="custom_link"===(null==z?void 0:z.value)&&t?t.includes("https")?t:`https://${t}`:t;be(a,"static_expiry"===e?"string":e),J===b.WHATSAPP&&(null==ge||ge(null!==(l=S.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function be(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(J!==b.WHATSAPP){const a=y(w+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===K?"template_html_mobile":"template_html_desktop"),n=J===b.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:S.variableName);const o=X.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ie||ie(o)}if(J===b.WHATSAPP){if(null!=de&&de>-1&&ue){const t=Object.assign({},X).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>w===l?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t))})}));return void(null==ie||ie((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=de&&de>-1?X.cards[de]:X;let d=l.body,u=l.header,c=l.buttons;if("BODY"===D?d=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===D?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===w?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===D&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===w?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=de&&de>-1){const e=n(X.cards);e[de]={header:u,body:d,buttons:c},null==ie||ie((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ie||ie((e=>Object.assign(Object.assign({},e),{header:u,body:d,buttons:c})))}}function ge(e,t,l,a){var i,o,s,d,u,c,r;if(null!=de&&de>-1&&ue){const o=Object.assign({},ee).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,i,n,o,s;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),s=n(ee);if(l){const l=null===(i=Object.assign({},ee).mapping.cards)||void 0===i?void 0:i.map((l=>{var i;return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,void(null==le||le(s))}const p=null!=de&&de>-1?{components:null===(o=Object.assign({},ee).components[1].cards)||void 0===o?void 0:o[de].components,mapping:null===(s=Object.assign({},ee).mapping.cards)||void 0===s?void 0:s[de]}:Object.assign({},ee),m=null===(d=null==p?void 0:p.components)||void 0===d?void 0:d.map((l=>{var a,i,n,o,s,d,u,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===D){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"===D){if(null===(d=l.example)||void 0===d?void 0:d.header_text){const l=[...null!==(c=null===(u=m.example)||void 0===u?void 0:u.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"===D){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"===D)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"===D&&(null===(u=null==p?void 0:p.mapping)||void 0===u?void 0:u.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===D&&(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,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===D&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-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&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=de&&de>-1&&ee){const e=n(ee);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==le||le(e)}else null==le||le(Object.assign({},p))}return s((()=>{U&&(null==A||A())}),[U]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===K?"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);J===b.EMAIL&&(null==ae||ae(s))}()}),[te]),s((()=>{pe()}),[]),s((()=>{pe()}),[de]),s((()=>{K&&z&&W&&setTimeout((()=>{be("custom_link"===(null==z?void 0:z.value)&&W?W.includes("https")?W:`https://${W}`:W,z.value)}),100)}),[K]),s((()=>{!q&&z&&S.updatedValue&&setTimeout((()=>{be("custom_link"===(null==z?void 0:z.value)&&S.updatedValue?S.updatedValue.includes("https")?S.updatedValue:`https://${S.updatedValue}`:S.updatedValue,z.value),F(!0)}),100)}),[z]),e(_,Object.assign({channel:J,focused:U,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:Q&&!z?x.content.negative:x.content.primary}},{children:[null===(N=S.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==S?void 0:S.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:C?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==z?void 0:z.label)?"space-between":"flex-end"}},{children:[t(h,Object.assign({numberOfLines:1},{children:se===g.CHATBOT?null==z?void 0:z.value:m(null!==(H=null==z?void 0:z.label)&&void 0!==H?H:"",20,!0)})),ce||"date_time"===(null==S?void 0:S.type)&&re?t(l,{}):t(a,{onClick:()=>{G(!Z)},width:24,height:24,color:x.content.primary})]})):t(r,{disabled:ce,options:$,isSearchable:!1,onSelect:me,defaultOptions:z?[Object.assign(Object.assign({},z),{selected:!0})]:[]})})),("custom_text"===(null==z?void 0:z.value)||"custom_link"===(null==z?void 0:z.value))&&t(p,{state:ce?"disabled":"none",labelText:"custom_text"===(null==z?void 0:z.value)?"Custom text value":"custom_link"===(null==z?void 0:z.value)?"Custom URL value":"",id:`variable-value-${null==z?void 0:z.value}-${w}`,value:W,errorMessage:Q?W&&0!==W.trim().length?"custom_link"!==z.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"!==z.value&&W.length>30?"Length cannot be more than 30":"BUTTONS"===D&&"custom_link"!==z.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==z?void 0:z.value)?2e3:"BUTTONS"===D?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==z?void 0:z.value)?"https://":"",placeholder:"link"===S.type||"custom_link"===z.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ve(z.value,e)}}),"static_expiry"===(null==z?void 0:z.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[ce&&t(T,{onClick:e=>e.preventDefault()}),t(c,{placement:"auto",time:i(W?new Date(W):new Date,"hh:mm a"),date:W?new Date(W):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ve("static_expiry",e.toISOString())}})]})),Z&&t(u,{zIndex:2e3,data:null!=P?P:[],showVariable:Z,setShowVariable:G,placeholder:"Add a variable",customTrigger:e=>{null==B||B(!1),"{{custom.url}}"===e.actualValue?me({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?me({label:e.displayName,selected:!0,value:"static_expiry"}):me({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{_ as Container,A as default};
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js CHANGED
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as i}from"../../template-preview/models/TemplateMeta.js";import{POD as r}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as u}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";import m,{Container as g}from"./VariableConnector.js";const j=j=>{let{variableListIndex:f,button:v,updateSelectedURLTemplateBtn:O,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:L,QRBoptions:h,variableList:R}=j;var U,V,w,C;const[T,I]=l(""),[N,E]=l(),H=d({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:P,disableEditVariable:B,pod:Q,selectedCarouselIndex:_,originalVariableList:S,setOriginalVariableList:A,isProductCarouselType:K}=b();function Y(e){if(I(e),null!=_&&_>-1&&K){const t=S;if("URL"===v.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:a})}));null==A||A((e=>Object.assign(Object.assign({},e),{cards:l}))),null==O||O(`https://${e}`,"custom",f)}return}let t=x.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),a=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(a.buttons=l,null!=_&&_>-1){const e=[...S.cards];e[_]=a,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==O||O(`https://${e}`,"custom",f)}return a((()=>{var e;if(v.buttonVariable&&o.test(v.buttonVariable))E(i),I((null===(e=v.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===v.type?L:h;e="URL"===v.type?t.findIndex((e=>e.placeHolder===v.buttonVariable)):t.findIndex((e=>e.label===v.flowName)),e>-1&&E(t[e])}}),[]),Q!==r.CHATBOT?e(g,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:u.content.primary}},{children:[v.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(s,{disabled:B,options:"URL"===v.type?L:h,isSearchable:!0,onSelect:function(e,t){const l=e;E(l);const a=("URL"===v.type?L:h).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){if(null!=_&&_>-1&&K){const e=S;if("URL"===v.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const a=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:a})}));null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll: ",t)}else if("QUICK_REPLY"===v.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const a=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:a})}));null==y||y({flowName:l.label,flowId:l.value},"placeholder",f),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll uui: ",t)}return}let e;if("URL"===v.type){let t=x.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==y||y({flowName:l.label,flowId:l.value},"placeholder",f)}console.log("templateCopy updatedVariables: ",e);const t=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(t.buttons=e,null!=_&&_>-1){const e=[...S.cards];e[_]=t,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else Y("")},defaultOptions:N?[Object.assign(Object.assign({},N),{selected:!0})]:[]})})),"custom_link"===(null==N?void 0:N.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(n,{state:B?"disabled":"none",errorMessage:P?T?p(T)?"":"Enter valid URL":"Required field":"",value:T,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):t(m,{index:f,variable:{variableName:null!==(U=v.text)&&void 0!==U?U:"",updatedValue:"((customPlaceholderName))"===v.buttonVariable?`${null===(V=v.example)||void 0===V?void 0:V[0]}`:null!==(w=v.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(C=v.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:H,CTAoptions:L})};export{j as default};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as i}from"../../template-preview/models/TemplateMeta.js";import{POD as r}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as u}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const f=f=>{let{variableListIndex:g,button:v,updateSelectedURLTemplateBtn:O,updateSelectedQRBTemplateBtn:x,currentVariableList:y,CTAoptions:L,QRBoptions:h,variableList:R}=f;var U,V,C,T;const[w,I]=l(""),[N,E]=l(),H=d({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:P,disableEditVariable:B,pod:Q,selectedCarouselIndex:_,originalVariableList:S,setOriginalVariableList:A,isProductCarouselType:K}=b();function Y(t){if(I(t),null!=_&&_>-1&&K){const e=S;if("URL"===v.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const a=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:a})}));null==A||A((t=>Object.assign(Object.assign({},t),{cards:l}))),null==O||O(`https://${t}`,"custom",g)}return}let e=y.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const l=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(a.buttons=l,null!=_&&_>-1){const t=[...S.cards];t[_]=a,null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==A||A((t=>Object.assign(Object.assign({},t),{buttons:[...l]})));null==O||O(`https://${t}`,"custom",g)}return a((()=>{var t;if(v.buttonVariable&&o.test(v.buttonVariable))E(i),I((null===(t=v.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===v.type?L:h;t="URL"===v.type?e.findIndex((t=>t.placeHolder===v.buttonVariable)):e.findIndex((t=>t.label===v.flowName)),t>-1&&E(e[t])}}),[]),Q!==r.CHATBOT?t(j,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(c,Object.assign({style:{color:u.content.primary}},{children:[v.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(s,{disabled:B,options:"URL"===v.type?L:h,isSearchable:!0,onSelect:function(t,e){const l=t;E(l);const a=("URL"===v.type?L:h).find((t=>t.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){if(null!=_&&_>-1&&K){const t=S;if("URL"===v.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:l.placeHolder});const a=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:a})}));null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g),null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===v.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:l.label,flowId:l.value});const a=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:a})}));null==x||x({flowName:l.label,flowId:l.value},"placeholder",g),null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===v.type){let e=y.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:l.placeHolder}),t=y.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g)}else{let e=y.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:l.label,flowId:l.value}),t=y.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==x||x({flowName:l.label,flowId:l.value},"placeholder",g)}const e=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(e.buttons=t,null!=_&&_>-1){const t=[...S.cards];t[_]=e,null==A||A((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==A||A((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")},defaultOptions:N?[Object.assign(Object.assign({},N),{selected:!0})]:[]})})),"custom_link"===(null==N?void 0:N.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(n,{state:B?"disabled":"none",errorMessage:P?w?p(w)?"":"Enter valid URL":"Required field":"",value:w,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:g,variable:{variableName:null!==(U=v.text)&&void 0!==U?U:"",updatedValue:"((customPlaceholderName))"===v.buttonVariable?`${null===(V=v.example)||void 0===V?void 0:V[0]}`:null!==(C=v.buttonVariable)&&void 0!==C?C:"",type:"link",isEditableVariable:!0,index:null!==(T=v.index)&&void 0!==T?T:0},showVariableModal:!0,componentType:"BUTTONS",variableList:H,CTAoptions:L})};export{f as default};
package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js CHANGED
@@ -1,19 +1,19 @@
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 l from"../../../assets/icons/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import{useEffect as a}from"react";import d from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{Caption as c,BodySecondary as h}from"../../TypographyStyle.js";import{COLORS as x}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as u,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as g}from"./ChatBtn.js";import{Container as T,FooterWrapper as C,TimeStamp as v}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as w}from"./MediaCard.js";const b=d.div`
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 l from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}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 u}from"./ChatBtn.js";import{Container as T,FooterWrapper as g,TimeStamp as C}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as v}from"./MediaCard.js";const b=l.div`
2
2
  position: absolute;
3
3
  width: 8px;
4
4
  height: 8px;
5
5
  left: -8px;
6
6
  top: -9px;
7
- `,I=d.div`
7
+ `,w=l.div`
8
8
  font-family: 'Inter';
9
9
  font-style: normal;
10
10
  font-weight: 400;
11
11
  font-size: 14px;
12
12
  line-height: 20px;
13
13
  padding: 8px 12px 0px;
14
- color: ${x.content.primary};
14
+ color: ${h.content.primary};
15
15
  word-wrap: break-word;
16
- `,O=d(I)`
16
+ `,I=l(w)`
17
17
  font-weight: 600;
18
18
  margin-bottom: 8px;
19
- `,E=new f,L=d=>{const{bodyText:x,footerText:f,headerMediaType:L,headerText:P,headerAssetLink:_,headerAssetName:N,quickReplybtn:M,ctaBtn:R,actionTypes:A,extras:B,showHeader:H,imagePreviewStyles:S,size:U,bodyVariableList:k,headerVariableList:z,buttons:Y,limitedTimeOfferComponent:V,carouselCardIndex:q,isWhatsappCarousel:D,isPreview:K}=d,Q=E.format(x,k),W=E.format(P,z),{selectedCarouselIndex:G,isProductCarouselType:X,errorIndexes:$}=m(),F={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:l};return a((()=>{console.log("errorIndexes: ",$),console.log("carouselCardIndex: ",q,null==$?void 0:$.includes(null!=q?q:-2))}),[$]),console.log("isPreview: ",K),e(T,Object.assign({isCarouselCard:null!=q&&q>-1,showBorder:null!=q&&q===G||X&&null!=q&&q>-1&&null!=G&&G>-1,hasError:null==$?void 0:$.includes(null!=q?q:-2),isWhatsappCarousel:D,isPreview:K},{children:[!D&&t(b,{children:t(i,{color:"white",height:8,width:8})}),L===u.TEXT?t(O,{dangerouslySetInnerHTML:{__html:W}}):L!==u.NONE?t(w,{headerAssetLink:_,headerAssetName:N,mediaType:L,imagePreviewStyles:L===u.IMAGE?S:{}}):t(o,{}),(null==V?void 0:V.dateTime)?t(j,{text:V.text,dateTime:V.dateTime,code:V.code}):t(o,{}),!!x&&t(o,{children:t(I,{dangerouslySetInnerHTML:{__html:Q}})}),e(C,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(v,Object.assign({style:{flex:1}},{children:f}))})),t(v,{children:"16:48"})]}),Y&&Y.length>0?Y.map(((e,o)=>t(g,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:F[e.type],size:U},o))):A===y.QUICK_REPLY?t("div",{children:null==M?void 0:M.map(((e,o)=>t(g,{text:e.text},o)))}):A===y.CTA_BTN?t("div",{children:null==R?void 0:R.map(((e,o)=>t(g,{textTypography:H?c:h,extraContent:B?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:U},o)))}):t(o,{})]}))};export{L as ChatUIV2};
19
+ `,O=new f,E=l=>{const{bodyText:h,footerText:f,headerMediaType:E,headerText:L,headerAssetLink:P,headerAssetName:_,quickReplybtn:N,ctaBtn:M,actionTypes:R,extras:A,showHeader:B,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:Y,carouselCardIndex:V,isWhatsappCarousel:q,isPreview:D}=l,K=O.format(h,U),Q=O.format(L,k),{selectedCarouselIndex:W,isProductCarouselType:G,errorIndexes:X}=m(),$={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return e(T,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===W||G&&null!=V&&V>-1&&null!=W&&W>-1,hasError:null==X?void 0:X.includes(null!=V?V:-2),isWhatsappCarousel:q,isPreview:D},{children:[!q&&t(b,{children:t(i,{color:"white",height:8,width:8})}),E===x.TEXT?t(I,{dangerouslySetInnerHTML:{__html:Q}}):E!==x.NONE?t(v,{headerAssetLink:P,headerAssetName:_,mediaType:E,imagePreviewStyles:E===x.IMAGE?H:{}}):t(o,{}),(null==Y?void 0:Y.dateTime)?t(j,{text:Y.text,dateTime:Y.dateTime,code:Y.code}):t(o,{}),!!h&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:K}})}),e(g,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(C,Object.assign({style:{flex:1}},{children:f}))})),t(C,{children:"16:48"})]}),z&&z.length>0?z.map(((e,o)=>t(u,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:$[e.type],size:S},o))):R===y.QUICK_REPLY?t("div",{children:null==N?void 0:N.map(((e,o)=>t(u,{text:e.text},o)))}):R===y.CTA_BTN?t("div",{children:null==M?void 0:M.map(((e,o)=>t(u,{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{E as ChatUIV2};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.444.beta-1",
3
+ "version": "0.0.444.beta-2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",