@bikdotai/bik-component-library 0.0.814 → 0.0.815

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ot=require("lodash/cloneDeep"),e=require("react"),z=require("../../utils/StringUtils.js"),at=require("../../constants/Theme.js"),nt=require("../modals/styledModal.js"),A=require("../template-preview/helpers/templateMiscHelper.js"),i=require("../template-preview/models/Channels.js"),G=require("../template-preview/models/WhatsAppTemplate.js"),lt=require("./context/templateModalContext.js"),it=require("./modalElements/Footer.js"),ct=require("./modalElements/TemplateAnalyticsComponent.js"),J=require("./modalElements/TemplateSelectModalContent.js"),dt=require("./utils/convertPlaceholdersToBikDropdown.js"),ut=K=>{const{selectedTemplate:m,closeDialog:M,showVariableMapping:D,channel:s,htmlContent:x,templateVariables:X,onTemplateSelect:H,globalPlaceholders:O,showOnlyContent:Z,whatsappSpecificPickerMeta:ee,zIndex:te,showVariableModal:re,variableList:h,discountCode:se,setDiscountCode:oe,onBackPress:ae,enabledCustomText:ne,variableListForImage:y,showSampleValues:le,disableEditVariable:ie,pod:N,extras:ce,pickerConf:de,selectedCarouselProducts:C,disableEditExpiry:ue,cardWidth:pe,onDeleteSelectedProducts:fe,fileName:me,setFileName:he,hideDeviceContainerInPreview:Ce,maxCharLimit:ge,onDefaultVariableSelect:Se,skipDefaultVariableContent:be,disableDatePicker:Ee,disableCopyCode:Te,initialExpiryDateTime:xe,showDiscountCodeExpiryInfo:ye,footerButtonText:Pe,footerInfoText:Ie,templateAnalytics:n}=K;e.useEffect(()=>{k(x)},[x]);const g=A.determineCardIndex(s),l=A.isItCarousal(s,m),c=m?.isProductCarouselType,[ve,Le]=e.useState(s===i.CHANNEL_TYPE.EMAIL||s==i.CHANNEL_TYPE.WEBPUSH||l?"desktop":"mobile"),[Ae,Me]=e.useState(!1),[B,k]=e.useState(x),[De,d]=e.useState(!1),[He,w]=e.useState([]),[Oe,Ne]=e.useState({}),[r,Be]=e.useState(m),[ke,we]=e.useState([]),[Ve,qe]=e.useState(null),[V,Fe]=e.useState(!1),[q,_e]=e.useState(X??[]),[je,F]=e.useState(!1),[Re,We]=e.useState(l?r?.mapping?.body?.length?-1:0:-1),[u,S]=e.useState([]),[_,j]=e.useState(void 0),Ye=e.useRef(null),[$e,Ue]=e.useState(!1),[R,Qe]=e.useState(!1),[ze,Ge]=e.useState(!1),[Je,b]=e.useState(!0),[Ke,p]=e.useState(!0),[W,Xe]=e.useState({}),[Ze,P]=e.useState("");e.useEffect(()=>{C?S(C):c&&S([])},[C]),e.useEffect(()=>{if(!V&&c&&(!C||S.length===0)){const t=r?.components?.[g].cards,o=[];t?.forEach(I=>{I?.components?.forEach(f=>{f.type==="HEADER"&&o.push(f.example?.header_handle?.[0]??"")})}),we(o),Fe(!0)}},[V]);function et(t,o,I){const f=t?.components?.[I]?.cards;if(!f?.length||!o?.length)return"";const Y=f[0]?.components?.find(E=>E.type==="BODY")?.text??"";if(!Y)return"";const v=t?.mapping?.cards?.[0]?.body??[];if(!v.length)return"";const st={"{{product.name}}":"productName","{{product.description}}":"productDescription"};for(const E of o){let L=Y;for(let T=0;T<v.length;T++){const $=v[T],U=st[$];if(U===void 0)continue;const Q=E[U];if(!Q)return`Variable ${$} is missing for product "${E.productName}".`;L=L.replace(`{{${T+1}}}`,Q)}if(L.length>160)return"Selected products description/name making the description more than 160."}return""}function tt(){if(P(""),u?.length<1&&c){d(!0);return}if(Object.keys(W).length>0&&N!==G.POD.CHATBOT){d(!0);return}if(c&&(u?.length??0)>0){const o=et(r,u,g);if(o){P(o),d(!0);return}}const t=H?.(r,q,B??"",u);Ne(t?.templateErrorIndexes??{body:[],buttons:[]}),t?.errorIndexes||t?.error?(t?.errorIndexes&&w(t.errorIndexes),t?.error&&d(!!t?.error)):F(!0)}const rt=e.useMemo(()=>dt.convertPlaceholdersToBikDropdown(O),[O]);return e.useEffect(()=>{j(ot(h))},[h]),n?.show&&Je&&n.templateQuality&&Object.values(G.TEMPLATE_QUALITY).find(t=>t===String(n.templateQuality))?a.jsx(ct.TemplateAnalyticsComponent,{headingTitle:r?.label,headingSubtitle:s===i.CHANNEL_TYPE.WHATSAPP?`${z.default.capitaliseFirstLetterOfString(r?.category??"")} • ${r?.templateCategory??""}`:"",templateAnalytics:n,analyticsData:n.data,onClose:()=>{M?.(),b(!1),p(!1)},onCancel:()=>{b(!1),p(!1)},onProceed:()=>{b(!1),p(!0)},templateId:r?.templateId||""}):a.jsx(lt.TemplateModalContext.Provider,{value:{hideFooterButton:ze,setHideFooterButton:Ge,hideCrossButton:R,setHideCrossButton:Qe,variableList:_,setVariableList:j,variableCallback:Ve,setVariableCallback:qe,showVariablePicker:Ae,setShowVariablePicker:Me,template:r,setTemplate:Be,device:ve,setDevice:Le,display_content:B,setDisplayContent:k,originalVariableList:q,setOriginalVariableList:_e,isError:De,setIsError:d,channel:s,globalNormalizedPlaceholders:rt,templateSelectionTriggered:je,setTemplateSelectionTriggered:F,enabledCustomText:ne,disableEditVariable:ie,pod:N,extras:ce,isWhatsappCarousel:l,selectedCarouselIndex:Re,setSelectedCarouselIndex:We,isProductCarouselType:c,templateErrorIndexes:Oe,cardCount:l?m.components?.[g].cards?.length:void 0,errorIndexes:He,setErrorIndexes:w,pickerConf:de,carouselProducts:u,setCarouselProducts:S,disableEditExpiry:ue,cardWidth:pe,cardImages:ke,onDeleteSelectedProducts:fe,hideDeviceContainerInPreview:Ce,sliderRef:Ye,isCarouselHovered:$e,setIsCarouselHovered:Ue,maxCharLimit:ge,ctaOptionsErrors:W,setCtaOptionsErrors:Xe,onDefaultVariableSelect:Se,carouselBodyError:Ze,setCarouselBodyError:P,disableDatePicker:Ee,disableCopyCode:Te,initialExpiryDateTime:xe,showDiscountCodeExpiryInfo:ye,cardIndex:g},children:Z?a.jsx(J.default,{variableListFromProps:h,channel:i.CHANNEL_TYPE.EMAIL,hideHeader:!0}):a.jsxs(nt.StyledModal,{hideCrossButton:R,zIndex:te,centralContainerStyles:{width:l?900:s===i.CHANNEL_TYPE.EMAIL&&D?1e3:800},open:Ke,onClose:()=>{p(!1),M?.()},headingTitle:r?.label,headingSubtitle:s===i.CHANNEL_TYPE.WHATSAPP||A.isRCSChannel(s)?`${z.default.capitaliseFirstLetterOfString(r?.category??"")} • ${r?.templateCategory??""}`:"",onBackPress:()=>{if(n?.show){b(!0),p(!1);return}ae?.()},modalHeaderStyles:{borderBottom:`1px solid ${at.COLORS.stroke.primary}`},children:[a.jsx(J.default,{variableListFromProps:h,showSampleValues:le,showVariableMapping:D,channel:s,whatsappSpecificPickerMeta:ee,showVariableModal:re,discountCode:se,setDiscountCode:oe,variableListForImage:y&&y?.length>0?y:_,fileName:me,setFileName:t=>{he?.(t)},skipDefaultVariableContent:be}),H?a.jsx(it.default,{isWhatsappCarousel:l??!1,onSelect:tt,footerButtonText:Pe,footerInfoText:Ie}):a.jsx(a.Fragment,{})]})})};exports.TemplateContextMapper=ut;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ot=require("lodash/cloneDeep"),e=require("react"),G=require("../../utils/StringUtils.js"),at=require("../../constants/Theme.js"),nt=require("../modals/styledModal.js"),A=require("../template-preview/helpers/templateMiscHelper.js"),c=require("../template-preview/models/Channels.js"),J=require("../template-preview/models/WhatsAppTemplate.js"),lt=require("./context/templateModalContext.js"),it=require("./modalElements/Footer.js"),ct=require("./modalElements/TemplateAnalyticsComponent.js"),K=require("./modalElements/TemplateSelectModalContent.js"),dt=require("./utils/convertPlaceholdersToBikDropdown.js"),ut=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},pt=ut(ot),ft=n=>{const{selectedTemplate:C,closeDialog:M,showVariableMapping:H,channel:s,htmlContent:x,templateVariables:X,onTemplateSelect:O,globalPlaceholders:N,showOnlyContent:Z,whatsappSpecificPickerMeta:ee,zIndex:te,showVariableModal:re,variableList:h,discountCode:se,setDiscountCode:oe,onBackPress:ae,enabledCustomText:ne,variableListForImage:P,showSampleValues:le,disableEditVariable:ie,pod:B,extras:ce,pickerConf:de,selectedCarouselProducts:g,disableEditExpiry:ue,cardWidth:pe,onDeleteSelectedProducts:fe,fileName:me,setFileName:Ce,hideDeviceContainerInPreview:he,maxCharLimit:ge,onDefaultVariableSelect:Se,skipDefaultVariableContent:be,disableDatePicker:Ee,disableCopyCode:Te,initialExpiryDateTime:ye,showDiscountCodeExpiryInfo:xe,footerButtonText:Pe,footerInfoText:Ie,templateAnalytics:l}=n;e.useEffect(()=>{w(x)},[x]);const S=A.determineCardIndex(s),i=A.isItCarousal(s,C),d=C?.isProductCarouselType,[ve,Le]=e.useState(s===c.CHANNEL_TYPE.EMAIL||s==c.CHANNEL_TYPE.WEBPUSH||i?"desktop":"mobile"),[De,Ae]=e.useState(!1),[k,w]=e.useState(x),[Me,u]=e.useState(!1),[He,V]=e.useState([]),[Oe,Ne]=e.useState({}),[r,Be]=e.useState(C),[ke,we]=e.useState([]),[Ve,_e]=e.useState(null),[_,qe]=e.useState(!1),[q,Fe]=e.useState(X??[]),[je,F]=e.useState(!1),[Re,We]=e.useState(i?r?.mapping?.body?.length?-1:0:-1),[p,b]=e.useState([]),[j,R]=e.useState(void 0),Ye=e.useRef(null),[$e,Ue]=e.useState(!1),[W,Qe]=e.useState(!1),[ze,Ge]=e.useState(!1),[Je,E]=e.useState(!0),[Ke,f]=e.useState(!0),[Y,Xe]=e.useState({}),[Ze,I]=e.useState("");e.useEffect(()=>{g?b(g):d&&b([])},[g]),e.useEffect(()=>{if(!_&&d&&(!g||b.length===0)){const t=r?.components?.[S].cards,o=[];t?.forEach(v=>{v?.components?.forEach(m=>{m.type==="HEADER"&&o.push(m.example?.header_handle?.[0]??"")})}),we(o),qe(!0)}},[_]);function et(t,o,v){const m=t?.components?.[v]?.cards;if(!m?.length||!o?.length)return"";const $=m[0]?.components?.find(T=>T.type==="BODY")?.text??"";if(!$)return"";const L=t?.mapping?.cards?.[0]?.body??[];if(!L.length)return"";const st={"{{product.name}}":"productName","{{product.description}}":"productDescription"};for(const T of o){let D=$;for(let y=0;y<L.length;y++){const U=L[y],Q=st[U];if(Q===void 0)continue;const z=T[Q];if(!z)return`Variable ${U} is missing for product "${T.productName}".`;D=D.replace(`{{${y+1}}}`,z)}if(D.length>160)return"Selected products description/name making the description more than 160."}return""}function tt(){if(I(""),p?.length<1&&d){u(!0);return}if(Object.keys(Y).length>0&&B!==J.POD.CHATBOT){u(!0);return}if(d&&(p?.length??0)>0){const o=et(r,p,S);if(o){I(o),u(!0);return}}const t=O?.(r,q,k??"",p);Ne(t?.templateErrorIndexes??{body:[],buttons:[]}),t?.errorIndexes||t?.error?(t?.errorIndexes&&V(t.errorIndexes),t?.error&&u(!!t?.error)):F(!0)}const rt=e.useMemo(()=>dt.convertPlaceholdersToBikDropdown(N),[N]);return e.useEffect(()=>{R(pt.default(h))},[h]),l?.show&&Je&&l.templateQuality&&Object.values(J.TEMPLATE_QUALITY).find(t=>t===String(l.templateQuality))?a.jsx(ct.TemplateAnalyticsComponent,{headingTitle:r?.label,headingSubtitle:s===c.CHANNEL_TYPE.WHATSAPP?`${G.default.capitaliseFirstLetterOfString(r?.category??"")} • ${r?.templateCategory??""}`:"",templateAnalytics:l,analyticsData:l.data,onClose:()=>{M?.(),E(!1),f(!1)},onCancel:()=>{E(!1),f(!1)},onProceed:()=>{E(!1),f(!0)},templateId:r?.templateId||""}):a.jsx(lt.TemplateModalContext.Provider,{value:{hideFooterButton:ze,setHideFooterButton:Ge,hideCrossButton:W,setHideCrossButton:Qe,variableList:j,setVariableList:R,variableCallback:Ve,setVariableCallback:_e,showVariablePicker:De,setShowVariablePicker:Ae,template:r,setTemplate:Be,device:ve,setDevice:Le,display_content:k,setDisplayContent:w,originalVariableList:q,setOriginalVariableList:Fe,isError:Me,setIsError:u,channel:s,globalNormalizedPlaceholders:rt,templateSelectionTriggered:je,setTemplateSelectionTriggered:F,enabledCustomText:ne,disableEditVariable:ie,pod:B,extras:ce,isWhatsappCarousel:i,selectedCarouselIndex:Re,setSelectedCarouselIndex:We,isProductCarouselType:d,templateErrorIndexes:Oe,cardCount:i?C.components?.[S].cards?.length:void 0,errorIndexes:He,setErrorIndexes:V,pickerConf:de,carouselProducts:p,setCarouselProducts:b,disableEditExpiry:ue,cardWidth:pe,cardImages:ke,onDeleteSelectedProducts:fe,hideDeviceContainerInPreview:he,sliderRef:Ye,isCarouselHovered:$e,setIsCarouselHovered:Ue,maxCharLimit:ge,ctaOptionsErrors:Y,setCtaOptionsErrors:Xe,onDefaultVariableSelect:Se,carouselBodyError:Ze,setCarouselBodyError:I,disableDatePicker:Ee,disableCopyCode:Te,initialExpiryDateTime:ye,showDiscountCodeExpiryInfo:xe,cardIndex:S},children:Z?a.jsx(K.default,{variableListFromProps:h,channel:c.CHANNEL_TYPE.EMAIL,hideHeader:!0}):a.jsxs(nt.StyledModal,{hideCrossButton:W,zIndex:te,centralContainerStyles:{width:i?900:s===c.CHANNEL_TYPE.EMAIL&&H?1e3:800},open:Ke,onClose:()=>{f(!1),M?.()},headingTitle:r?.label,headingSubtitle:s===c.CHANNEL_TYPE.WHATSAPP||A.isRCSChannel(s)?`${G.default.capitaliseFirstLetterOfString(r?.category??"")} • ${r?.templateCategory??""}`:"",onBackPress:()=>{if(l?.show){E(!0),f(!1);return}ae?.()},modalHeaderStyles:{borderBottom:`1px solid ${at.COLORS.stroke.primary}`},children:[a.jsx(K.default,{variableListFromProps:h,showSampleValues:le,showVariableMapping:H,channel:s,whatsappSpecificPickerMeta:ee,showVariableModal:re,discountCode:se,setDiscountCode:oe,variableListForImage:P&&P?.length>0?P:j,fileName:me,setFileName:t=>{Ce?.(t)},skipDefaultVariableContent:be}),O?a.jsx(it.default,{isWhatsappCarousel:i??!1,onSelect:tt,footerButtonText:Pe,footerInfoText:Ie}):a.jsx(a.Fragment,{})]})})};exports.TemplateContextMapper=ft;
 //# sourceMappingURL=TemplateContextMapper.js.map

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateContextMapper.js","sources":["../../../../src/components/template-context-mapper/TemplateContextMapper.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { StyledModal } from '../modals/styledModal';\nimport {\n\tdetermineCardIndex,\n\tisItCarousal,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '../template-preview/models/Channels';\nimport {\n\tCUSTOM_VARIABLE,\n\ttype GlobalPlaceholderType,\n} from '../template-preview/models/TemplateMeta';\nimport type {\n\tAllTemplateTypes,\n\tAllTemplateVariables,\n\tNonNullTemplateTypes,\n} from '../template-preview/models/types';\nimport type { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate';\nimport {\n\ttype ExtrasWhatsapp,\n\tPOD,\n\tTEMPLATE_QUALITY,\n\ttype TemplateAnalyticsI,\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '../template-preview/models/WhatsAppTemplate';\nimport type { VariableV3 } from '../variable-picker-v3/model';\nimport {\n\ttype DEVICE_TYPES,\n\tTemplateModalContext,\n} from './context/templateModalContext';\nimport Footer from './modalElements/Footer';\nimport { CarouselProduct } from './modalElements/modal';\nimport { TemplateAnalyticsComponent } from './modalElements/TemplateAnalyticsComponent';\n// import Footer from './modalElements/Footer';\nimport TemplateSelectModalContent from './modalElements/TemplateSelectModalContent';\nimport { convertPlaceholdersToBikDropdown } from './utils/convertPlaceholdersToBikDropdown';\n\nexport interface TemplateContextMapperProps {\n\tselectedTemplate: NonNullTemplateTypes;\n\tcloseDialog?: () => void;\n\tshowVariableMapping: boolean;\n\tchannel: CHANNEL_TYPE;\n\tglobalPlaceholders: GlobalPlaceholderType;\n\t/** List of variables being used in this template */\n\ttemplateVariables:\n\t\t| CUSTOM_VARIABLE[]\n\t\t| WhatsAppTemplateVariables\n\t\t| WhatsAppCarouselTemplateVariables\n\t\t| WebpushTemplateVariables;\n\t/** Only for initial-UI-purpose for the modal */\n\thtmlContent: string;\n\tshowOnlyContent?: boolean;\n\tonTemplateSelect?(\n\t\ttemplate: AllTemplateTypes,\n\t\tvariables: AllTemplateVariables,\n\t\tdisplay_content?: string,\n\t\tcarouselProducts?: CarouselProduct[],\n\t): {\n\t\terror: string;\n\t\terrorIndexes?: number[];\n\t\ttemplateErrorIndexes?: { body?: number[]; buttons?: number[] };\n\t} | void;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tzIndex?: number;\n\tshowVariableModal?: boolean;\n\tvariableList?: VariableListInterfaceV2[];\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tonBackPress?: () => void;\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tenabledCustomText?: boolean;\n\tshowSampleValues?: boolean;\n\tdisableEditVariable?: boolean;\n\tpod?: POD;\n\textras?: ExtrasWhatsapp;\n\tpickerConf?: {\n\t\tsearchInCollection: any;\n\t\tsearchProducts: any;\n\t\tfetchCollections: any;\n\t\tfetchProducts: any;\n\t\tstoreId: string;\n\t\tappType?: ApplicationType;\n\t};\n\tselectedCarouselProducts?: CarouselProduct[];\n\tdisableEditExpiry?: boolean;\n\tcardWidth?: number;\n\tonDeleteSelectedProducts?: () => void;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\thideDeviceContainerInPreview?: boolean;\n\tmaxCharLimit?: number;\n\tonDefaultVariableSelect?: (variable: VariableV3) => void;\n\tskipDefaultVariableContent?: boolean;\n\tdisableDatePicker?: boolean;\n\tdisableCopyCode?: boolean;\n\tinitialExpiryDateTime?: string;\n\tshowDiscountCodeExpiryInfo?: boolean;\n\tfooterButtonText?: string;\n\tfooterInfoText?: string;\n\ttemplateAnalytics?: TemplateAnalyticsI;\n}\nexport const TemplateContextMapper = (props: TemplateContextMapperProps) => {\n\tconst {\n\t\tselectedTemplate,\n\t\tcloseDialog,\n\t\tshowVariableMapping,\n\t\tchannel,\n\t\thtmlContent,\n\t\ttemplateVariables,\n\t\tonTemplateSelect,\n\t\tglobalPlaceholders,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tzIndex,\n\t\tshowVariableModal,\n\t\tvariableList: variableListFromProps,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tonBackPress,\n\t\tenabledCustomText,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tdisableEditVariable,\n\t\tpod,\n\t\textras,\n\t\tpickerConf,\n\t\tselectedCarouselProducts,\n\t\tdisableEditExpiry,\n\t\tcardWidth,\n\t\tonDeleteSelectedProducts,\n\t\tfileName,\n\t\tsetFileName,\n\t\thideDeviceContainerInPreview,\n\t\tmaxCharLimit,\n\t\tonDefaultVariableSelect,\n\t\tskipDefaultVariableContent,\n\t\tdisableDatePicker,\n\t\tdisableCopyCode,\n\t\tinitialExpiryDateTime,\n\t\tshowDiscountCodeExpiryInfo,\n\t\tfooterButtonText,\n\t\tfooterInfoText,\n\t\ttemplateAnalytics,\n\t} = props;\n\n\tuseEffect(() => {\n\t\tsetDisplayContent(htmlContent);\n\t}, [htmlContent]);\n\tconst cardIndex = determineCardIndex(channel);\n\tconst isWhatsappCarousel = isItCarousal(\n\t\tchannel,\n\t\tselectedTemplate as WhatsAppCarouselTemplate,\n\t);\n\n\tconst isProductCarouselType = (selectedTemplate as WhatsAppCarouselTemplate)\n\t\t?.isProductCarouselType;\n\tconst [device, setDevice] = useState<DEVICE_TYPES>(\n\t\tchannel === CHANNEL_TYPE.EMAIL ||\n\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ||\n\t\t\tisWhatsappCarousel\n\t\t\t? 'desktop'\n\t\t\t: 'mobile',\n\t);\n\tconst [showVariablePicker, setShowVariablePicker] = useState<boolean>(false);\n\tconst [display_content, setDisplayContent] = useState<string | null>(\n\t\thtmlContent,\n\t);\n\tconst [isError, setIsError] = useState<boolean>(false);\n\tconst [errorIndexes, setErrorIndexes] = useState<number[]>([]);\n\tconst [templateErrorIndexes, setTemplateErrorIndexes] = useState<{\n\t\tbody?: number[];\n\t\tbuttons?: number[];\n\t}>({});\n\tconst [template, setTemplate] = useState<AllTemplateTypes>(selectedTemplate);\n\tconst [cardImages, setCardImages] = useState<string[]>([]);\n\tconst [variableCallback, setVariableCallback] = useState(null);\n\tconst [hasUpdateOriginalTemplate, setHasUpdateOriginalTemplate] =\n\t\tuseState(false);\n\tconst [originalVariableList, setOriginalVariableList] =\n\t\tuseState<AllTemplateVariables>(templateVariables ?? []);\n\tconst [templateSelectionTriggered, setTemplateSelectionTriggered] =\n\t\tuseState(false);\n\tconst [selectedCarouselIndex, setSelectedCarouselIndex] = useState<number>(\n\t\tisWhatsappCarousel ? (template?.mapping?.body?.length ? -1 : 0) : -1,\n\t);\n\tconst [carouselProducts, setCarouselProducts] = useState<CarouselProduct[]>(\n\t\t[],\n\t);\n\tconst [variableList, setVariableList] = useState<\n\t\tVariableListInterfaceV2[] | undefined\n\t>(undefined);\n\n\tconst sliderRef = useRef(null);\n\n\tconst [isCarouselHovered, setIsCarouselHovered] = useState(false);\n\tconst [hideCrossButton, setHideCrossButton] = useState(false);\n\tconst [hideFooterButton, setHideFooterButton] = useState(false);\n\tconst [showWarningModal, setShowWarningModal] = useState(true);\n\tconst [openMapper, setOpenMapper] = useState(true);\n\tconst [ctaOptionsErrors, setCtaOptionsErrors] = useState({});\n\tconst [carouselBodyError, setCarouselBodyError] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselProducts) {\n\t\t\tsetCarouselProducts(selectedCarouselProducts);\n\t\t} else if (isProductCarouselType) {\n\t\t\tsetCarouselProducts([]);\n\t\t}\n\t}, [selectedCarouselProducts]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\t!hasUpdateOriginalTemplate &&\n\t\t\tisProductCarouselType &&\n\t\t\t(!selectedCarouselProducts || setCarouselProducts.length === 0)\n\t\t) {\n\t\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\t\tcardIndex\n\t\t\t].cards;\n\t\t\tconst images: string[] = [];\n\t\t\tcards?.forEach((card) => {\n\t\t\t\tcard?.components?.forEach((comp) => {\n\t\t\t\t\tif (comp.type === 'HEADER') {\n\t\t\t\t\t\timages.push(comp.example?.header_handle?.[0] ?? '');\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t\tsetCardImages(images);\n\t\t\tsetHasUpdateOriginalTemplate(true);\n\t\t}\n\t}, [hasUpdateOriginalTemplate]);\n\n\tfunction getProductCarouselBodyError(\n\t\tcarouselTemplate: WhatsAppCarouselTemplate,\n\t\tproducts: CarouselProduct[],\n\t\tidx: number,\n\t): string {\n\t\tconst cards = carouselTemplate?.components?.[idx]?.cards;\n\t\tif (!cards?.length || !products?.length) return '';\n\n\t\tconst cardBodyText =\n\t\t\tcards[0]?.components?.find((c) => c.type === 'BODY')?.text ?? '';\n\t\tif (!cardBodyText) return '';\n\n\t\tconst bodyMapping = carouselTemplate?.mapping?.cards?.[0]?.body ?? [];\n\t\tif (!bodyMapping.length) return '';\n\n\t\tconst PRODUCT_VAR_TO_FIELD: Partial<Record<string, keyof CarouselProduct>> =\n\t\t\t{\n\t\t\t\t'{{product.name}}': 'productName',\n\t\t\t\t'{{product.description}}': 'productDescription',\n\t\t\t};\n\n\t\tfor (const product of products) {\n\t\t\tlet resolvedText = cardBodyText;\n\t\t\tfor (let i = 0; i < bodyMapping.length; i++) {\n\t\t\t\tconst varPlaceholder = bodyMapping[i];\n\t\t\t\tconst productField = PRODUCT_VAR_TO_FIELD[varPlaceholder];\n\t\t\t\tif (productField === undefined) continue;\n\t\t\t\tconst value = product[productField] as string | undefined;\n\t\t\t\tif (!value) {\n\t\t\t\t\treturn `Variable ${varPlaceholder} is missing for product \"${product.productName}\".`;\n\t\t\t\t}\n\t\t\t\tresolvedText = resolvedText.replace(`{{${i + 1}}}`, value);\n\t\t\t}\n\t\t\tif (resolvedText.length > 160) {\n\t\t\t\treturn `Selected products description/name making the description more than 160.`;\n\t\t\t}\n\t\t}\n\t\treturn '';\n\t}\n\n\tfunction onSelect() {\n\t\tsetCarouselBodyError('');\n\n\t\tif (carouselProducts?.length < 1 && isProductCarouselType) {\n\t\t\tsetIsError(true);\n\t\t\treturn;\n\t\t}\n\n\t\t// Added pod check because campaign uses dropdown where cta options empty error is possible\n\t\t// Chatbot is using variable picker where empty error is not possible\n\t\tif (Object.keys(ctaOptionsErrors).length > 0 && pod !== POD.CHATBOT) {\n\t\t\tsetIsError(true);\n\t\t\treturn;\n\t\t}\n\n\t\tif (isProductCarouselType && (carouselProducts?.length ?? 0) > 0) {\n\t\t\tconst bodyErr = getProductCarouselBodyError(\n\t\t\t\ttemplate as WhatsAppCarouselTemplate,\n\t\t\t\tcarouselProducts,\n\t\t\t\tcardIndex,\n\t\t\t);\n\t\t\tif (bodyErr) {\n\t\t\t\tsetCarouselBodyError(bodyErr);\n\t\t\t\tsetIsError(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tconst error = onTemplateSelect?.(\n\t\t\ttemplate as AllTemplateTypes,\n\t\t\toriginalVariableList,\n\t\t\tdisplay_content ?? '',\n\t\t\tcarouselProducts,\n\t\t);\n\n\t\tsetTemplateErrorIndexes(\n\t\t\terror?.templateErrorIndexes ?? { body: [], buttons: [] },\n\t\t);\n\n\t\tif (error?.errorIndexes || error?.error) {\n\t\t\tif (error?.errorIndexes) {\n\t\t\t\tsetErrorIndexes(error.errorIndexes);\n\t\t\t}\n\t\t\tif (error?.error) {\n\t\t\t\tsetIsError(!!error?.error);\n\t\t\t}\n\t\t} else {\n\t\t\tsetTemplateSelectionTriggered(true);\n\t\t}\n\t}\n\n\tconst globalNormalizedPlaceholders = useMemo(\n\t\t() => convertPlaceholdersToBikDropdown(globalPlaceholders),\n\t\t[globalPlaceholders],\n\t);\n\n\tuseEffect(() => {\n\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t}, [variableListFromProps]);\n\n\tif (\n\t\ttemplateAnalytics?.show &&\n\t\tshowWarningModal &&\n\t\ttemplateAnalytics.templateQuality &&\n\t\tObject.values(TEMPLATE_QUALITY).find(\n\t\t\t(value) => value === String(templateAnalytics.templateQuality),\n\t\t)\n\t) {\n\t\t// extra check for other pods\n\t\treturn (\n\t\t\t<TemplateAnalyticsComponent\n\t\t\t\theadingTitle={template?.label}\n\t\t\t\theadingSubtitle={\n\t\t\t\t\tchannel === CHANNEL_TYPE.WHATSAPP\n\t\t\t\t\t\t? `${StringUtils.capitaliseFirstLetterOfString(\n\t\t\t\t\t\t\t\ttemplate?.category ?? '',\n\t\t\t\t\t\t  )} • ${(template as WhatsAppTemplate)?.templateCategory ?? ''}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\ttemplateAnalytics={templateAnalytics}\n\t\t\t\tanalyticsData={templateAnalytics.data}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tcloseDialog?.();\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t}}\n\t\t\t\tonCancel={() => {\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t}}\n\t\t\t\tonProceed={() => {\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(true);\n\t\t\t\t}}\n\t\t\t\ttemplateId={template?.templateId || ''}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TemplateModalContext.Provider\n\t\t\tvalue={{\n\t\t\t\thideFooterButton,\n\t\t\t\tsetHideFooterButton,\n\t\t\t\thideCrossButton,\n\t\t\t\tsetHideCrossButton,\n\t\t\t\tvariableList,\n\t\t\t\tsetVariableList,\n\t\t\t\tvariableCallback,\n\t\t\t\tsetVariableCallback,\n\t\t\t\tshowVariablePicker,\n\t\t\t\tsetShowVariablePicker,\n\t\t\t\ttemplate,\n\t\t\t\tsetTemplate,\n\t\t\t\tdevice,\n\t\t\t\tsetDevice,\n\t\t\t\tdisplay_content,\n\t\t\t\tsetDisplayContent,\n\t\t\t\toriginalVariableList,\n\t\t\t\tsetOriginalVariableList,\n\t\t\t\tisError,\n\t\t\t\tsetIsError,\n\t\t\t\tchannel,\n\t\t\t\tglobalNormalizedPlaceholders,\n\t\t\t\ttemplateSelectionTriggered,\n\t\t\t\tsetTemplateSelectionTriggered,\n\t\t\t\tenabledCustomText,\n\t\t\t\tdisableEditVariable,\n\t\t\t\tpod,\n\t\t\t\textras,\n\t\t\t\tisWhatsappCarousel,\n\t\t\t\tselectedCarouselIndex,\n\t\t\t\tsetSelectedCarouselIndex,\n\t\t\t\tisProductCarouselType,\n\t\t\t\ttemplateErrorIndexes,\n\t\t\t\tcardCount: isWhatsappCarousel\n\t\t\t\t\t? (selectedTemplate as WhatsAppCarouselTemplate).components?.[\n\t\t\t\t\t\t\tcardIndex\n\t\t\t\t\t  ].cards?.length\n\t\t\t\t\t: undefined,\n\t\t\t\terrorIndexes,\n\t\t\t\tsetErrorIndexes,\n\t\t\t\tpickerConf,\n\t\t\t\tcarouselProducts,\n\t\t\t\tsetCarouselProducts,\n\t\t\t\tdisableEditExpiry,\n\t\t\t\tcardWidth,\n\t\t\t\tcardImages,\n\t\t\t\tonDeleteSelectedProducts,\n\t\t\t\thideDeviceContainerInPreview,\n\t\t\t\tsliderRef,\n\t\t\t\tisCarouselHovered,\n\t\t\t\tsetIsCarouselHovered,\n\t\t\t\tmaxCharLimit,\n\t\t\t\tctaOptionsErrors,\n\t\t\t\tsetCtaOptionsErrors,\n\t\t\t\tonDefaultVariableSelect,\n\t\t\t\tcarouselBodyError,\n\t\t\t\tsetCarouselBodyError,\n\t\t\t\tdisableDatePicker,\n\t\t\t\tdisableCopyCode,\n\t\t\t\tinitialExpiryDateTime,\n\t\t\t\tshowDiscountCodeExpiryInfo,\n\t\t\t\tcardIndex,\n\t\t\t}}\n\t\t>\n\t\t\t{showOnlyContent ? (\n\t\t\t\t<TemplateSelectModalContent\n\t\t\t\t\tvariableListFromProps={variableListFromProps}\n\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\thideHeader\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<StyledModal\n\t\t\t\t\thideCrossButton={hideCrossButton}\n\t\t\t\t\tzIndex={zIndex}\n\t\t\t\t\tcentralContainerStyles={{\n\t\t\t\t\t\twidth: isWhatsappCarousel\n\t\t\t\t\t\t\t? 900\n\t\t\t\t\t\t\t: channel === CHANNEL_TYPE.EMAIL && showVariableMapping\n\t\t\t\t\t\t\t? 1000\n\t\t\t\t\t\t\t: 800,\n\t\t\t\t\t}}\n\t\t\t\t\topen={openMapper}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t\t\tcloseDialog?.();\n\t\t\t\t\t}}\n\t\t\t\t\theadingTitle={template?.label}\n\t\t\t\t\theadingSubtitle={\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.WHATSAPP || isRCSChannel(channel)\n\t\t\t\t\t\t\t? `${StringUtils.capitaliseFirstLetterOfString(\n\t\t\t\t\t\t\t\t\ttemplate?.category ?? '',\n\t\t\t\t\t\t\t  )} • ${(template as WhatsAppTemplate)?.templateCategory ?? ''}`\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tonBackPress={() => {\n\t\t\t\t\t\tif (templateAnalytics?.show) {\n\t\t\t\t\t\t\tsetShowWarningModal(true);\n\t\t\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonBackPress?.();\n\t\t\t\t\t}}\n\t\t\t\t\tmodalHeaderStyles={{\n\t\t\t\t\t\tborderBottom: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TemplateSelectModalContent\n\t\t\t\t\t\tvariableListFromProps={variableListFromProps}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\tvariableListForImage={\n\t\t\t\t\t\t\tvariableListForImage && variableListForImage?.length > 0\n\t\t\t\t\t\t\t\t? variableListForImage\n\t\t\t\t\t\t\t\t: variableList\n\t\t\t\t\t\t}\n\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\tsetFileName={(file) => {\n\t\t\t\t\t\t\tsetFileName?.(file);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t/>\n\t\t\t\t\t{onTemplateSelect ? (\n\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel ?? false}\n\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\tfooterButtonText={footerButtonText}\n\t\t\t\t\t\t\tfooterInfoText={footerInfoText}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</TemplateModalContext.Provider>\n\t);\n};\n"],"names":["TemplateContextMapper","props","selectedTemplate","closeDialog","showVariableMapping","channel","htmlContent","templateVariables","onTemplateSelect","globalPlaceholders","showOnlyContent","whatsappSpecificPickerMeta","zIndex","showVariableModal","variableListFromProps","discountCode","setDiscountCode","onBackPress","enabledCustomText","variableListForImage","showSampleValues","disableEditVariable","pod","extras","pickerConf","selectedCarouselProducts","disableEditExpiry","cardWidth","onDeleteSelectedProducts","fileName","setFileName","hideDeviceContainerInPreview","maxCharLimit","onDefaultVariableSelect","skipDefaultVariableContent","disableDatePicker","disableCopyCode","initialExpiryDateTime","showDiscountCodeExpiryInfo","footerButtonText","footerInfoText","templateAnalytics","useEffect","setDisplayContent","cardIndex","determineCardIndex","isWhatsappCarousel","isItCarousal","isProductCarouselType","device","setDevice","useState","CHANNEL_TYPE","showVariablePicker","setShowVariablePicker","display_content","isError","setIsError","errorIndexes","setErrorIndexes","templateErrorIndexes","setTemplateErrorIndexes","template","setTemplate","cardImages","setCardImages","variableCallback","setVariableCallback","hasUpdateOriginalTemplate","setHasUpdateOriginalTemplate","originalVariableList","setOriginalVariableList","templateSelectionTriggered","setTemplateSelectionTriggered","selectedCarouselIndex","setSelectedCarouselIndex","carouselProducts","setCarouselProducts","variableList","setVariableList","sliderRef","useRef","isCarouselHovered","setIsCarouselHovered","hideCrossButton","setHideCrossButton","hideFooterButton","setHideFooterButton","showWarningModal","setShowWarningModal","openMapper","setOpenMapper","ctaOptionsErrors","setCtaOptionsErrors","carouselBodyError","setCarouselBodyError","cards","images","card","comp","getProductCarouselBodyError","carouselTemplate","products","idx","cardBodyText","c","bodyMapping","PRODUCT_VAR_TO_FIELD","product","resolvedText","i","varPlaceholder","productField","value","onSelect","POD","bodyErr","error","globalNormalizedPlaceholders","useMemo","convertPlaceholdersToBikDropdown","cloneDeep","TEMPLATE_QUALITY","jsx","TemplateAnalyticsComponent","StringUtils","TemplateModalContext","TemplateSelectModalContent","jsxs","StyledModal","isRCSChannel","COLORS","file","Footer","Fragment"],"mappings":"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"}
+{"version":3,"file":"TemplateContextMapper.js","sources":["../../../../src/components/template-context-mapper/TemplateContextMapper.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { StyledModal } from '../modals/styledModal';\nimport {\n\tdetermineCardIndex,\n\tisItCarousal,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '../template-preview/models/Channels';\nimport {\n\tCUSTOM_VARIABLE,\n\ttype GlobalPlaceholderType,\n} from '../template-preview/models/TemplateMeta';\nimport type {\n\tAllTemplateTypes,\n\tAllTemplateVariables,\n\tNonNullTemplateTypes,\n} from '../template-preview/models/types';\nimport type { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate';\nimport {\n\ttype ExtrasWhatsapp,\n\tPOD,\n\tTEMPLATE_QUALITY,\n\ttype TemplateAnalyticsI,\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '../template-preview/models/WhatsAppTemplate';\nimport type { VariableV3 } from '../variable-picker-v3/model';\nimport {\n\ttype DEVICE_TYPES,\n\tTemplateModalContext,\n} from './context/templateModalContext';\nimport Footer from './modalElements/Footer';\nimport { CarouselProduct } from './modalElements/modal';\nimport { TemplateAnalyticsComponent } from './modalElements/TemplateAnalyticsComponent';\n// import Footer from './modalElements/Footer';\nimport TemplateSelectModalContent from './modalElements/TemplateSelectModalContent';\nimport { convertPlaceholdersToBikDropdown } from './utils/convertPlaceholdersToBikDropdown';\n\nexport interface TemplateContextMapperProps {\n\tselectedTemplate: NonNullTemplateTypes;\n\tcloseDialog?: () => void;\n\tshowVariableMapping: boolean;\n\tchannel: CHANNEL_TYPE;\n\tglobalPlaceholders: GlobalPlaceholderType;\n\t/** List of variables being used in this template */\n\ttemplateVariables:\n\t\t| CUSTOM_VARIABLE[]\n\t\t| WhatsAppTemplateVariables\n\t\t| WhatsAppCarouselTemplateVariables\n\t\t| WebpushTemplateVariables;\n\t/** Only for initial-UI-purpose for the modal */\n\thtmlContent: string;\n\tshowOnlyContent?: boolean;\n\tonTemplateSelect?(\n\t\ttemplate: AllTemplateTypes,\n\t\tvariables: AllTemplateVariables,\n\t\tdisplay_content?: string,\n\t\tcarouselProducts?: CarouselProduct[],\n\t): {\n\t\terror: string;\n\t\terrorIndexes?: number[];\n\t\ttemplateErrorIndexes?: { body?: number[]; buttons?: number[] };\n\t} | void;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tzIndex?: number;\n\tshowVariableModal?: boolean;\n\tvariableList?: VariableListInterfaceV2[];\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tonBackPress?: () => void;\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tenabledCustomText?: boolean;\n\tshowSampleValues?: boolean;\n\tdisableEditVariable?: boolean;\n\tpod?: POD;\n\textras?: ExtrasWhatsapp;\n\tpickerConf?: {\n\t\tsearchInCollection: any;\n\t\tsearchProducts: any;\n\t\tfetchCollections: any;\n\t\tfetchProducts: any;\n\t\tstoreId: string;\n\t\tappType?: ApplicationType;\n\t};\n\tselectedCarouselProducts?: CarouselProduct[];\n\tdisableEditExpiry?: boolean;\n\tcardWidth?: number;\n\tonDeleteSelectedProducts?: () => void;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\thideDeviceContainerInPreview?: boolean;\n\tmaxCharLimit?: number;\n\tonDefaultVariableSelect?: (variable: VariableV3) => void;\n\tskipDefaultVariableContent?: boolean;\n\tdisableDatePicker?: boolean;\n\tdisableCopyCode?: boolean;\n\tinitialExpiryDateTime?: string;\n\tshowDiscountCodeExpiryInfo?: boolean;\n\tfooterButtonText?: string;\n\tfooterInfoText?: string;\n\ttemplateAnalytics?: TemplateAnalyticsI;\n}\nexport const TemplateContextMapper = (props: TemplateContextMapperProps) => {\n\tconst {\n\t\tselectedTemplate,\n\t\tcloseDialog,\n\t\tshowVariableMapping,\n\t\tchannel,\n\t\thtmlContent,\n\t\ttemplateVariables,\n\t\tonTemplateSelect,\n\t\tglobalPlaceholders,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tzIndex,\n\t\tshowVariableModal,\n\t\tvariableList: variableListFromProps,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tonBackPress,\n\t\tenabledCustomText,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tdisableEditVariable,\n\t\tpod,\n\t\textras,\n\t\tpickerConf,\n\t\tselectedCarouselProducts,\n\t\tdisableEditExpiry,\n\t\tcardWidth,\n\t\tonDeleteSelectedProducts,\n\t\tfileName,\n\t\tsetFileName,\n\t\thideDeviceContainerInPreview,\n\t\tmaxCharLimit,\n\t\tonDefaultVariableSelect,\n\t\tskipDefaultVariableContent,\n\t\tdisableDatePicker,\n\t\tdisableCopyCode,\n\t\tinitialExpiryDateTime,\n\t\tshowDiscountCodeExpiryInfo,\n\t\tfooterButtonText,\n\t\tfooterInfoText,\n\t\ttemplateAnalytics,\n\t} = props;\n\n\tuseEffect(() => {\n\t\tsetDisplayContent(htmlContent);\n\t}, [htmlContent]);\n\tconst cardIndex = determineCardIndex(channel);\n\tconst isWhatsappCarousel = isItCarousal(\n\t\tchannel,\n\t\tselectedTemplate as WhatsAppCarouselTemplate,\n\t);\n\n\tconst isProductCarouselType = (selectedTemplate as WhatsAppCarouselTemplate)\n\t\t?.isProductCarouselType;\n\tconst [device, setDevice] = useState<DEVICE_TYPES>(\n\t\tchannel === CHANNEL_TYPE.EMAIL ||\n\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ||\n\t\t\tisWhatsappCarousel\n\t\t\t? 'desktop'\n\t\t\t: 'mobile',\n\t);\n\tconst [showVariablePicker, setShowVariablePicker] = useState<boolean>(false);\n\tconst [display_content, setDisplayContent] = useState<string | null>(\n\t\thtmlContent,\n\t);\n\tconst [isError, setIsError] = useState<boolean>(false);\n\tconst [errorIndexes, setErrorIndexes] = useState<number[]>([]);\n\tconst [templateErrorIndexes, setTemplateErrorIndexes] = useState<{\n\t\tbody?: number[];\n\t\tbuttons?: number[];\n\t}>({});\n\tconst [template, setTemplate] = useState<AllTemplateTypes>(selectedTemplate);\n\tconst [cardImages, setCardImages] = useState<string[]>([]);\n\tconst [variableCallback, setVariableCallback] = useState(null);\n\tconst [hasUpdateOriginalTemplate, setHasUpdateOriginalTemplate] =\n\t\tuseState(false);\n\tconst [originalVariableList, setOriginalVariableList] =\n\t\tuseState<AllTemplateVariables>(templateVariables ?? []);\n\tconst [templateSelectionTriggered, setTemplateSelectionTriggered] =\n\t\tuseState(false);\n\tconst [selectedCarouselIndex, setSelectedCarouselIndex] = useState<number>(\n\t\tisWhatsappCarousel ? (template?.mapping?.body?.length ? -1 : 0) : -1,\n\t);\n\tconst [carouselProducts, setCarouselProducts] = useState<CarouselProduct[]>(\n\t\t[],\n\t);\n\tconst [variableList, setVariableList] = useState<\n\t\tVariableListInterfaceV2[] | undefined\n\t>(undefined);\n\n\tconst sliderRef = useRef(null);\n\n\tconst [isCarouselHovered, setIsCarouselHovered] = useState(false);\n\tconst [hideCrossButton, setHideCrossButton] = useState(false);\n\tconst [hideFooterButton, setHideFooterButton] = useState(false);\n\tconst [showWarningModal, setShowWarningModal] = useState(true);\n\tconst [openMapper, setOpenMapper] = useState(true);\n\tconst [ctaOptionsErrors, setCtaOptionsErrors] = useState({});\n\tconst [carouselBodyError, setCarouselBodyError] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselProducts) {\n\t\t\tsetCarouselProducts(selectedCarouselProducts);\n\t\t} else if (isProductCarouselType) {\n\t\t\tsetCarouselProducts([]);\n\t\t}\n\t}, [selectedCarouselProducts]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\t!hasUpdateOriginalTemplate &&\n\t\t\tisProductCarouselType &&\n\t\t\t(!selectedCarouselProducts || setCarouselProducts.length === 0)\n\t\t) {\n\t\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\t\tcardIndex\n\t\t\t].cards;\n\t\t\tconst images: string[] = [];\n\t\t\tcards?.forEach((card) => {\n\t\t\t\tcard?.components?.forEach((comp) => {\n\t\t\t\t\tif (comp.type === 'HEADER') {\n\t\t\t\t\t\timages.push(comp.example?.header_handle?.[0] ?? '');\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t\tsetCardImages(images);\n\t\t\tsetHasUpdateOriginalTemplate(true);\n\t\t}\n\t}, [hasUpdateOriginalTemplate]);\n\n\tfunction getProductCarouselBodyError(\n\t\tcarouselTemplate: WhatsAppCarouselTemplate,\n\t\tproducts: CarouselProduct[],\n\t\tidx: number,\n\t): string {\n\t\tconst cards = carouselTemplate?.components?.[idx]?.cards;\n\t\tif (!cards?.length || !products?.length) return '';\n\n\t\tconst cardBodyText =\n\t\t\tcards[0]?.components?.find((c) => c.type === 'BODY')?.text ?? '';\n\t\tif (!cardBodyText) return '';\n\n\t\tconst bodyMapping = carouselTemplate?.mapping?.cards?.[0]?.body ?? [];\n\t\tif (!bodyMapping.length) return '';\n\n\t\tconst PRODUCT_VAR_TO_FIELD: Partial<Record<string, keyof CarouselProduct>> =\n\t\t\t{\n\t\t\t\t'{{product.name}}': 'productName',\n\t\t\t\t'{{product.description}}': 'productDescription',\n\t\t\t};\n\n\t\tfor (const product of products) {\n\t\t\tlet resolvedText = cardBodyText;\n\t\t\tfor (let i = 0; i < bodyMapping.length; i++) {\n\t\t\t\tconst varPlaceholder = bodyMapping[i];\n\t\t\t\tconst productField = PRODUCT_VAR_TO_FIELD[varPlaceholder];\n\t\t\t\tif (productField === undefined) continue;\n\t\t\t\tconst value = product[productField] as string | undefined;\n\t\t\t\tif (!value) {\n\t\t\t\t\treturn `Variable ${varPlaceholder} is missing for product \"${product.productName}\".`;\n\t\t\t\t}\n\t\t\t\tresolvedText = resolvedText.replace(`{{${i + 1}}}`, value);\n\t\t\t}\n\t\t\tif (resolvedText.length > 160) {\n\t\t\t\treturn `Selected products description/name making the description more than 160.`;\n\t\t\t}\n\t\t}\n\t\treturn '';\n\t}\n\n\tfunction onSelect() {\n\t\tsetCarouselBodyError('');\n\n\t\tif (carouselProducts?.length < 1 && isProductCarouselType) {\n\t\t\tsetIsError(true);\n\t\t\treturn;\n\t\t}\n\n\t\t// Added pod check because campaign uses dropdown where cta options empty error is possible\n\t\t// Chatbot is using variable picker where empty error is not possible\n\t\tif (Object.keys(ctaOptionsErrors).length > 0 && pod !== POD.CHATBOT) {\n\t\t\tsetIsError(true);\n\t\t\treturn;\n\t\t}\n\n\t\tif (isProductCarouselType && (carouselProducts?.length ?? 0) > 0) {\n\t\t\tconst bodyErr = getProductCarouselBodyError(\n\t\t\t\ttemplate as WhatsAppCarouselTemplate,\n\t\t\t\tcarouselProducts,\n\t\t\t\tcardIndex,\n\t\t\t);\n\t\t\tif (bodyErr) {\n\t\t\t\tsetCarouselBodyError(bodyErr);\n\t\t\t\tsetIsError(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tconst error = onTemplateSelect?.(\n\t\t\ttemplate as AllTemplateTypes,\n\t\t\toriginalVariableList,\n\t\t\tdisplay_content ?? '',\n\t\t\tcarouselProducts,\n\t\t);\n\n\t\tsetTemplateErrorIndexes(\n\t\t\terror?.templateErrorIndexes ?? { body: [], buttons: [] },\n\t\t);\n\n\t\tif (error?.errorIndexes || error?.error) {\n\t\t\tif (error?.errorIndexes) {\n\t\t\t\tsetErrorIndexes(error.errorIndexes);\n\t\t\t}\n\t\t\tif (error?.error) {\n\t\t\t\tsetIsError(!!error?.error);\n\t\t\t}\n\t\t} else {\n\t\t\tsetTemplateSelectionTriggered(true);\n\t\t}\n\t}\n\n\tconst globalNormalizedPlaceholders = useMemo(\n\t\t() => convertPlaceholdersToBikDropdown(globalPlaceholders),\n\t\t[globalPlaceholders],\n\t);\n\n\tuseEffect(() => {\n\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t}, [variableListFromProps]);\n\n\tif (\n\t\ttemplateAnalytics?.show &&\n\t\tshowWarningModal &&\n\t\ttemplateAnalytics.templateQuality &&\n\t\tObject.values(TEMPLATE_QUALITY).find(\n\t\t\t(value) => value === String(templateAnalytics.templateQuality),\n\t\t)\n\t) {\n\t\t// extra check for other pods\n\t\treturn (\n\t\t\t<TemplateAnalyticsComponent\n\t\t\t\theadingTitle={template?.label}\n\t\t\t\theadingSubtitle={\n\t\t\t\t\tchannel === CHANNEL_TYPE.WHATSAPP\n\t\t\t\t\t\t? `${StringUtils.capitaliseFirstLetterOfString(\n\t\t\t\t\t\t\t\ttemplate?.category ?? '',\n\t\t\t\t\t\t  )} • ${(template as WhatsAppTemplate)?.templateCategory ?? ''}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\ttemplateAnalytics={templateAnalytics}\n\t\t\t\tanalyticsData={templateAnalytics.data}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tcloseDialog?.();\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t}}\n\t\t\t\tonCancel={() => {\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t}}\n\t\t\t\tonProceed={() => {\n\t\t\t\t\tsetShowWarningModal(false);\n\t\t\t\t\tsetOpenMapper(true);\n\t\t\t\t}}\n\t\t\t\ttemplateId={template?.templateId || ''}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TemplateModalContext.Provider\n\t\t\tvalue={{\n\t\t\t\thideFooterButton,\n\t\t\t\tsetHideFooterButton,\n\t\t\t\thideCrossButton,\n\t\t\t\tsetHideCrossButton,\n\t\t\t\tvariableList,\n\t\t\t\tsetVariableList,\n\t\t\t\tvariableCallback,\n\t\t\t\tsetVariableCallback,\n\t\t\t\tshowVariablePicker,\n\t\t\t\tsetShowVariablePicker,\n\t\t\t\ttemplate,\n\t\t\t\tsetTemplate,\n\t\t\t\tdevice,\n\t\t\t\tsetDevice,\n\t\t\t\tdisplay_content,\n\t\t\t\tsetDisplayContent,\n\t\t\t\toriginalVariableList,\n\t\t\t\tsetOriginalVariableList,\n\t\t\t\tisError,\n\t\t\t\tsetIsError,\n\t\t\t\tchannel,\n\t\t\t\tglobalNormalizedPlaceholders,\n\t\t\t\ttemplateSelectionTriggered,\n\t\t\t\tsetTemplateSelectionTriggered,\n\t\t\t\tenabledCustomText,\n\t\t\t\tdisableEditVariable,\n\t\t\t\tpod,\n\t\t\t\textras,\n\t\t\t\tisWhatsappCarousel,\n\t\t\t\tselectedCarouselIndex,\n\t\t\t\tsetSelectedCarouselIndex,\n\t\t\t\tisProductCarouselType,\n\t\t\t\ttemplateErrorIndexes,\n\t\t\t\tcardCount: isWhatsappCarousel\n\t\t\t\t\t? (selectedTemplate as WhatsAppCarouselTemplate).components?.[\n\t\t\t\t\t\t\tcardIndex\n\t\t\t\t\t  ].cards?.length\n\t\t\t\t\t: undefined,\n\t\t\t\terrorIndexes,\n\t\t\t\tsetErrorIndexes,\n\t\t\t\tpickerConf,\n\t\t\t\tcarouselProducts,\n\t\t\t\tsetCarouselProducts,\n\t\t\t\tdisableEditExpiry,\n\t\t\t\tcardWidth,\n\t\t\t\tcardImages,\n\t\t\t\tonDeleteSelectedProducts,\n\t\t\t\thideDeviceContainerInPreview,\n\t\t\t\tsliderRef,\n\t\t\t\tisCarouselHovered,\n\t\t\t\tsetIsCarouselHovered,\n\t\t\t\tmaxCharLimit,\n\t\t\t\tctaOptionsErrors,\n\t\t\t\tsetCtaOptionsErrors,\n\t\t\t\tonDefaultVariableSelect,\n\t\t\t\tcarouselBodyError,\n\t\t\t\tsetCarouselBodyError,\n\t\t\t\tdisableDatePicker,\n\t\t\t\tdisableCopyCode,\n\t\t\t\tinitialExpiryDateTime,\n\t\t\t\tshowDiscountCodeExpiryInfo,\n\t\t\t\tcardIndex,\n\t\t\t}}\n\t\t>\n\t\t\t{showOnlyContent ? (\n\t\t\t\t<TemplateSelectModalContent\n\t\t\t\t\tvariableListFromProps={variableListFromProps}\n\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\thideHeader\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<StyledModal\n\t\t\t\t\thideCrossButton={hideCrossButton}\n\t\t\t\t\tzIndex={zIndex}\n\t\t\t\t\tcentralContainerStyles={{\n\t\t\t\t\t\twidth: isWhatsappCarousel\n\t\t\t\t\t\t\t? 900\n\t\t\t\t\t\t\t: channel === CHANNEL_TYPE.EMAIL && showVariableMapping\n\t\t\t\t\t\t\t? 1000\n\t\t\t\t\t\t\t: 800,\n\t\t\t\t\t}}\n\t\t\t\t\topen={openMapper}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t\t\tcloseDialog?.();\n\t\t\t\t\t}}\n\t\t\t\t\theadingTitle={template?.label}\n\t\t\t\t\theadingSubtitle={\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.WHATSAPP || isRCSChannel(channel)\n\t\t\t\t\t\t\t? `${StringUtils.capitaliseFirstLetterOfString(\n\t\t\t\t\t\t\t\t\ttemplate?.category ?? '',\n\t\t\t\t\t\t\t  )} • ${(template as WhatsAppTemplate)?.templateCategory ?? ''}`\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\tonBackPress={() => {\n\t\t\t\t\t\tif (templateAnalytics?.show) {\n\t\t\t\t\t\t\tsetShowWarningModal(true);\n\t\t\t\t\t\t\tsetOpenMapper(false);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonBackPress?.();\n\t\t\t\t\t}}\n\t\t\t\t\tmodalHeaderStyles={{\n\t\t\t\t\t\tborderBottom: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TemplateSelectModalContent\n\t\t\t\t\t\tvariableListFromProps={variableListFromProps}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\tvariableListForImage={\n\t\t\t\t\t\t\tvariableListForImage && variableListForImage?.length > 0\n\t\t\t\t\t\t\t\t? variableListForImage\n\t\t\t\t\t\t\t\t: variableList\n\t\t\t\t\t\t}\n\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\tsetFileName={(file) => {\n\t\t\t\t\t\t\tsetFileName?.(file);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t/>\n\t\t\t\t\t{onTemplateSelect ? (\n\t\t\t\t\t\t<Footer\n\t\t\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel ?? false}\n\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\tfooterButtonText={footerButtonText}\n\t\t\t\t\t\t\tfooterInfoText={footerInfoText}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</TemplateModalContext.Provider>\n\t);\n};\n"],"names":["TemplateContextMapper","props","selectedTemplate","closeDialog","showVariableMapping","channel","htmlContent","templateVariables","onTemplateSelect","globalPlaceholders","showOnlyContent","whatsappSpecificPickerMeta","zIndex","showVariableModal","variableListFromProps","discountCode","setDiscountCode","onBackPress","enabledCustomText","variableListForImage","showSampleValues","disableEditVariable","pod","extras","pickerConf","selectedCarouselProducts","disableEditExpiry","cardWidth","onDeleteSelectedProducts","fileName","setFileName","hideDeviceContainerInPreview","maxCharLimit","onDefaultVariableSelect","skipDefaultVariableContent","disableDatePicker","disableCopyCode","initialExpiryDateTime","showDiscountCodeExpiryInfo","footerButtonText","footerInfoText","templateAnalytics","useEffect","setDisplayContent","cardIndex","determineCardIndex","isWhatsappCarousel","isItCarousal","isProductCarouselType","device","setDevice","useState","CHANNEL_TYPE","showVariablePicker","setShowVariablePicker","display_content","isError","setIsError","errorIndexes","setErrorIndexes","templateErrorIndexes","setTemplateErrorIndexes","template","setTemplate","cardImages","setCardImages","variableCallback","setVariableCallback","hasUpdateOriginalTemplate","setHasUpdateOriginalTemplate","originalVariableList","setOriginalVariableList","templateSelectionTriggered","setTemplateSelectionTriggered","selectedCarouselIndex","setSelectedCarouselIndex","carouselProducts","setCarouselProducts","variableList","setVariableList","sliderRef","useRef","isCarouselHovered","setIsCarouselHovered","hideCrossButton","setHideCrossButton","hideFooterButton","setHideFooterButton","showWarningModal","setShowWarningModal","openMapper","setOpenMapper","ctaOptionsErrors","setCtaOptionsErrors","carouselBodyError","setCarouselBodyError","cards","images","card","comp","getProductCarouselBodyError","carouselTemplate","products","idx","cardBodyText","c","bodyMapping","PRODUCT_VAR_TO_FIELD","product","resolvedText","i","varPlaceholder","productField","value","onSelect","POD","bodyErr","error","globalNormalizedPlaceholders","useMemo","convertPlaceholdersToBikDropdown","cloneDeep","TEMPLATE_QUALITY","jsx","TemplateAnalyticsComponent","StringUtils","TemplateModalContext","TemplateSelectModalContent","jsxs","StyledModal","isRCSChannel","COLORS","file","Footer","Fragment"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/context/templateModalContext.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../template-preview/models/Channels.js"),t=e.createContext({hideFooterButton:!1,setHideFooterButton:()=>{},hideCrossButton:!1,setHideCrossButton:()=>{},variableList:[],setVariableList:()=>{},variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:a.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1,disableDatePicker:!1,showDiscountCodeExpiryInfo:!1,cardIndex:-1}),l=()=>e.useContext(t);exports.TemplateModalContext=t;exports.useTemplateModalContext=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),l=require("../../template-preview/models/Channels.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=o(t),a=s.default.createContext({hideFooterButton:!1,setHideFooterButton:()=>{},hideCrossButton:!1,setHideCrossButton:()=>{},variableList:[],setVariableList:()=>{},variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:l.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1,disableDatePicker:!1,showDiscountCodeExpiryInfo:!1,cardIndex:-1}),i=()=>t.useContext(a);exports.TemplateModalContext=a;exports.useTemplateModalContext=i;
 //# sourceMappingURL=templateModalContext.js.map

package/dist/cjs/components/template-context-mapper/context/templateModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"templateModalContext.js","sources":["../../../../../src/components/template-context-mapper/context/templateModalContext.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport type { VariableV3 } from '@src/helpers';\nimport React, { LegacyRef, useContext } from 'react';\nimport Slider from 'react-slick';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { globalNormalizedPlaceholdersType } from '@src/components/template-preview/models/TemplateMeta';\nimport type {\n\tAllTemplateTypes,\n\tAllTemplateVariables,\n} from '@src/components/template-preview/models/types';\nimport type { ExtrasWhatsapp } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { CarouselProduct } from '../modalElements/modal';\n\nexport type DEVICE_TYPES = 'desktop' | 'mobile';\n\nexport const TemplateModalContext = React.createContext<{\n\tshowDiscountCodeExpiryInfo?: boolean;\n\tinitialExpiryDateTime?: string;\n\tdisableDatePicker?: boolean;\n\tdisableCopyCode?: boolean;\n\thideFooterButton: boolean;\n\tsetHideFooterButton: React.Dispatch<React.SetStateAction<boolean>>;\n\thideCrossButton: boolean;\n\tsetHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;\n\tvariableList: VariableListInterfaceV2[] | undefined;\n\tsetVariableList: React.Dispatch<\n\t\tReact.SetStateAction<VariableListInterfaceV2[] | undefined>\n\t>;\n\tvariableCallback: any;\n\tsetVariableCallback: any;\n\tshowVariablePicker: boolean;\n\tsetShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;\n\tdevice: DEVICE_TYPES;\n\tsetDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>>;\n\n\tdisplay_content: string | null;\n\tsetDisplayContent?: React.Dispatch<React.SetStateAction<string | null>>;\n\toriginalVariableList: AllTemplateVariables;\n\tsetOriginalVariableList?: React.Dispatch<\n\t\tReact.SetStateAction<AllTemplateVariables>\n\t>;\n\tchannel: CHANNEL_TYPE;\n\tsetChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>>;\n\ttemplate: AllTemplateTypes;\n\tsetTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>>;\n\tisError: boolean;\n\tsetIsError?: React.Dispatch<React.SetStateAction<boolean>>;\n\tglobalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[];\n\ttemplateSelectionTriggered: boolean;\n\tsetTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>>;\n\tenabledCustomText?: boolean;\n\tdisableEditVariable?: boolean;\n\tpod?: string;\n\textras?: ExtrasWhatsapp;\n\tisWhatsappCarousel?: boolean;\n\tselectedCarouselIndex?: number;\n\tsetSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>>;\n\tisProductCarouselType?: boolean;\n\tcardCount?: number;\n\terrorIndexes?: number[];\n\tsetErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>>;\n\tpickerConf?: {\n\t\tsearchInCollection: any;\n\t\tsearchProducts: any;\n\t\tfetchCollections: any;\n\t\tfetchProducts: any;\n\t\tstoreId: string;\n\t\tappType?: ApplicationType;\n\t};\n\tcarouselProducts?: CarouselProduct[];\n\tsetCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>>;\n\tdisableEditExpiry?: boolean;\n\tcardWidth?: number;\n\tcardImages?: string[];\n\tonDeleteSelectedProducts?: () => void;\n\thideDeviceContainerInPreview?: boolean;\n\ttemplateErrorIndexes?: { body?: number[]; buttons?: number[] };\n\tsliderRef?: LegacyRef<Slider> | undefined;\n\tisCarouselHovered?: boolean;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tmaxCharLimit?: number;\n\tctaOptionsErrors?: { [key: string]: string };\n\tsetCtaOptionsErrors?: React.Dispatch<\n\t\tReact.SetStateAction<{ [key: string]: string }>\n\t>;\n\tonDefaultVariableSelect?: (variable: VariableV3) => void;\n\tcarouselBodyError?: string;\n\tsetCarouselBodyError?: React.Dispatch<React.SetStateAction<string>>;\n\tcardIndex: number;\n}>({\n\thideFooterButton: false,\n\tsetHideFooterButton: () => {\n\t\t// Do nothing\n\t},\n\thideCrossButton: false,\n\tsetHideCrossButton: () => {\n\t\t// Do nothing\n\t},\n\tvariableList: [],\n\tsetVariableList: () => {\n\t\t// Do nothing\n\t},\n\tvariableCallback: null,\n\tsetVariableCallback: null,\n\tshowVariablePicker: false,\n\tsetShowVariablePicker: () => {\n\t\t// Do nothing\n\t},\n\tdevice: 'desktop',\n\ttemplateSelectionTriggered: false,\n\tdisplay_content: null,\n\toriginalVariableList: [],\n\tchannel: CHANNEL_TYPE.EMAIL,\n\ttemplate: null,\n\tisError: false,\n\tenabledCustomText: false,\n\tdisableEditVariable: false,\n\tdisableEditExpiry: false,\n\tdisableDatePicker: false,\n\tshowDiscountCodeExpiryInfo: false,\n\tcardIndex: -1,\n});\n\nexport const useTemplateModalContext = () => useContext(TemplateModalContext);\n"],"names":["TemplateModalContext","React","CHANNEL_TYPE","useTemplateModalContext","useContext"],"mappings":"gKAgBaA,EAAuBC,EAAM,cA0EvC,CACF,iBAAkB,GAClB,oBAAqB,IAAM,CAE3B,EACA,gBAAiB,GACjB,mBAAoB,IAAM,CAE1B,EACA,aAAc,CAAA,EACd,gBAAiB,IAAM,CAEvB,EACA,iBAAkB,KAClB,oBAAqB,KACrB,mBAAoB,GACpB,sBAAuB,IAAM,CAE7B,EACA,OAAQ,UACR,2BAA4B,GAC5B,gBAAiB,KACjB,qBAAsB,CAAA,EACtB,QAASC,EAAAA,aAAa,MACtB,SAAU,KACV,QAAS,GACT,kBAAmB,GACnB,oBAAqB,GACrB,kBAAmB,GACnB,kBAAmB,GACnB,2BAA4B,GAC5B,UAAW,EACZ,CAAC,EAEYC,EAA0B,IAAMC,EAAAA,WAAWJ,CAAoB"}
+{"version":3,"file":"templateModalContext.js","sources":["../../../../../src/components/template-context-mapper/context/templateModalContext.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport type { VariableV3 } from '@src/helpers';\nimport React, { LegacyRef, useContext } from 'react';\nimport Slider from 'react-slick';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { globalNormalizedPlaceholdersType } from '@src/components/template-preview/models/TemplateMeta';\nimport type {\n\tAllTemplateTypes,\n\tAllTemplateVariables,\n} from '@src/components/template-preview/models/types';\nimport type { ExtrasWhatsapp } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { CarouselProduct } from '../modalElements/modal';\n\nexport type DEVICE_TYPES = 'desktop' | 'mobile';\n\nexport const TemplateModalContext = React.createContext<{\n\tshowDiscountCodeExpiryInfo?: boolean;\n\tinitialExpiryDateTime?: string;\n\tdisableDatePicker?: boolean;\n\tdisableCopyCode?: boolean;\n\thideFooterButton: boolean;\n\tsetHideFooterButton: React.Dispatch<React.SetStateAction<boolean>>;\n\thideCrossButton: boolean;\n\tsetHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;\n\tvariableList: VariableListInterfaceV2[] | undefined;\n\tsetVariableList: React.Dispatch<\n\t\tReact.SetStateAction<VariableListInterfaceV2[] | undefined>\n\t>;\n\tvariableCallback: any;\n\tsetVariableCallback: any;\n\tshowVariablePicker: boolean;\n\tsetShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;\n\tdevice: DEVICE_TYPES;\n\tsetDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>>;\n\n\tdisplay_content: string | null;\n\tsetDisplayContent?: React.Dispatch<React.SetStateAction<string | null>>;\n\toriginalVariableList: AllTemplateVariables;\n\tsetOriginalVariableList?: React.Dispatch<\n\t\tReact.SetStateAction<AllTemplateVariables>\n\t>;\n\tchannel: CHANNEL_TYPE;\n\tsetChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>>;\n\ttemplate: AllTemplateTypes;\n\tsetTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>>;\n\tisError: boolean;\n\tsetIsError?: React.Dispatch<React.SetStateAction<boolean>>;\n\tglobalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[];\n\ttemplateSelectionTriggered: boolean;\n\tsetTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>>;\n\tenabledCustomText?: boolean;\n\tdisableEditVariable?: boolean;\n\tpod?: string;\n\textras?: ExtrasWhatsapp;\n\tisWhatsappCarousel?: boolean;\n\tselectedCarouselIndex?: number;\n\tsetSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>>;\n\tisProductCarouselType?: boolean;\n\tcardCount?: number;\n\terrorIndexes?: number[];\n\tsetErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>>;\n\tpickerConf?: {\n\t\tsearchInCollection: any;\n\t\tsearchProducts: any;\n\t\tfetchCollections: any;\n\t\tfetchProducts: any;\n\t\tstoreId: string;\n\t\tappType?: ApplicationType;\n\t};\n\tcarouselProducts?: CarouselProduct[];\n\tsetCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>>;\n\tdisableEditExpiry?: boolean;\n\tcardWidth?: number;\n\tcardImages?: string[];\n\tonDeleteSelectedProducts?: () => void;\n\thideDeviceContainerInPreview?: boolean;\n\ttemplateErrorIndexes?: { body?: number[]; buttons?: number[] };\n\tsliderRef?: LegacyRef<Slider> | undefined;\n\tisCarouselHovered?: boolean;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tmaxCharLimit?: number;\n\tctaOptionsErrors?: { [key: string]: string };\n\tsetCtaOptionsErrors?: React.Dispatch<\n\t\tReact.SetStateAction<{ [key: string]: string }>\n\t>;\n\tonDefaultVariableSelect?: (variable: VariableV3) => void;\n\tcarouselBodyError?: string;\n\tsetCarouselBodyError?: React.Dispatch<React.SetStateAction<string>>;\n\tcardIndex: number;\n}>({\n\thideFooterButton: false,\n\tsetHideFooterButton: () => {\n\t\t// Do nothing\n\t},\n\thideCrossButton: false,\n\tsetHideCrossButton: () => {\n\t\t// Do nothing\n\t},\n\tvariableList: [],\n\tsetVariableList: () => {\n\t\t// Do nothing\n\t},\n\tvariableCallback: null,\n\tsetVariableCallback: null,\n\tshowVariablePicker: false,\n\tsetShowVariablePicker: () => {\n\t\t// Do nothing\n\t},\n\tdevice: 'desktop',\n\ttemplateSelectionTriggered: false,\n\tdisplay_content: null,\n\toriginalVariableList: [],\n\tchannel: CHANNEL_TYPE.EMAIL,\n\ttemplate: null,\n\tisError: false,\n\tenabledCustomText: false,\n\tdisableEditVariable: false,\n\tdisableEditExpiry: false,\n\tdisableDatePicker: false,\n\tshowDiscountCodeExpiryInfo: false,\n\tcardIndex: -1,\n});\n\nexport const useTemplateModalContext = () => useContext(TemplateModalContext);\n"],"names":["TemplateModalContext","React","CHANNEL_TYPE","useTemplateModalContext","useContext"],"mappings":"+NAgBaA,EAAuBC,EAAAA,QAAM,cA0EvC,CACF,iBAAkB,GAClB,oBAAqB,IAAM,CAE3B,EACA,gBAAiB,GACjB,mBAAoB,IAAM,CAE1B,EACA,aAAc,CAAA,EACd,gBAAiB,IAAM,CAEvB,EACA,iBAAkB,KAClB,oBAAqB,KACrB,mBAAoB,GACpB,sBAAuB,IAAM,CAE7B,EACA,OAAQ,UACR,2BAA4B,GAC5B,gBAAiB,KACjB,qBAAsB,CAAA,EACtB,QAASC,EAAAA,aAAa,MACtB,SAAU,KACV,QAAS,GACT,kBAAmB,GACnB,oBAAqB,GACrB,kBAAmB,GACnB,kBAAmB,GACnB,2BAA4B,GAC5B,UAAW,EACZ,CAAC,EAEYC,EAA0B,IAAMC,EAAAA,WAAWJ,CAAoB"}

package/dist/cjs/components/template-context-mapper/modalElements/Body.js

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),k=require("lodash/cloneDeep"),q=require("react"),x=require("styled-components"),F=require("../../carousel-preview/CarouselPreview.js"),U=require("./EditWhatsAppCarouselTemplateV2.js"),G=require("../../template-preview/TemplatePreview.js"),o=require("../../template-preview/models/Channels.js"),K=require("../../TypographyStyle.js"),z=require("../../variable-picker-v3/VariablePicker.js"),l=require("../../../constants/Theme.js"),J=require("../context/templateModalContext.js"),Q=require("../utils/constants.js"),X=require("../utils/getVariableNameEmail.js"),W=require("../utils/highlightFor.js"),Z=require("./DesktopPreview.js"),ee=require("./EditWebpushTemplate.js"),te=require("./EditWhatsAppTemplateV2.js"),ie=require("./MobilePreview.js"),oe=require("./VariableConnectorsPanel.js"),ae=require("../../variable-picker-v3/model.js"),ne=x.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),U=require("lodash/cloneDeep"),k=require("react"),G=require("styled-components"),K=require("../../carousel-preview/CarouselPreview.js"),z=require("./EditWhatsAppCarouselTemplateV2.js"),J=require("../../template-preview/TemplatePreview.js"),a=require("../../template-preview/models/Channels.js"),Q=require("../../TypographyStyle.js"),X=require("../../variable-picker-v3/VariablePicker.js"),s=require("../../../constants/Theme.js"),Z=require("../context/templateModalContext.js"),ee=require("../utils/constants.js"),te=require("../utils/getVariableNameEmail.js"),q=require("../utils/highlightFor.js"),ie=require("./DesktopPreview.js"),ae=require("./EditWebpushTemplate.js"),oe=require("./EditWhatsAppTemplateV2.js"),ne=require("./MobilePreview.js"),re=require("./VariableConnectorsPanel.js"),le=require("../../variable-picker-v3/model.js"),V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=V(U),x=V(G),se=x.default.div`
 	display: flex;
 	//	height: 100%;
-`,j=x.div`
+`,W=x.default.div`
 	max-width: 450px;
-	max-width: ${t=>t.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===a.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${t=>t.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===a.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${l.COLORS.stroke.primary} 1px solid;
-	border-top: ${t=>t.isWhatsappCarousel?`${l.COLORS.stroke.primary} 1px solid`:void 0};
-	${t=>!t.showVariableMapping&&"width: 340px; height: 500px"};
-`,re=x.div`
-	padding: ${t=>t.isWhatsappCarousel?void 0:t.showOnlyContent?"16px 14px":"16px 32px"};
+	border-left: ${s.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
+	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
+`,ce=x.default.div`
+	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
-	height: ${t=>t.isWhatsappCarousel||t.hideDeviceContainerInPreview?"500px":"475px"};
+	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${t=>t.hideDeviceContainerInPreview&&t.channel===o.CHANNEL_TYPE.WHATSAPP?`url(${Q.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${t=>t.hideDeviceContainerInPreview&&(t.channel===o.CHANNEL_TYPE.WHATSAPP||t.channel===o.CHANNEL_TYPE.RCS)?"flex":"initial"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===a.CHANNEL_TYPE.WHATSAPP?`url(${ee.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>e.hideDeviceContainerInPreview&&(e.channel===a.CHANNEL_TYPE.WHATSAPP||e.channel===a.CHANNEL_TYPE.RCS)?"flex":"initial"};
 	align-items: flex-start;
-`,se=t=>{const{showVariableMapping:P,showOnlyContent:V,whatsappSpecificPickerMeta:C,showVariableModal:c,discountCode:E,setDiscountCode:f,variableListForImage:T,showSampleValues:d,variableListFromProps:w,fileName:M,setFileName:R,skipDefaultVariableContent:g}=t,m=q.useRef(),A=q.useRef(),{variableList:Y,setVariableList:N,variableCallback:I,showVariablePicker:b,setShowVariablePicker:v,device:s,display_content:y,channel:e,template:n,setTemplate:L,isWhatsappCarousel:p,isProductCarouselType:S,hideDeviceContainerInPreview:O,onDefaultVariableSelect:B}=J.useTemplateModalContext();function D(a){const r=document?.getElementById(s==="mobile"?"template_html_mobile":"template_html_desktop"),h=X.getVariableNameForEmailByIndex(a+1),H=e===o.CHANNEL_TYPE.EMAIL?r?.contentWindow?.document.getElementById(h):document.getElementById(h),u=$(H),_=H?.offsetLeft;s==="desktop"?u&&m.current&&(r?.contentWindow?.scrollTo(_??0,u),W.highlightFor(h,l.COLORS.background.warning.light,2,e,s)):u&&A.current&&(r?.contentWindow?.scrollTo(_??0,u),W.highlightFor(h,l.COLORS.background.warning.light,2,e,s))}const $=a=>{let r=0;for(;a;)r+=a.offsetTop,a=a.offsetParent;return r};return i.jsxs(ne,{children:[i.jsx(re,{showOnlyContent:V,showVariableMapping:P,isWhatsappCarousel:p,hideDeviceContainerInPreview:O,channel:e,skipDefaultVariableContent:g,children:s==="mobile"?i.jsx(ie.default,{ref:A,display_content:y??"",channel:e,template:n,showSampleValues:d}):(e===o.CHANNEL_TYPE.WHATSAPP||e===o.CHANNEL_TYPE.RCS)&&p?i.jsx(F.CarouselPreview,{ref:m,channel:e,template:n,showSampleValues:d,isPreview:!1,showArrows:!0}):e===o.CHANNEL_TYPE.WEBPUSH?i.jsx(G.TemplatePreview,{showSampleValues:d,channel:e,hideHeader:!0,template:n}):e!==o.CHANNEL_TYPE.MESSAGE?i.jsx(Z.default,{ref:m,channel:e,display_content:y??"",showSampleValues:d}):i.jsx(i.Fragment,{})}),(S||P)&&i.jsxs(j,{channel:e,isWhatsappCarousel:p,showVariableMapping:!0,children:[i.jsx("div",{style:{height:"100%",width:e==="whatsapp"?428:400,display:b?"block":"none"},children:i.jsx(z.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{N(k(w)),v(!1)},onSelect:a=>{I(a),N(k(w)),v(!1)},type:ae.PickerType.EMBEDDED,data:Y??[],onDefaultVariableSelect:B,skipDefaultVariableContent:g},Math.random())}),i.jsx("div",{style:{padding:"16px 14px",width:e==="whatsapp"||e=="webpush"||e=="rcs"?428:400,display:b?"none":"block"},children:e!==o.CHANNEL_TYPE.WHATSAPP&&e!==o.CHANNEL_TYPE?.RCS?e==o.CHANNEL_TYPE.WEBPUSH?i.jsx(ee.default,{whatsappSpecificPickerMeta:C,template:n,onTemplateChange:a=>{L?.(a)},showVariableModal:c}):i.jsx(oe.default,{onFocus:e===o.CHANNEL_TYPE.EMAIL?D:void 0,showVariableModal:c,discountCode:E,setDiscountCode:f}):(e===o.CHANNEL_TYPE.WHATSAPP||e===o.CHANNEL_TYPE.RCS)&&p?i.jsx(U.default,{whatsappSpecificPickerMeta:C,template:n,showVariableModal:c,variableListForImage:T,discountCode:E,setDiscountCode:f}):i.jsx(te.default,{whatsappSpecificPickerMeta:C,template:n,onTemplateChange:a=>{L?.(a)},showVariableModal:c,variableListForImage:T,discountCode:E,setDiscountCode:f,fileName:M,setFileName:R})})]}),[o.CHANNEL_TYPE.WHATSAPP,o.CHANNEL_TYPE.SMS].includes(e)&&!P&&!S&&i.jsx(j,{children:i.jsx(K.BodySecondary,{color:l.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"})})]})};exports.default=se;
+`,de=e=>{const{showVariableMapping:P,showOnlyContent:M,whatsappSpecificPickerMeta:C,showVariableModal:c,discountCode:f,setDiscountCode:E,variableListForImage:T,showSampleValues:d,variableListFromProps:w,fileName:R,setFileName:Y,skipDefaultVariableContent:g}=e,m=k.useRef(),A=k.useRef(),{variableList:I,setVariableList:N,variableCallback:D,showVariablePicker:b,setShowVariablePicker:v,device:l,display_content:y,channel:t,template:n,setTemplate:_,isWhatsappCarousel:u,isProductCarouselType:L,hideDeviceContainerInPreview:O,onDefaultVariableSelect:B}=Z.useTemplateModalContext();function $(o){const r=document?.getElementById(l==="mobile"?"template_html_mobile":"template_html_desktop"),p=te.getVariableNameForEmailByIndex(o+1),S=t===a.CHANNEL_TYPE.EMAIL?r?.contentWindow?.document.getElementById(p):document.getElementById(p),h=F(S),H=S?.offsetLeft;l==="desktop"?h&&m.current&&(r?.contentWindow?.scrollTo(H??0,h),q.highlightFor(p,s.COLORS.background.warning.light,2,t,l)):h&&A.current&&(r?.contentWindow?.scrollTo(H??0,h),q.highlightFor(p,s.COLORS.background.warning.light,2,t,l))}const F=o=>{let r=0;for(;o;)r+=o.offsetTop,o=o.offsetParent;return r};return i.jsxs(se,{children:[i.jsx(ce,{showOnlyContent:M,showVariableMapping:P,isWhatsappCarousel:u,hideDeviceContainerInPreview:O,channel:t,skipDefaultVariableContent:g,children:l==="mobile"?i.jsx(ne.default,{ref:A,display_content:y??"",channel:t,template:n,showSampleValues:d}):(t===a.CHANNEL_TYPE.WHATSAPP||t===a.CHANNEL_TYPE.RCS)&&u?i.jsx(K.CarouselPreview,{ref:m,channel:t,template:n,showSampleValues:d,isPreview:!1,showArrows:!0}):t===a.CHANNEL_TYPE.WEBPUSH?i.jsx(J.TemplatePreview,{showSampleValues:d,channel:t,hideHeader:!0,template:n}):t!==a.CHANNEL_TYPE.MESSAGE?i.jsx(ie.default,{ref:m,channel:t,display_content:y??"",showSampleValues:d}):i.jsx(i.Fragment,{})}),(L||P)&&i.jsxs(W,{channel:t,isWhatsappCarousel:u,showVariableMapping:!0,children:[i.jsx("div",{style:{height:"100%",width:t==="whatsapp"?428:400,display:b?"block":"none"},children:i.jsx(X.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{N(j.default(w)),v(!1)},onSelect:o=>{D(o),N(j.default(w)),v(!1)},type:le.PickerType.EMBEDDED,data:I??[],onDefaultVariableSelect:B,skipDefaultVariableContent:g},Math.random())}),i.jsx("div",{style:{padding:"16px 14px",width:t==="whatsapp"||t=="webpush"||t=="rcs"?428:400,display:b?"none":"block"},children:t!==a.CHANNEL_TYPE.WHATSAPP&&t!==a.CHANNEL_TYPE?.RCS?t==a.CHANNEL_TYPE.WEBPUSH?i.jsx(ae.default,{whatsappSpecificPickerMeta:C,template:n,onTemplateChange:o=>{_?.(o)},showVariableModal:c}):i.jsx(re.default,{onFocus:t===a.CHANNEL_TYPE.EMAIL?$:void 0,showVariableModal:c,discountCode:f,setDiscountCode:E}):(t===a.CHANNEL_TYPE.WHATSAPP||t===a.CHANNEL_TYPE.RCS)&&u?i.jsx(z.default,{whatsappSpecificPickerMeta:C,template:n,showVariableModal:c,variableListForImage:T,discountCode:f,setDiscountCode:E}):i.jsx(oe.default,{whatsappSpecificPickerMeta:C,template:n,onTemplateChange:o=>{_?.(o)},showVariableModal:c,variableListForImage:T,discountCode:f,setDiscountCode:E,fileName:R,setFileName:Y})})]}),[a.CHANNEL_TYPE.WHATSAPP,a.CHANNEL_TYPE.SMS].includes(t)&&!P&&!L&&i.jsx(W,{children:i.jsx(Q.BodySecondary,{color:s.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"})})]})};exports.default=de;
 //# sourceMappingURL=Body.js.map

package/dist/cjs/components/template-context-mapper/modalElements/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Body.tsx"],"sourcesContent":["import { PickerType, type VariableV3 } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CarouselPreview } from '@src/components/carousel-preview/CarouselPreview';\nimport EditWhatsAppCarouselTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { AllTemplateTypes } from '@src/components/template-preview/models/types';\nimport type { WebpushTemplateType } from '@src/components/template-preview/models/WebpushTemplate';\nimport type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport type {\n\tWhatsAppPickerMeta,\n\tWhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { VariablePicker } from '@src/components/variable-picker-v3/VariablePicker';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { BACKGROUND_PREVIEW_IMAGE } from '../utils/constants';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { highlightFor } from '../utils/highlightFor';\nimport DesktopPreview from './DesktopPreview';\nimport EditWebpushTemplate from './EditWebpushTemplate';\nimport EditWhatsAppTemplateV2 from './EditWhatsAppTemplateV2';\nimport MobilePreview from './MobilePreview';\nimport VariableConnectorsPanel from './VariableConnectorsPanel';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\t//\theight: 100%;\n`;\n\nconst RightPanelContainer = styled.div<{\n\tchannel?: CHANNEL_TYPE;\n\tisWhatsappCarousel?: boolean;\n\tshowVariableMapping?: boolean;\n}>`\n\tmax-width: 450px;\n\tmax-width: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.EMAIL ? '400px' : '450px'};\n\n\theight: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP ? '500px' : '475px'};\n\toverflow-y: auto;\n\tpadding-bottom: 24px;\n\tborder-left: ${COLORS.stroke.primary} 1px solid;\n\tborder-top: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? `${COLORS.stroke.primary} 1px solid`\n\t\t\t: undefined};\n\t${(props) => !props.showVariableMapping && 'width: 340px; height: 500px'};\n`;\n\nconst LeftPanelContainer = styled.div<{\n\tshowOnlyContent?: boolean;\n\tshowVariableMapping?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thideDeviceContainerInPreview?: boolean;\n\tchannel?: CHANNEL_TYPE;\n\tskipDefaultVariableContent?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? undefined\n\t\t\t: props.showOnlyContent\n\t\t\t? '16px 14px'\n\t\t\t: '16px 32px'};\n\tflex: 1;\n\theight: ${(props) =>\n\t\tprops.isWhatsappCarousel || props.hideDeviceContainerInPreview\n\t\t\t? '500px'\n\t\t\t: '475px'};\n\toverflow-y: auto;\n\tbackground-image: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP\n\t\t\t? `url(${BACKGROUND_PREVIEW_IMAGE});`\n\t\t\t: 'none'};\n\tdisplay: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\t(props.channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\tprops.channel === CHANNEL_TYPE.RCS)\n\t\t\t? 'flex'\n\t\t\t: 'initial'};\n\talign-items: flex-start;\n`;\n\nexport interface BodyProps {\n\tshowVariableMapping: boolean;\n\tshowOnlyContent?: boolean;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tshowSampleValues?: boolean;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\tvariableListFromProps?: VariableListInterfaceV2[];\n\tskipDefaultVariableContent?: boolean;\n}\n\nconst Body = (props: BodyProps) => {\n\tconst {\n\t\tshowVariableMapping,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tshowVariableModal,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tvariableListFromProps,\n\t\tfileName,\n\t\tsetFileName,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\tconst desktopPreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\tconst mobilePreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tvariableCallback,\n\t\tshowVariablePicker,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tdisplay_content,\n\t\tchannel,\n\t\ttemplate,\n\t\tsetTemplate,\n\t\tisWhatsappCarousel,\n\t\tisProductCarouselType,\n\t\thideDeviceContainerInPreview,\n\t\tonDefaultVariableSelect,\n\t} = useTemplateModalContext();\n\t/**\n\t * UI handler to add scroll and highlighter whenever any variable connector in focused\n\t * @param variableNumber variable index\n\t */\n\tfunction handleVariableConnectorClickUI(variableNumber: number) {\n\t\tconst iframe = document?.getElementById(\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t) as HTMLIFrameElement;\n\n\t\tconst variableId = getVariableNameForEmailByIndex(variableNumber + 1);\n\t\tconst targetElement =\n\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t: document.getElementById(variableId);\n\t\tconst toTopPos = getOffsetTop(targetElement!);\n\n\t\tconst toLeftPos = targetElement?.offsetLeft;\n\n\t\tif (device === 'desktop') {\n\t\t\tif (toTopPos && desktopPreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// desktopPreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (toTopPos && mobilePreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// mobilePreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos - 253);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getOffsetTop = (element: HTMLElement) => {\n\t\tlet offsetTop = 0;\n\n\t\twhile (element) {\n\t\t\toffsetTop += element.offsetTop;\n\t\t\telement = element.offsetParent as HTMLElement;\n\t\t}\n\t\treturn offsetTop;\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<LeftPanelContainer\n\t\t\t\tshowOnlyContent={showOnlyContent}\n\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\thideDeviceContainerInPreview={hideDeviceContainerInPreview}\n\t\t\t\tchannel={channel}\n\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t>\n\t\t\t\t{device === 'mobile' ? (\n\t\t\t\t\t<MobilePreview\n\t\t\t\t\t\tref={mobilePreviewRef}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t<CarouselPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tisPreview={false}\n\t\t\t\t\t\tshowArrows={true}\n\t\t\t\t\t/>\n\t\t\t\t) : channel === CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t/>\n\t\t\t\t) : channel !== CHANNEL_TYPE.MESSAGE ? (\n\t\t\t\t\t<DesktopPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</LeftPanelContainer>\n\t\t\t{(isProductCarouselType || showVariableMapping) && (\n\t\t\t\t<RightPanelContainer\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tshowVariableMapping={true}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\twidth: channel === 'whatsapp' ? 428 : 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'block' : 'none',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\tkey={Math.random()}\n\t\t\t\t\t\t\thideHeaderCross\n\t\t\t\t\t\t\tshowHeader\n\t\t\t\t\t\t\tshowBackButton\n\t\t\t\t\t\t\tonBackButtonClick={() => {\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\t\tvariableCallback(variable);\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\tdata={variableList ?? []}\n\t\t\t\t\t\t\tonDefaultVariableSelect={onDefaultVariableSelect}\n\t\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '16px 14px',\n\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\tchannel === 'whatsapp' ||\n\t\t\t\t\t\t\t\tchannel == 'webpush' ||\n\t\t\t\t\t\t\t\tchannel == 'rcs'\n\t\t\t\t\t\t\t\t\t? 428\n\t\t\t\t\t\t\t\t\t: 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'none' : 'block', //cannot unmount the component as it will lose the state\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{channel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE?.RCS ? (\n\t\t\t\t\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t\t\t\t<EditWebpushTemplate\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<VariableConnectorsPanel\n\t\t\t\t\t\t\t\t\tonFocus={\n\t\t\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t\t\t\t\t\t\t? handleVariableConnectorClickUI\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t\t\t<EditWhatsAppCarouselTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\t\t\tsetFileName={setFileName}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</RightPanelContainer>\n\t\t\t)}\n\t\t\t{[CHANNEL_TYPE.WHATSAPP, CHANNEL_TYPE.SMS].includes(channel) &&\n\t\t\t\t!showVariableMapping &&\n\t\t\t\t!isProductCarouselType && (\n\t\t\t\t\t<RightPanelContainer>\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tstyle={{ fontStyle: 'italic' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tClick on ‘Select template’ below to use it\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</RightPanelContainer>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default Body;\n"],"names":["Container","styled","RightPanelContainer","props","CHANNEL_TYPE","COLORS","LeftPanelContainer","BACKGROUND_PREVIEW_IMAGE","Body","showVariableMapping","showOnlyContent","whatsappSpecificPickerMeta","showVariableModal","discountCode","setDiscountCode","variableListForImage","showSampleValues","variableListFromProps","fileName","setFileName","skipDefaultVariableContent","desktopPreviewRef","useRef","mobilePreviewRef","variableList","setVariableList","variableCallback","showVariablePicker","setShowVariablePicker","device","display_content","channel","template","setTemplate","isWhatsappCarousel","isProductCarouselType","hideDeviceContainerInPreview","onDefaultVariableSelect","useTemplateModalContext","handleVariableConnectorClickUI","variableNumber","iframe","variableId","getVariableNameForEmailByIndex","targetElement","toTopPos","getOffsetTop","toLeftPos","highlightFor","element","offsetTop","jsx","MobilePreview","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","jsxs","VariablePicker","cloneDeep","variable","PickerType","EditWebpushTemplate","VariableConnectorsPanel","EditWhatsAppCarouselTemplateV2","EditWhatsAppTemplateV2","BodySecondary"],"mappings":"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"}
+{"version":3,"file":"Body.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Body.tsx"],"sourcesContent":["import { PickerType, type VariableV3 } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { CarouselPreview } from '@src/components/carousel-preview/CarouselPreview';\nimport EditWhatsAppCarouselTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type { AllTemplateTypes } from '@src/components/template-preview/models/types';\nimport type { WebpushTemplateType } from '@src/components/template-preview/models/WebpushTemplate';\nimport type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport type {\n\tWhatsAppPickerMeta,\n\tWhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { VariablePicker } from '@src/components/variable-picker-v3/VariablePicker';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { BACKGROUND_PREVIEW_IMAGE } from '../utils/constants';\nimport { getVariableNameForEmailByIndex } from '../utils/getVariableNameEmail';\nimport { highlightFor } from '../utils/highlightFor';\nimport DesktopPreview from './DesktopPreview';\nimport EditWebpushTemplate from './EditWebpushTemplate';\nimport EditWhatsAppTemplateV2 from './EditWhatsAppTemplateV2';\nimport MobilePreview from './MobilePreview';\nimport VariableConnectorsPanel from './VariableConnectorsPanel';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\t//\theight: 100%;\n`;\n\nconst RightPanelContainer = styled.div<{\n\tchannel?: CHANNEL_TYPE;\n\tisWhatsappCarousel?: boolean;\n\tshowVariableMapping?: boolean;\n}>`\n\tmax-width: 450px;\n\tmax-width: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.EMAIL ? '400px' : '450px'};\n\n\theight: ${(props) =>\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP ? '500px' : '475px'};\n\toverflow-y: auto;\n\tpadding-bottom: 24px;\n\tborder-left: ${COLORS.stroke.primary} 1px solid;\n\tborder-top: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? `${COLORS.stroke.primary} 1px solid`\n\t\t\t: undefined};\n\t${(props) => !props.showVariableMapping && 'width: 340px; height: 500px'};\n`;\n\nconst LeftPanelContainer = styled.div<{\n\tshowOnlyContent?: boolean;\n\tshowVariableMapping?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thideDeviceContainerInPreview?: boolean;\n\tchannel?: CHANNEL_TYPE;\n\tskipDefaultVariableContent?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.isWhatsappCarousel\n\t\t\t? undefined\n\t\t\t: props.showOnlyContent\n\t\t\t? '16px 14px'\n\t\t\t: '16px 32px'};\n\tflex: 1;\n\theight: ${(props) =>\n\t\tprops.isWhatsappCarousel || props.hideDeviceContainerInPreview\n\t\t\t? '500px'\n\t\t\t: '475px'};\n\toverflow-y: auto;\n\tbackground-image: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\tprops.channel === CHANNEL_TYPE.WHATSAPP\n\t\t\t? `url(${BACKGROUND_PREVIEW_IMAGE});`\n\t\t\t: 'none'};\n\tdisplay: ${(props) =>\n\t\tprops.hideDeviceContainerInPreview &&\n\t\t(props.channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\tprops.channel === CHANNEL_TYPE.RCS)\n\t\t\t? 'flex'\n\t\t\t: 'initial'};\n\talign-items: flex-start;\n`;\n\nexport interface BodyProps {\n\tshowVariableMapping: boolean;\n\tshowOnlyContent?: boolean;\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tshowSampleValues?: boolean;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n\tvariableListFromProps?: VariableListInterfaceV2[];\n\tskipDefaultVariableContent?: boolean;\n}\n\nconst Body = (props: BodyProps) => {\n\tconst {\n\t\tshowVariableMapping,\n\t\tshowOnlyContent,\n\t\twhatsappSpecificPickerMeta,\n\t\tshowVariableModal,\n\t\tdiscountCode,\n\t\tsetDiscountCode,\n\t\tvariableListForImage,\n\t\tshowSampleValues,\n\t\tvariableListFromProps,\n\t\tfileName,\n\t\tsetFileName,\n\t\tskipDefaultVariableContent,\n\t} = props;\n\tconst desktopPreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\tconst mobilePreviewRef =\n\t\tuseRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;\n\n\tconst {\n\t\tvariableList,\n\t\tsetVariableList,\n\t\tvariableCallback,\n\t\tshowVariablePicker,\n\t\tsetShowVariablePicker,\n\t\tdevice,\n\t\tdisplay_content,\n\t\tchannel,\n\t\ttemplate,\n\t\tsetTemplate,\n\t\tisWhatsappCarousel,\n\t\tisProductCarouselType,\n\t\thideDeviceContainerInPreview,\n\t\tonDefaultVariableSelect,\n\t} = useTemplateModalContext();\n\t/**\n\t * UI handler to add scroll and highlighter whenever any variable connector in focused\n\t * @param variableNumber variable index\n\t */\n\tfunction handleVariableConnectorClickUI(variableNumber: number) {\n\t\tconst iframe = document?.getElementById(\n\t\t\tdevice === 'mobile' ? 'template_html_mobile' : 'template_html_desktop',\n\t\t) as HTMLIFrameElement;\n\n\t\tconst variableId = getVariableNameForEmailByIndex(variableNumber + 1);\n\t\tconst targetElement =\n\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t? iframe?.contentWindow?.document.getElementById(variableId)\n\t\t\t\t: document.getElementById(variableId);\n\t\tconst toTopPos = getOffsetTop(targetElement!);\n\n\t\tconst toLeftPos = targetElement?.offsetLeft;\n\n\t\tif (device === 'desktop') {\n\t\t\tif (toTopPos && desktopPreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// desktopPreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\tif (toTopPos && mobilePreviewRef.current) {\n\t\t\t\tiframe?.contentWindow?.scrollTo(toLeftPos ?? 0, toTopPos);\n\n\t\t\t\t// mobilePreviewRef.current.scrollTo(toLeftPos ?? 0, toTopPos - 253);\n\t\t\t\thighlightFor(\n\t\t\t\t\tvariableId,\n\t\t\t\t\tCOLORS.background.warning.light,\n\t\t\t\t\t2,\n\t\t\t\t\tchannel,\n\t\t\t\t\tdevice,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getOffsetTop = (element: HTMLElement) => {\n\t\tlet offsetTop = 0;\n\n\t\twhile (element) {\n\t\t\toffsetTop += element.offsetTop;\n\t\t\telement = element.offsetParent as HTMLElement;\n\t\t}\n\t\treturn offsetTop;\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<LeftPanelContainer\n\t\t\t\tshowOnlyContent={showOnlyContent}\n\t\t\t\tshowVariableMapping={showVariableMapping}\n\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\thideDeviceContainerInPreview={hideDeviceContainerInPreview}\n\t\t\t\tchannel={channel}\n\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t>\n\t\t\t\t{device === 'mobile' ? (\n\t\t\t\t\t<MobilePreview\n\t\t\t\t\t\tref={mobilePreviewRef}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t<CarouselPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\ttemplate={template}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tisPreview={false}\n\t\t\t\t\t\tshowArrows={true}\n\t\t\t\t\t/>\n\t\t\t\t) : channel === CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t/>\n\t\t\t\t) : channel !== CHANNEL_TYPE.MESSAGE ? (\n\t\t\t\t\t<DesktopPreview\n\t\t\t\t\t\tref={desktopPreviewRef}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tdisplay_content={display_content ?? ''}\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</LeftPanelContainer>\n\t\t\t{(isProductCarouselType || showVariableMapping) && (\n\t\t\t\t<RightPanelContainer\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tshowVariableMapping={true}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\twidth: channel === 'whatsapp' ? 428 : 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'block' : 'none',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\tkey={Math.random()}\n\t\t\t\t\t\t\thideHeaderCross\n\t\t\t\t\t\t\tshowHeader\n\t\t\t\t\t\t\tshowBackButton\n\t\t\t\t\t\t\tonBackButtonClick={() => {\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonSelect={(variable: VariableV3) => {\n\t\t\t\t\t\t\t\tvariableCallback(variable);\n\t\t\t\t\t\t\t\tsetVariableList(cloneDeep(variableListFromProps));\n\t\t\t\t\t\t\t\tsetShowVariablePicker(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\tdata={variableList ?? []}\n\t\t\t\t\t\t\tonDefaultVariableSelect={onDefaultVariableSelect}\n\t\t\t\t\t\t\tskipDefaultVariableContent={skipDefaultVariableContent}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpadding: '16px 14px',\n\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\tchannel === 'whatsapp' ||\n\t\t\t\t\t\t\t\tchannel == 'webpush' ||\n\t\t\t\t\t\t\t\tchannel == 'rcs'\n\t\t\t\t\t\t\t\t\t? 428\n\t\t\t\t\t\t\t\t\t: 400,\n\t\t\t\t\t\t\tdisplay: showVariablePicker ? 'none' : 'block', //cannot unmount the component as it will lose the state\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{channel !== CHANNEL_TYPE.WHATSAPP &&\n\t\t\t\t\t\tchannel !== CHANNEL_TYPE?.RCS ? (\n\t\t\t\t\t\t\tchannel == CHANNEL_TYPE.WEBPUSH ? (\n\t\t\t\t\t\t\t\t<EditWebpushTemplate\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<VariableConnectorsPanel\n\t\t\t\t\t\t\t\t\tonFocus={\n\t\t\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.EMAIL\n\t\t\t\t\t\t\t\t\t\t\t? handleVariableConnectorClickUI\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (channel === CHANNEL_TYPE.WHATSAPP ||\n\t\t\t\t\t\t\t\tchannel === CHANNEL_TYPE.RCS) &&\n\t\t\t\t\t\t  isWhatsappCarousel ? (\n\t\t\t\t\t\t\t<EditWhatsAppCarouselTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\t\t\t\tonTemplateChange={(template: AllTemplateTypes) => {\n\t\t\t\t\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\t\t\t\t\tdiscountCode={discountCode}\n\t\t\t\t\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t\t\t\t\t\tfileName={fileName}\n\t\t\t\t\t\t\t\tsetFileName={setFileName}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</RightPanelContainer>\n\t\t\t)}\n\t\t\t{[CHANNEL_TYPE.WHATSAPP, CHANNEL_TYPE.SMS].includes(channel) &&\n\t\t\t\t!showVariableMapping &&\n\t\t\t\t!isProductCarouselType && (\n\t\t\t\t\t<RightPanelContainer>\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\tstyle={{ fontStyle: 'italic' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tClick on ‘Select template’ below to use it\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</RightPanelContainer>\n\t\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default Body;\n"],"names":["Container","styled","RightPanelContainer","props","CHANNEL_TYPE","COLORS","LeftPanelContainer","BACKGROUND_PREVIEW_IMAGE","Body","showVariableMapping","showOnlyContent","whatsappSpecificPickerMeta","showVariableModal","discountCode","setDiscountCode","variableListForImage","showSampleValues","variableListFromProps","fileName","setFileName","skipDefaultVariableContent","desktopPreviewRef","useRef","mobilePreviewRef","variableList","setVariableList","variableCallback","showVariablePicker","setShowVariablePicker","device","display_content","channel","template","setTemplate","isWhatsappCarousel","isProductCarouselType","hideDeviceContainerInPreview","onDefaultVariableSelect","useTemplateModalContext","handleVariableConnectorClickUI","variableNumber","iframe","variableId","getVariableNameForEmailByIndex","targetElement","toTopPos","getOffsetTop","toLeftPos","highlightFor","element","offsetTop","jsx","MobilePreview","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","jsxs","VariablePicker","cloneDeep","variable","PickerType","EditWebpushTemplate","VariableConnectorsPanel","EditWhatsAppCarouselTemplateV2","EditWhatsAppTemplateV2","BodySecondary"],"mappings":"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"}

package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),i=require("styled-components"),l=require("../../spinner/Spinner.js"),p=require("../../template-preview/TemplatePreview.js"),c=require("../../template-preview/models/Channels.js"),t=require("../../../constants/Theme.js"),u=i.div`
-	background: ${t.COLORS.surface.standard};
-	border: 1px solid ${t.COLORS.stroke.primary};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),p=require("../../spinner/Spinner.js"),c=require("../../template-preview/TemplatePreview.js"),h=require("../../template-preview/models/Channels.js"),i=require("../../../constants/Theme.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},x=a(l),o=a(u),m=o.default.div`
+	background: ${i.COLORS.surface.standard};
+	border: 1px solid ${i.COLORS.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,h=i.div`
+`,f=o.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${t.COLORS.stroke.primary};
-`,r=i.div`
+	border-bottom-color: ${i.COLORS.stroke.primary};
+`,r=o.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,s=a.forwardRef(({display_content:o,showSampleValues:d},n)=>e.jsxs(u,{ref:n,children:[e.jsxs(h,{children:[e.jsx(r,{}),e.jsx(r,{}),e.jsx(r,{})]}),e.jsx("div",{children:o?e.jsx(p.TemplatePreview,{showSampleValues:d,channel:c.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",{style:{padding:20},children:e.jsx(l.Spinner,{size:"small"})})})]}));s.displayName="DesktopPreview";exports.default=s;
+`,d=x.default.forwardRef(({display_content:t,showSampleValues:s},n)=>e.jsxs(m,{ref:n,children:[e.jsxs(f,{children:[e.jsx(r,{}),e.jsx(r,{}),e.jsx(r,{})]}),e.jsx("div",{children:t?e.jsx(c.TemplatePreview,{showSampleValues:s,channel:h.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:t,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",{style:{padding:20},children:e.jsx(p.Spinner,{size:"small"})})})]}));d.displayName="DesktopPreview";exports.default=d;
 //# sourceMappingURL=DesktopPreview.js.map

package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopPreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DesktopPreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { COLORS } from '@src/constants/Theme';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\toverflow-y: auto;\n\t/* max-height: 420px; */\n\tscroll-behavior: smooth;\n\theight: 100%;\n`;\n\nconst PreviewHeader = styled.div`\n\tpadding: 18px 24px 12px;\n\tdisplay: flex;\n\tgap: 4px;\n\tborder-bottom-width: 1px;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n`;\n\nconst Dot = styled.div`\n\twidth: 6px;\n\theight: 6px;\n\tbackground: #d9d9d9;\n\tborder-radius: 3px;\n`;\n\nconst DesktopPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{ display_content: string; channel: CHANNEL_TYPE; showSampleValues?: boolean }\n>(({ display_content, showSampleValues }, previewRef) => {\n\treturn (\n\t\t<Container ref={previewRef}>\n\t\t\t<PreviewHeader>\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t</PreviewHeader>\n\t\t\t<div>\n\t\t\t\t{display_content ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\temailSpecificMeta={{\n\t\t\t\t\t\t\temailDisplayContent: display_content,\n\t\t\t\t\t\t\thideViewButtonForEmail: true,\n\t\t\t\t\t\t\temailHtmlContainerId: 'template_html_desktop',\n\t\t\t\t\t\t\tcontainerStyle: {\n\t\t\t\t\t\t\t\theight: 441,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\thidePointerEvents={true}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div style={{ padding: 20 }}>\n\t\t\t\t\t\t<Spinner size=\"small\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n});\nDesktopPreview.displayName = 'DesktopPreview';\n\nexport default DesktopPreview;\n"],"names":["Container","styled","COLORS","PreviewHeader","Dot","DesktopPreview","React","display_content","showSampleValues","previewRef","jsxs","jsx","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"gYAOMA,EAAYC,EAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCC,EAAgBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKLC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvCE,EAAMH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAObI,EAAiBC,EAAM,WAG3B,CAAC,CAAE,gBAAAC,EAAiB,iBAAAC,CAAA,EAAoBC,IAExCC,EAAAA,KAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,OAACP,EAAA,CACA,SAAA,CAAAQ,EAAAA,IAACP,EAAA,EAAI,QACJA,EAAA,EAAI,QACJA,EAAA,CAAA,CAAI,CAAA,EACN,EACAO,EAAAA,IAAC,OACC,SAAAJ,EACAI,EAAAA,IAACC,EAAAA,gBAAA,CACA,iBAAAJ,EACA,QAASK,EAAAA,aAAa,MACtB,WAAU,GACV,kBAAmB,CAClB,oBAAqBN,EACrB,uBAAwB,GACxB,qBAAsB,wBACtB,eAAgB,CACf,OAAQ,GAAA,EAET,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,kBAAmB,EAAA,CAAA,EAGpBI,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,IAACG,EAAAA,QAAA,CAAQ,KAAK,OAAA,CAAQ,EACvB,CAAA,CAEF,CAAA,EACD,CAED,EACDT,EAAe,YAAc"}
+{"version":3,"file":"DesktopPreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DesktopPreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { TemplatePreview } from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { COLORS } from '@src/constants/Theme';\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\toverflow-y: auto;\n\t/* max-height: 420px; */\n\tscroll-behavior: smooth;\n\theight: 100%;\n`;\n\nconst PreviewHeader = styled.div`\n\tpadding: 18px 24px 12px;\n\tdisplay: flex;\n\tgap: 4px;\n\tborder-bottom-width: 1px;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n`;\n\nconst Dot = styled.div`\n\twidth: 6px;\n\theight: 6px;\n\tbackground: #d9d9d9;\n\tborder-radius: 3px;\n`;\n\nconst DesktopPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{ display_content: string; channel: CHANNEL_TYPE; showSampleValues?: boolean }\n>(({ display_content, showSampleValues }, previewRef) => {\n\treturn (\n\t\t<Container ref={previewRef}>\n\t\t\t<PreviewHeader>\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t\t<Dot />\n\t\t\t</PreviewHeader>\n\t\t\t<div>\n\t\t\t\t{display_content ? (\n\t\t\t\t\t<TemplatePreview\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t\tchannel={CHANNEL_TYPE.EMAIL}\n\t\t\t\t\t\thideHeader\n\t\t\t\t\t\temailSpecificMeta={{\n\t\t\t\t\t\t\temailDisplayContent: display_content,\n\t\t\t\t\t\t\thideViewButtonForEmail: true,\n\t\t\t\t\t\t\temailHtmlContainerId: 'template_html_desktop',\n\t\t\t\t\t\t\tcontainerStyle: {\n\t\t\t\t\t\t\t\theight: 441,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\thidePointerEvents={true}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div style={{ padding: 20 }}>\n\t\t\t\t\t\t<Spinner size=\"small\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n});\nDesktopPreview.displayName = 'DesktopPreview';\n\nexport default DesktopPreview;\n"],"names":["Container","styled","COLORS","PreviewHeader","Dot","DesktopPreview","React","display_content","showSampleValues","previewRef","jsxs","jsx","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"scAOMA,EAAYC,EAAAA,QAAO;AAAA,eACVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCC,EAAgBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKLC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGvCE,EAAMH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAObI,EAAiBC,EAAAA,QAAM,WAG3B,CAAC,CAAE,gBAAAC,EAAiB,iBAAAC,CAAA,EAAoBC,IAExCC,EAAAA,KAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,OAACP,EAAA,CACA,SAAA,CAAAQ,EAAAA,IAACP,EAAA,EAAI,QACJA,EAAA,EAAI,QACJA,EAAA,CAAA,CAAI,CAAA,EACN,EACAO,EAAAA,IAAC,OACC,SAAAJ,EACAI,EAAAA,IAACC,EAAAA,gBAAA,CACA,iBAAAJ,EACA,QAASK,EAAAA,aAAa,MACtB,WAAU,GACV,kBAAmB,CAClB,oBAAqBN,EACrB,uBAAwB,GACxB,qBAAsB,wBACtB,eAAgB,CACf,OAAQ,GAAA,EAET,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,kBAAmB,EAAA,CAAA,EAGpBI,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,IAACG,EAAAA,QAAA,CAAQ,KAAK,OAAA,CAAQ,EACvB,CAAA,CAEF,CAAA,EACD,CAED,EACDT,EAAe,YAAc"}

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../assets/icons/broken_media_image.svg.js"),y=require("../../../assets/icons/document_pdf.svg.js"),f=require("../../../assets/icons/edit.svg.js"),j=require("../../../assets/icons/refresh.svg.js"),C=require("styled-components"),h=require("../../shimmer-image/ShimmerImage.js"),S=require("../../spinner/Spinner.js"),g=require("../../template-preview/models/TemplateMeta.js"),o=require("../../TypographyStyle.js"),O=require("../../../utils/StringUtils.js"),i=require("../../../constants/Theme.js"),E=require("../context/templateModalContext.js"),l=require("./EditMediaV2.style.js"),b="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",L=C.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../assets/icons/broken_media_image.svg.js"),f=require("../../../assets/icons/document_pdf.svg.js"),y=require("../../../assets/icons/edit.svg.js"),j=require("../../../assets/icons/refresh.svg.js"),C=require("styled-components"),u=require("../../shimmer-image/ShimmerImage.js"),S=require("../../spinner/Spinner.js"),g=require("../../template-preview/models/TemplateMeta.js"),s=require("../../TypographyStyle.js"),O=require("../../../utils/StringUtils.js"),r=require("../../../constants/Theme.js"),b=require("../context/templateModalContext.js"),d=require("./EditMediaV2.style.js"),E=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},L=E(C),q="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",R=L.default.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	height: 100%;
-	border-left: 1px solid ${i.COLORS.stroke.primary};
+	border-left: 1px solid ${r.COLORS.stroke.primary};
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-`,q=m=>{const{imageName:r,error:t,isLoading:s,mediaType:n,selectedVariable:d,setOpenEditMedia:a}=m,c=r?.[0].split("/"),u=c?.[c.length-1],{disableEditVariable:p}=E.useTemplateModalContext();return e.jsxs(l.Container,{children:[e.jsx(l.ImageContainer,{error:!!t,onClick:()=>a?.(!0),children:t?e.jsx(x.default,{width:56,height:56}):s?e.jsx(S.Spinner,{size:"small"}):d?e.jsx(h.ShimmerImage,{imageUrl:b,width:56,height:56}):n===g.HEADER_TYPES.IMAGE?e.jsx(h.ShimmerImage,{imageUrl:r?.[0],width:56,height:56}):n===g.HEADER_TYPES.VIDEO?e.jsx("video",{src:r[0],style:{width:56,height:56},children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r[0]})}):e.jsx(y.default,{width:18,height:22,color:i.COLORS.content.placeholder})}),e.jsxs(l.RightComponent,{children:[e.jsx("div",{style:{flex:t?"unset":1},children:r&&t?e.jsx(e.Fragment,{}):s?e.jsx(o.BodyCaption,{style:{marginLeft:8},children:"Your media is getting loaded..."}):e.jsx(o.BodySecondary,{style:{color:i.COLORS.content.primary,marginLeft:8},children:d||O.default.toCapitilize(n?.toLowerCase())||u})}),!!t&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e.jsxs(o.BodySecondary,{style:{color:i.COLORS.content.negative},children:["Error loading this ",n?.toLowerCase(),". Retry"]}),e.jsx(o.Caption,{style:{color:i.COLORS.content.secondary},children:t})]})]}),!p&&!s&&e.jsx(L,{onClick:()=>a?.(!0),onKeyDown:()=>a?.(!0),role:"presentation",children:t?e.jsx(j.default,{color:i.COLORS.content.brand,width:24,height:24}):e.jsx(f.default,{width:24,height:24,color:i.COLORS.content.placeholder})})]})};exports.default=q;
+`,_=t=>{const{imageName:o,error:i,isLoading:a,mediaType:n,selectedVariable:c,setOpenEditMedia:l}=t,h=o?.[0].split("/"),m=h?.[h.length-1],{disableEditVariable:p}=b.useTemplateModalContext();return e.jsxs(d.Container,{children:[e.jsx(d.ImageContainer,{error:!!i,onClick:()=>l?.(!0),children:i?e.jsx(x.default,{width:56,height:56}):a?e.jsx(S.Spinner,{size:"small"}):c?e.jsx(u.ShimmerImage,{imageUrl:q,width:56,height:56}):n===g.HEADER_TYPES.IMAGE?e.jsx(u.ShimmerImage,{imageUrl:o?.[0],width:56,height:56}):n===g.HEADER_TYPES.VIDEO?e.jsx("video",{src:o[0],style:{width:56,height:56},children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:o[0]})}):e.jsx(f.default,{width:18,height:22,color:r.COLORS.content.placeholder})}),e.jsxs(d.RightComponent,{children:[e.jsx("div",{style:{flex:i?"unset":1},children:o&&i?e.jsx(e.Fragment,{}):a?e.jsx(s.BodyCaption,{style:{marginLeft:8},children:"Your media is getting loaded..."}):e.jsx(s.BodySecondary,{style:{color:r.COLORS.content.primary,marginLeft:8},children:c||O.default.toCapitilize(n?.toLowerCase())||m})}),!!i&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e.jsxs(s.BodySecondary,{style:{color:r.COLORS.content.negative},children:["Error loading this ",n?.toLowerCase(),". Retry"]}),e.jsx(s.Caption,{style:{color:r.COLORS.content.secondary},children:i})]})]}),!p&&!a&&e.jsx(R,{onClick:()=>l?.(!0),onKeyDown:()=>l?.(!0),role:"presentation",children:i?e.jsx(j.default,{color:r.COLORS.content.brand,width:24,height:24}):e.jsx(y.default,{width:24,height:24,color:r.COLORS.content.placeholder})})]})};exports.default=_;
 //# sourceMappingURL=EditMediaV2.js.map

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditMediaV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaV2.tsx"],"sourcesContent":["import BrokenMediaImage from '@src/assets/icons/broken_media_image.svg';\nimport DocumentIcon from '@src/assets/icons/document_pdf.svg';\nimport Editicon from '@src/assets/icons/edit.svg';\nimport RefreshIcon from '@src/assets/icons/refresh.svg';\nimport styled from 'styled-components';\nimport { ShimmerImage } from '@src/components/shimmer-image/ShimmerImage';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tCaption,\n} from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { Container, ImageContainer, RightComponent } from './EditMediaV2.style';\n\nconst DUMMY_VARIABLE_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51';\n\nexport interface EditMediaV2Props {\n\timageName: string[];\n\tselectedVariable?: string;\n\terrorSecondaryText?: string;\n\terror?: string;\n\tisLoading?: boolean;\n\tmediaType?: HEADER_TYPES;\n\thandleImageChange?: () => void;\n\tsetOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst EditIconContainer = styled.div`\n\tpadding-left: 14px;\n\tpadding-right: 6px;\n\theight: 100%;\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n`;\n\nconst EditMediaV2 = (props: EditMediaV2Props) => {\n\tconst {\n\t\timageName,\n\t\terror,\n\t\tisLoading,\n\t\tmediaType,\n\t\tselectedVariable,\n\t\tsetOpenEditMedia,\n\t} = props;\n\tconst imageFileFragments = imageName?.[0].split('/');\n\tconst imageFileName = imageFileFragments?.[imageFileFragments.length - 1];\n\n\tconst { disableEditVariable } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container>\n\t\t\t<ImageContainer error={!!error} onClick={() => setOpenEditMedia?.(true)}>\n\t\t\t\t{error ? (\n\t\t\t\t\t<BrokenMediaImage width={56} height={56} />\n\t\t\t\t) : isLoading ? (\n\t\t\t\t\t<Spinner size={'small'} />\n\t\t\t\t) : selectedVariable ? (\n\t\t\t\t\t<ShimmerImage\n\t\t\t\t\t\timageUrl={DUMMY_VARIABLE_IMAGE}\n\t\t\t\t\t\twidth={56}\n\t\t\t\t\t\theight={56}\n\t\t\t\t\t/>\n\t\t\t\t) : mediaType === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t<ShimmerImage imageUrl={imageName?.[0]} width={56} height={56} />\n\t\t\t\t) : mediaType === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t<video src={imageName[0]} style={{ width: 56, height: 56 }}>\n\t\t\t\t\t\t<track default kind=\"captions\" srcLang=\"en\" src={imageName[0]} />\n\t\t\t\t\t</video>\n\t\t\t\t) : (\n\t\t\t\t\t<DocumentIcon\n\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\theight={22}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</ImageContainer>\n\t\t\t<RightComponent>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflex: error ? 'unset' : 1,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{imageName && !!error ? (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t) : isLoading ? (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tYour media is getting loaded...\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{selectedVariable ||\n\t\t\t\t\t\t\t\tStringUtils.toCapitilize(mediaType?.toLowerCase()) ||\n\t\t\t\t\t\t\t\timageFileName}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{!!error && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\tError loading this {mediaType?.toLowerCase()}. Retry\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t<Caption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</RightComponent>\n\t\t\t{!disableEditVariable && !isLoading && (\n\t\t\t\t<EditIconContainer\n\t\t\t\t\tonClick={() => setOpenEditMedia?.(true)}\n\t\t\t\t\tonKeyDown={() => setOpenEditMedia?.(true)}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t>\n\t\t\t\t\t{error ? (\n\t\t\t\t\t\t<RefreshIcon color={COLORS.content.brand} width={24} height={24} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Editicon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</EditIconContainer>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default EditMediaV2;\n"],"names":["DUMMY_VARIABLE_IMAGE","EditIconContainer","styled","COLORS","EditMediaV2","props","imageName","error","isLoading","mediaType","selectedVariable","setOpenEditMedia","imageFileFragments","imageFileName","disableEditVariable","useTemplateModalContext","Container","jsx","ImageContainer","BrokenMediaImage","Spinner","ShimmerImage","HEADER_TYPES","DocumentIcon","RightComponent","Fragment","BodyCaption","BodySecondary","StringUtils","jsxs","Caption","RefreshIcon","Editicon"],"mappings":"quBAkBMA,EACL,+KAaKC,EAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,0BAIPC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMzCC,EAAeC,GAA4B,CAChD,KAAM,CACL,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,iBAAAC,CAAA,EACGN,EACEO,EAAqBN,IAAY,CAAC,EAAE,MAAM,GAAG,EAC7CO,EAAgBD,IAAqBA,EAAmB,OAAS,CAAC,EAElE,CAAE,oBAAAE,CAAA,EAAwBC,0BAAA,EAEhC,cACEC,YAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,MAAO,CAAC,CAACX,EAAO,QAAS,IAAMI,IAAmB,EAAI,EACpE,SAAAJ,EACAU,EAAAA,IAACE,EAAAA,SAAiB,MAAO,GAAI,OAAQ,EAAA,CAAI,EACtCX,QACFY,EAAAA,QAAA,CAAQ,KAAM,OAAA,CAAS,EACrBV,EACHO,EAAAA,IAACI,EAAAA,aAAA,CACA,SAAUrB,EACV,MAAO,GACP,OAAQ,EAAA,CAAA,EAENS,IAAca,eAAa,YAC7BD,eAAA,CAAa,SAAUf,IAAY,CAAC,EAAG,MAAO,GAAI,OAAQ,GAAI,EAC5DG,IAAca,EAAAA,aAAa,MAC9BL,MAAC,SAAM,IAAKX,EAAU,CAAC,EAAG,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EACrD,eAAC,QAAA,CAAM,QAAO,GAAC,KAAK,WAAW,QAAQ,KAAK,IAAKA,EAAU,CAAC,CAAA,CAAG,EAChE,EAEAW,EAAAA,IAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOpB,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGzB,SACCqB,EAAAA,eAAA,CACA,SAAA,CAAAP,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,KAAMV,EAAQ,QAAU,CAAA,EAGxB,YAAeA,EACfU,EAAAA,IAAAQ,WAAA,CAAA,CAAE,EACCjB,EACHS,EAAAA,IAACS,EAAAA,YAAA,CACA,MAAO,CACN,WAAY,CAAA,EAEb,SAAA,iCAAA,CAAA,EAIDT,EAAAA,IAACU,EAAAA,cAAA,CACA,MAAO,CACN,MAAOxB,EAAAA,OAAO,QAAQ,QACtB,WAAY,CAAA,EAGZ,YACAyB,EAAAA,QAAY,aAAanB,GAAW,YAAA,CAAa,GACjDI,CAAA,CAAA,CACF,CAAA,EAID,CAAC,CAACN,GACFsB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,WAAY,EACZ,IAAK,KAAA,EAGN,SAAA,CAAAA,OAACF,EAAAA,eAAc,MAAO,CAAE,MAAOxB,EAAAA,OAAO,QAAQ,UAAY,SAAA,CAAA,sBACrCM,GAAW,YAAA,EAAc,SAAA,EAC9C,EACAQ,EAAAA,IAACa,EAAAA,SAAQ,MAAO,CAAE,MAAO3B,SAAO,QAAQ,SAAA,EACtC,SAAAI,CAAA,CACF,CAAA,CAAA,CAAA,CACD,EAEF,EACC,CAACO,GAAuB,CAACN,GACzBS,EAAAA,IAAChB,EAAA,CACA,QAAS,IAAMU,IAAmB,EAAI,EACtC,UAAW,IAAMA,IAAmB,EAAI,EACxC,KAAK,eAEJ,SAAAJ,EACAU,EAAAA,IAACc,EAAAA,QAAA,CAAY,MAAO5B,EAAAA,OAAO,QAAQ,MAAO,MAAO,GAAI,OAAQ,EAAA,CAAI,EAEjEc,EAAAA,IAACe,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO7B,EAAAA,OAAO,QAAQ,WAAA,CAAA,CACvB,CAAA,CAEF,EAEF,CAEF"}
+{"version":3,"file":"EditMediaV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaV2.tsx"],"sourcesContent":["import BrokenMediaImage from '@src/assets/icons/broken_media_image.svg';\nimport DocumentIcon from '@src/assets/icons/document_pdf.svg';\nimport Editicon from '@src/assets/icons/edit.svg';\nimport RefreshIcon from '@src/assets/icons/refresh.svg';\nimport styled from 'styled-components';\nimport { ShimmerImage } from '@src/components/shimmer-image/ShimmerImage';\nimport { Spinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tCaption,\n} from '@src/components/TypographyStyle';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { Container, ImageContainer, RightComponent } from './EditMediaV2.style';\n\nconst DUMMY_VARIABLE_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51';\n\nexport interface EditMediaV2Props {\n\timageName: string[];\n\tselectedVariable?: string;\n\terrorSecondaryText?: string;\n\terror?: string;\n\tisLoading?: boolean;\n\tmediaType?: HEADER_TYPES;\n\thandleImageChange?: () => void;\n\tsetOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst EditIconContainer = styled.div`\n\tpadding-left: 14px;\n\tpadding-right: 6px;\n\theight: 100%;\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n`;\n\nconst EditMediaV2 = (props: EditMediaV2Props) => {\n\tconst {\n\t\timageName,\n\t\terror,\n\t\tisLoading,\n\t\tmediaType,\n\t\tselectedVariable,\n\t\tsetOpenEditMedia,\n\t} = props;\n\tconst imageFileFragments = imageName?.[0].split('/');\n\tconst imageFileName = imageFileFragments?.[imageFileFragments.length - 1];\n\n\tconst { disableEditVariable } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container>\n\t\t\t<ImageContainer error={!!error} onClick={() => setOpenEditMedia?.(true)}>\n\t\t\t\t{error ? (\n\t\t\t\t\t<BrokenMediaImage width={56} height={56} />\n\t\t\t\t) : isLoading ? (\n\t\t\t\t\t<Spinner size={'small'} />\n\t\t\t\t) : selectedVariable ? (\n\t\t\t\t\t<ShimmerImage\n\t\t\t\t\t\timageUrl={DUMMY_VARIABLE_IMAGE}\n\t\t\t\t\t\twidth={56}\n\t\t\t\t\t\theight={56}\n\t\t\t\t\t/>\n\t\t\t\t) : mediaType === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t<ShimmerImage imageUrl={imageName?.[0]} width={56} height={56} />\n\t\t\t\t) : mediaType === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t<video src={imageName[0]} style={{ width: 56, height: 56 }}>\n\t\t\t\t\t\t<track default kind=\"captions\" srcLang=\"en\" src={imageName[0]} />\n\t\t\t\t\t</video>\n\t\t\t\t) : (\n\t\t\t\t\t<DocumentIcon\n\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\theight={22}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</ImageContainer>\n\t\t\t<RightComponent>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tflex: error ? 'unset' : 1,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{imageName && !!error ? (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t) : isLoading ? (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tYour media is getting loaded...\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{selectedVariable ||\n\t\t\t\t\t\t\t\tStringUtils.toCapitilize(mediaType?.toLowerCase()) ||\n\t\t\t\t\t\t\t\timageFileName}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{!!error && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\tgap: '2px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\tError loading this {mediaType?.toLowerCase()}. Retry\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t<Caption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</RightComponent>\n\t\t\t{!disableEditVariable && !isLoading && (\n\t\t\t\t<EditIconContainer\n\t\t\t\t\tonClick={() => setOpenEditMedia?.(true)}\n\t\t\t\t\tonKeyDown={() => setOpenEditMedia?.(true)}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t>\n\t\t\t\t\t{error ? (\n\t\t\t\t\t\t<RefreshIcon color={COLORS.content.brand} width={24} height={24} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Editicon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</EditIconContainer>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default EditMediaV2;\n"],"names":["DUMMY_VARIABLE_IMAGE","EditIconContainer","styled","COLORS","EditMediaV2","props","imageName","error","isLoading","mediaType","selectedVariable","setOpenEditMedia","imageFileFragments","imageFileName","disableEditVariable","useTemplateModalContext","Container","jsx","ImageContainer","BrokenMediaImage","Spinner","ShimmerImage","HEADER_TYPES","DocumentIcon","RightComponent","Fragment","BodyCaption","BodySecondary","StringUtils","jsxs","Caption","RefreshIcon","Editicon"],"mappings":"oyBAkBMA,EACL,+KAaKC,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,0BAIPC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMzCC,EAAeC,GAA4B,CAChD,KAAM,CACL,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,iBAAAC,CAAA,EACGN,EACEO,EAAqBN,IAAY,CAAC,EAAE,MAAM,GAAG,EAC7CO,EAAgBD,IAAqBA,EAAmB,OAAS,CAAC,EAElE,CAAE,oBAAAE,CAAA,EAAwBC,0BAAA,EAEhC,cACEC,YAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,MAAO,CAAC,CAACX,EAAO,QAAS,IAAMI,IAAmB,EAAI,EACpE,SAAAJ,EACAU,EAAAA,IAACE,EAAAA,SAAiB,MAAO,GAAI,OAAQ,EAAA,CAAI,EACtCX,QACFY,EAAAA,QAAA,CAAQ,KAAM,OAAA,CAAS,EACrBV,EACHO,EAAAA,IAACI,EAAAA,aAAA,CACA,SAAUrB,EACV,MAAO,GACP,OAAQ,EAAA,CAAA,EAENS,IAAca,eAAa,YAC7BD,eAAA,CAAa,SAAUf,IAAY,CAAC,EAAG,MAAO,GAAI,OAAQ,GAAI,EAC5DG,IAAca,EAAAA,aAAa,MAC9BL,MAAC,SAAM,IAAKX,EAAU,CAAC,EAAG,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EACrD,eAAC,QAAA,CAAM,QAAO,GAAC,KAAK,WAAW,QAAQ,KAAK,IAAKA,EAAU,CAAC,CAAA,CAAG,EAChE,EAEAW,EAAAA,IAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOpB,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGzB,SACCqB,EAAAA,eAAA,CACA,SAAA,CAAAP,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,KAAMV,EAAQ,QAAU,CAAA,EAGxB,YAAeA,EACfU,EAAAA,IAAAQ,WAAA,CAAA,CAAE,EACCjB,EACHS,EAAAA,IAACS,EAAAA,YAAA,CACA,MAAO,CACN,WAAY,CAAA,EAEb,SAAA,iCAAA,CAAA,EAIDT,EAAAA,IAACU,EAAAA,cAAA,CACA,MAAO,CACN,MAAOxB,EAAAA,OAAO,QAAQ,QACtB,WAAY,CAAA,EAGZ,YACAyB,EAAAA,QAAY,aAAanB,GAAW,YAAA,CAAa,GACjDI,CAAA,CAAA,CACF,CAAA,EAID,CAAC,CAACN,GACFsB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,WAAY,EACZ,IAAK,KAAA,EAGN,SAAA,CAAAA,OAACF,EAAAA,eAAc,MAAO,CAAE,MAAOxB,EAAAA,OAAO,QAAQ,UAAY,SAAA,CAAA,sBACrCM,GAAW,YAAA,EAAc,SAAA,EAC9C,EACAQ,EAAAA,IAACa,EAAAA,SAAQ,MAAO,CAAE,MAAO3B,SAAO,QAAQ,SAAA,EACtC,SAAAI,CAAA,CACF,CAAA,CAAA,CAAA,CACD,EAEF,EACC,CAACO,GAAuB,CAACN,GACzBS,EAAAA,IAAChB,EAAA,CACA,QAAS,IAAMU,IAAmB,EAAI,EACtC,UAAW,IAAMA,IAAmB,EAAI,EACxC,KAAK,eAEJ,SAAAJ,EACAU,EAAAA,IAACc,EAAAA,QAAA,CAAY,MAAO5B,EAAAA,OAAO,QAAQ,MAAO,MAAO,GAAI,OAAQ,EAAA,CAAI,EAEjEc,EAAAA,IAACe,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO7B,EAAAA,OAAO,QAAQ,WAAA,CAAA,CACvB,CAAA,CAEF,EAEF,CAEF"}

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.style.js

@@ -1,34 +1,34 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),e=require("../../../constants/Theme.js"),n=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(i),r=n.default.div`
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	/* justify-content: center; */
 	flex: 1;
-`,r=t.div`
+`,a=n.default.div`
 	width: 56px;
 	height: 56px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	align-self: center;
-	background-color: ${e.COLORS.surface.hovered};
+	background-color: ${t.COLORS.surface.hovered};
 	border-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
+	border: 1px solid ${t.COLORS.stroke.primary};
 	box-sizing: content-box;
-	cursor: ${i=>i.error?"pointer":"default"};
-`,o=t.div`
+	cursor: ${e=>e.error?"pointer":"default"};
+`,d=n.default.div`
 	padding: 8px;
 	flex-direction: row;
 	display: flex;
 	justify-content: space-between;
-	background: ${e.COLORS.surface.subdued};
-	border: 1px solid ${e.COLORS.stroke.primary};
+	background: ${t.COLORS.surface.subdued};
+	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-`,a=t.div`
+`,s=n.default.div`
 	padding-bottom: 0px;
 	min-width: 285px;
 	margin-bottom: 16px;
-`;exports.Container=o;exports.EditTemplateMediaContainer=a;exports.ImageContainer=r;exports.RightComponent=n;
+`;exports.Container=d;exports.EditTemplateMediaContainer=s;exports.ImageContainer=a;exports.RightComponent=r;
 //# sourceMappingURL=EditMediaV2.style.js.map

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditMediaV2.style.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaV2.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\t/* justify-content: center; */\n\tflex: 1;\n`;\n\nexport const ImageContainer = styled.div<{ error: boolean }>`\n\twidth: 56px;\n\theight: 56px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\talign-self: center;\n\tbackground-color: ${COLORS.surface.hovered};\n\tborder-radius: 4px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tbox-sizing: content-box;\n\tcursor: ${(props) => (props.error ? 'pointer' : 'default')};\n`;\n\nexport const Container = styled.div`\n\tpadding: 8px;\n\tflex-direction: row;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmargin-left: 8px;\n\talign-items: center;\n`;\n\nexport const EditTemplateMediaContainer = styled.div`\n\tpadding-bottom: 0px;\n\tmin-width: 285px;\n\tmargin-bottom: 16px;\n`;\n"],"names":["RightComponent","styled","ImageContainer","COLORS","props","Container","EditTemplateMediaContainer"],"mappings":"8JAGaA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBC,EAAiBD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOhBE,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,qBAEtBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,WAE9BC,GAAWA,EAAM,MAAQ,UAAY,SAAU;AAAA,EAG9CC,EAAYJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjBE,EAAAA,OAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM7BG,EAA6BL,EAAO;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"EditMediaV2.style.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaV2.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\t/* justify-content: center; */\n\tflex: 1;\n`;\n\nexport const ImageContainer = styled.div<{ error: boolean }>`\n\twidth: 56px;\n\theight: 56px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\talign-self: center;\n\tbackground-color: ${COLORS.surface.hovered};\n\tborder-radius: 4px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tbox-sizing: content-box;\n\tcursor: ${(props) => (props.error ? 'pointer' : 'default')};\n`;\n\nexport const Container = styled.div`\n\tpadding: 8px;\n\tflex-direction: row;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tmargin-left: 8px;\n\talign-items: center;\n`;\n\nexport const EditTemplateMediaContainer = styled.div`\n\tpadding-bottom: 0px;\n\tmin-width: 285px;\n\tmargin-bottom: 16px;\n`;\n"],"names":["RightComponent","styled","ImageContainer","COLORS","props","Container","EditTemplateMediaContainer"],"mappings":"6NAGaA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBC,EAAiBD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOhBE,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,qBAEtBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,WAE9BC,GAAWA,EAAM,MAAQ,UAAY,SAAU;AAAA,EAG9CC,EAAYJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjBE,EAAAA,OAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM7BG,EAA6BL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}