@bikdotai/bik-component-library 0.0.817-beta.5 → 0.0.817-beta.7

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","jsxDEV","TemplateAnalyticsComponent","StringUtils","this","TemplateModalContext","TemplateSelectModalContent","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","jsxDEV","TemplateAnalyticsComponent","StringUtils","this","TemplateModalContext","TemplateSelectModalContent","StyledModal","isRCSChannel","COLORS","file","Footer","Fragment"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),i=require("react"),m=require("../../checkBox/CheckBox.js"),l=require("../../input/Input.js"),c=require("../../TypographyStyle.js"),d=a=>{const{backTrackMessage:t,setBackTrackMessage:n}=a,[o,s]=i.useState(!!t);return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px",padding:"20px 0px"},children:[e.jsxDEV(m.CheckBox,{isChecked:o,onValueChange:()=>{o&&n&&n(""),s(!o)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:26,columnNumber:6},void 0),e.jsxDEV(c.TitleSmall,{style:{marginLeft:8},children:"Prevent BackTracking"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:35,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:16,columnNumber:5},void 0),o&&e.jsxDEV("div",{style:{margin:10},children:e.jsxDEV(l.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:r=>{n&&n(r)},height:"120px",maxCharLimit:1024,value:t,noErrorHint:!0,validate:r=>[!0,""]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:42,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:41,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:14,columnNumber:3},void 0)};exports.BackTrackComponent=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),s=require("react"),m=require("../../checkBox/CheckBox.js"),c=require("../../input/Input.js"),l=require("../../TypographyStyle.js"),p=o=>{const{backTrackMessage:r,setBackTrackMessage:n}=o,[t,i]=s.useState(!!r);return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px",padding:"20px 0px"},children:[e.jsxDEV(m.CheckBox,{isChecked:t,onValueChange:()=>{t&&n&&n(""),i(!t)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:26,columnNumber:6},void 0),e.jsxDEV(l.TitleSmall,{style:{marginLeft:8},children:"Prevent BackTracking"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:35,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:16,columnNumber:5},void 0),t&&e.jsxDEV("div",{style:{margin:10},children:e.jsxDEV(c.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:a=>{n&&n(a)},height:"120px",maxCharLimit:1024,value:r,noErrorHint:!0,validate:a=>[!0,""]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:42,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:41,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/BackTrackComponent.tsx",lineNumber:14,columnNumber:3},void 0)};exports.BackTrackComponent=p;
 //# sourceMappingURL=BackTrackComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackTrackComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/BackTrackComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\n\nexport const BackTrackComponent = (props: {\n\tbackTrackMessage?: string;\n\tsetBackTrackMessage?: (backTrackMessage: string) => void;\n}) => {\n\tconst { backTrackMessage, setBackTrackMessage } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!backTrackMessage);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\twidth: '300px',\n\t\t\t\t\t\tpadding: '20px 0px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\t\tPrevent BackTracking\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\ttype={'multiline'}\n\t\t\t\t\t\tplaceholder={'Enter your text here'}\n\t\t\t\t\t\tlabelText={'Message if user tries backtracking'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\theight={'120px'}\n\t\t\t\t\t\tmaxCharLimit={1024}\n\t\t\t\t\t\tvalue={backTrackMessage}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BackTrackComponent","props","backTrackMessage","setBackTrackMessage","isChecked","setIsChecked","useState","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","_"],"mappings":"4PAKaA,EAAsBC,GAG7B,CACL,KAAM,CAAE,iBAAAC,EAAkB,oBAAAC,CAAA,EAAwBF,EAC5C,CAACG,EAAWC,CAAY,EAAIC,EAAAA,SAAkB,CAAC,CAACJ,CAAgB,EAEtE,OACCK,EAAAA,OAAAC,WAAA,CAEE,SAAA,CAAAD,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,GACZ,UAAW,EACX,MAAO,QACP,QAAS,UAAA,EAGV,SAAA,CAAAA,EAAAA,OAACE,EAAAA,SAAA,CACA,UAAAL,EACA,cAAe,IAAM,CAChBA,GAAaD,GAChBA,EAAoB,EAAE,EAEvBE,EAAa,CAACD,CAAS,CACxB,CAAA,EAPD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,WASCC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,wBAAtC,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAD,MAEA,CAAA,CAAA,EArBD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAwBAN,GACAG,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,OAAQ,IACrB,SAAAA,EAAAA,OAACK,EAAAA,MAAA,CACA,KAAM,YACN,YAAa,uBACb,UAAW,qCACX,aAAeC,GAAU,CACpBV,GACHA,EAAoBU,CAAK,CAE3B,EACA,OAAQ,QACR,aAAc,KACd,MAAOX,EACP,YAAW,GACX,SAAWY,GACH,CAAC,GAAM,EAAE,CACjB,EAfD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAgBA,EAjBD,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkBA,CAAA,CAAA,EA7CF,OAAA,GAAA,CAAA,SAAA,kIAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+CA,CAEF"}
+{"version":3,"file":"BackTrackComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/BackTrackComponent.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\n\nexport const BackTrackComponent = (props: {\n\tbackTrackMessage?: string;\n\tsetBackTrackMessage?: (backTrackMessage: string) => void;\n}) => {\n\tconst { backTrackMessage, setBackTrackMessage } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!backTrackMessage);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\twidth: '300px',\n\t\t\t\t\t\tpadding: '20px 0px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\t\tPrevent BackTracking\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\ttype={'multiline'}\n\t\t\t\t\t\tplaceholder={'Enter your text here'}\n\t\t\t\t\t\tlabelText={'Message if user tries backtracking'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setBackTrackMessage) {\n\t\t\t\t\t\t\t\tsetBackTrackMessage(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\theight={'120px'}\n\t\t\t\t\t\tmaxCharLimit={1024}\n\t\t\t\t\t\tvalue={backTrackMessage}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BackTrackComponent","props","backTrackMessage","setBackTrackMessage","isChecked","setIsChecked","useState","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","_"],"mappings":"4PAKaA,EAAsBC,GAG7B,CACL,KAAM,CAAE,iBAAAC,EAAkB,oBAAAC,CAAA,EAAwBF,EAC5C,CAACG,EAAWC,CAAY,EAAIC,EAAAA,SAAkB,CAAC,CAACJ,CAAgB,EAEtE,OACCK,EAAAA,OAAAC,WAAA,CAEE,SAAA,CAAAD,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,GACZ,UAAW,EACX,MAAO,QACP,QAAS,UAAA,EAGV,SAAA,CAAAA,EAAAA,OAACE,EAAAA,SAAA,CACA,UAAAL,EACA,cAAe,IAAM,CAChBA,GAAaD,GAChBA,EAAoB,EAAE,EAEvBE,EAAa,CAACD,CAAS,CACxB,CAAA,EAPD,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,WASCC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,wBAAtC,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAD,MAEA,CAAA,CAAA,EArBD,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAwBAN,GACAG,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,OAAQ,IACrB,SAAAA,EAAAA,OAACK,EAAAA,MAAA,CACA,KAAM,YACN,YAAa,uBACb,UAAW,qCACX,aAAeC,GAAU,CACpBV,GACHA,EAAoBU,CAAK,CAE3B,EACA,OAAQ,QACR,aAAc,KACd,MAAOX,EACP,YAAW,GACX,SAAWY,GACH,CAAC,GAAM,EAAE,CACjB,EAfD,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAgBA,EAjBD,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkBA,CAAA,CAAA,EA7CF,OAAA,GAAA,CAAA,SAAA,iKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+CA,CAEF"}

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 n=require("react/jsx-dev-runtime"),F=require("lodash/cloneDeep"),L=require("react"),G=require("styled-components"),K=require("../../carousel-preview/CarouselPreview.js"),z=require("./EditWhatsAppCarouselTemplateV2.js"),J=require("../../template-preview/TemplatePreview.js"),t=require("../../template-preview/models/Channels.js"),Q=require("../../TypographyStyle.js"),X=require("../../variable-picker-v3/VariablePicker.js"),i=require("../../../constants/Theme.js"),Z=require("../context/templateModalContext.js"),ee=require("../utils/constants.js"),oe=require("../utils/getVariableNameEmail.js"),S=require("../utils/highlightFor.js"),ne=require("./DesktopPreview.js"),te=require("./EditWebpushTemplate.js"),ae=require("./EditWhatsAppTemplateV2.js"),le=require("./MobilePreview.js"),re=require("./VariableConnectorsPanel.js"),se=require("../../variable-picker-v3/model.js"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},B=q(F),h=q(G),ie=h.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-dev-runtime"),F=require("lodash/cloneDeep"),_=require("react"),G=require("styled-components"),K=require("../../carousel-preview/CarouselPreview.js"),z=require("./EditWhatsAppCarouselTemplateV2.js"),J=require("../../template-preview/TemplatePreview.js"),n=require("../../template-preview/models/Channels.js"),Q=require("../../TypographyStyle.js"),X=require("../../variable-picker-v3/VariablePicker.js"),l=require("../../../constants/Theme.js"),Z=require("../context/templateModalContext.js"),ee=require("../utils/constants.js"),te=require("../utils/getVariableNameEmail.js"),L=require("../utils/highlightFor.js"),oe=require("./DesktopPreview.js"),ne=require("./EditWebpushTemplate.js"),ae=require("./EditWhatsAppTemplateV2.js"),re=require("./MobilePreview.js"),ie=require("./VariableConnectorsPanel.js"),se=require("../../variable-picker-v3/model.js"),H=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},S=H(F),N=H(G),le=N.default.div`
 	display: flex;
 	//	height: 100%;
-`,H=h.default.div`
+`,B=N.default.div`
 	max-width: 450px;
-	max-width: ${e=>e.channel===t.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===n.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===t.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${i.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${i.COLORS.stroke.primary} 1px solid`:void 0};
+	border-left: ${l.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${l.COLORS.stroke.primary} 1px solid`:void 0};
 	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,de=h.default.div`
+`,me=N.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===t.CHANNEL_TYPE.WHATSAPP?`url(${ee.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>e.hideDeviceContainerInPreview&&(e.channel===t.CHANNEL_TYPE.WHATSAPP||e.channel===t.CHANNEL_TYPE.RCS)?"flex":"initial"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===n.CHANNEL_TYPE.WHATSAPP?`url(${ee.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>e.hideDeviceContainerInPreview&&(e.channel===n.CHANNEL_TYPE.WHATSAPP||e.channel===n.CHANNEL_TYPE.RCS)?"flex":"initial"};
 	align-items: flex-start;
-`,me=e=>{const{showVariableMapping:b,showOnlyContent:U,whatsappSpecificPickerMeta:f,showVariableModal:d,discountCode:E,setDiscountCode:N,variableListForImage:x,showSampleValues:m,variableListFromProps:P,fileName:j,setFileName:W,skipDefaultVariableContent:w}=e,y=L.useRef(),C=L.useRef(),{variableList:M,setVariableList:v,variableCallback:R,showVariablePicker:D,setShowVariablePicker:T,device:s,display_content:g,channel:o,template:l,setTemplate:k,isWhatsappCarousel:c,isProductCarouselType:A,hideDeviceContainerInPreview:Y,onDefaultVariableSelect:I}=Z.useTemplateModalContext();function O(a){const r=document?.getElementById(s==="mobile"?"template_html_mobile":"template_html_desktop"),p=oe.getVariableNameForEmailByIndex(a+1),V=o===t.CHANNEL_TYPE.EMAIL?r?.contentWindow?.document.getElementById(p):document.getElementById(p),u=$(V),_=V?.offsetLeft;s==="desktop"?u&&y.current&&(r?.contentWindow?.scrollTo(_??0,u),S.highlightFor(p,i.COLORS.background.warning.light,2,o,s)):u&&C.current&&(r?.contentWindow?.scrollTo(_??0,u),S.highlightFor(p,i.COLORS.background.warning.light,2,o,s))}const $=a=>{let r=0;for(;a;)r+=a.offsetTop,a=a.offsetParent;return r};return n.jsxDEV(ie,{children:[n.jsxDEV(de,{showOnlyContent:U,showVariableMapping:b,isWhatsappCarousel:c,hideDeviceContainerInPreview:Y,channel:o,skipDefaultVariableContent:w,children:s==="mobile"?n.jsxDEV(le.default,{ref:C,display_content:g??"",channel:o,template:l,showSampleValues:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:209,columnNumber:6},void 0):(o===t.CHANNEL_TYPE.WHATSAPP||o===t.CHANNEL_TYPE.RCS)&&c?n.jsxDEV(K.CarouselPreview,{ref:y,channel:o,template:l,showSampleValues:m,isPreview:!1,showArrows:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:219,columnNumber:6},void 0):o===t.CHANNEL_TYPE.WEBPUSH?n.jsxDEV(J.TemplatePreview,{showSampleValues:m,channel:o,hideHeader:!0,template:l},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:228,columnNumber:6},void 0):o!==t.CHANNEL_TYPE.MESSAGE?n.jsxDEV(ne.default,{ref:y,channel:o,display_content:g??"",showSampleValues:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:235,columnNumber:6},void 0):n.jsxDEV(n.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:242,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:200,columnNumber:4},void 0),(A||b)&&n.jsxDEV(H,{channel:o,isWhatsappCarousel:c,showVariableMapping:!0,children:[n.jsxDEV("div",{style:{height:"100%",width:o==="whatsapp"?428:400,display:D?"block":"none"},children:n.jsxDEV(X.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{v(B.default(P)),T(!1)},onSelect:a=>{R(a),v(B.default(P)),T(!1)},type:se.PickerType.EMBEDDED,data:M??[],onDefaultVariableSelect:I,skipDefaultVariableContent:w},Math.random(),!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:258,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:251,columnNumber:6},void 0),n.jsxDEV("div",{style:{padding:"16px 14px",width:o==="whatsapp"||o=="webpush"||o=="rcs"?428:400,display:D?"none":"block"},children:o!==t.CHANNEL_TYPE.WHATSAPP&&o!==t.CHANNEL_TYPE?.RCS?o==t.CHANNEL_TYPE.WEBPUSH?n.jsxDEV(te.default,{whatsappSpecificPickerMeta:f,template:l,onTemplateChange:a=>{k?.(a)},showVariableModal:d},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:293,columnNumber:9},void 0):n.jsxDEV(re.default,{onFocus:o===t.CHANNEL_TYPE.EMAIL?O:void 0,showVariableModal:d,discountCode:E,setDiscountCode:N},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:302,columnNumber:9},void 0):(o===t.CHANNEL_TYPE.WHATSAPP||o===t.CHANNEL_TYPE.RCS)&&c?n.jsxDEV(z.default,{whatsappSpecificPickerMeta:f,template:l,showVariableModal:d,variableListForImage:x,discountCode:E,setDiscountCode:N},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:316,columnNumber:8},void 0):n.jsxDEV(ae.default,{whatsappSpecificPickerMeta:f,template:l,onTemplateChange:a=>{k?.(a)},showVariableModal:d,variableListForImage:x,discountCode:E,setDiscountCode:N,fileName:j,setFileName:W},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:325,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:278,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:246,columnNumber:5},void 0),[t.CHANNEL_TYPE.WHATSAPP,t.CHANNEL_TYPE.SMS].includes(o)&&!b&&!A&&n.jsxDEV(H,{children:n.jsxDEV(Q.BodySecondary,{color:i.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:346,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:345,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:199,columnNumber:3},void 0)};exports.default=me;
+`,ce=e=>{const{showVariableMapping:b,showOnlyContent:q,whatsappSpecificPickerMeta:h,showVariableModal:m,discountCode:f,setDiscountCode:k,variableListForImage:v,showSampleValues:c,variableListFromProps:y,fileName:U,setFileName:j,skipDefaultVariableContent:x}=e,E=_.useRef(),P=_.useRef(),{variableList:M,setVariableList:C,variableCallback:R,showVariablePicker:D,setShowVariablePicker:T,device:s,display_content:w,channel:t,template:r,setTemplate:g,isWhatsappCarousel:p,isProductCarouselType:A,hideDeviceContainerInPreview:Y,onDefaultVariableSelect:I}=Z.useTemplateModalContext();function O(a){const i=document?.getElementById(s==="mobile"?"template_html_mobile":"template_html_desktop"),d=te.getVariableNameForEmailByIndex(a+1),W=t===n.CHANNEL_TYPE.EMAIL?i?.contentWindow?.document.getElementById(d):document.getElementById(d),u=$(W),V=W?.offsetLeft;s==="desktop"?u&&E.current&&(i?.contentWindow?.scrollTo(V??0,u),L.highlightFor(d,l.COLORS.background.warning.light,2,t,s)):u&&P.current&&(i?.contentWindow?.scrollTo(V??0,u),L.highlightFor(d,l.COLORS.background.warning.light,2,t,s))}const $=a=>{let i=0;for(;a;)i+=a.offsetTop,a=a.offsetParent;return i};return o.jsxDEV(le,{children:[o.jsxDEV(me,{showOnlyContent:q,showVariableMapping:b,isWhatsappCarousel:p,hideDeviceContainerInPreview:Y,channel:t,skipDefaultVariableContent:x,children:s==="mobile"?o.jsxDEV(re.default,{ref:P,display_content:w??"",channel:t,template:r,showSampleValues:c},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:209,columnNumber:6},void 0):(t===n.CHANNEL_TYPE.WHATSAPP||t===n.CHANNEL_TYPE.RCS)&&p?o.jsxDEV(K.CarouselPreview,{ref:E,channel:t,template:r,showSampleValues:c,isPreview:!1,showArrows:!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:219,columnNumber:6},void 0):t===n.CHANNEL_TYPE.WEBPUSH?o.jsxDEV(J.TemplatePreview,{showSampleValues:c,channel:t,hideHeader:!0,template:r},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:228,columnNumber:6},void 0):t!==n.CHANNEL_TYPE.MESSAGE?o.jsxDEV(oe.default,{ref:E,channel:t,display_content:w??"",showSampleValues:c},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:235,columnNumber:6},void 0):o.jsxDEV(o.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:242,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:200,columnNumber:4},void 0),(A||b)&&o.jsxDEV(B,{channel:t,isWhatsappCarousel:p,showVariableMapping:!0,children:[o.jsxDEV("div",{style:{height:"100%",width:t==="whatsapp"?428:400,display:D?"block":"none"},children:o.jsxDEV(X.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{C(S.default(y)),T(!1)},onSelect:a=>{R(a),C(S.default(y)),T(!1)},type:se.PickerType.EMBEDDED,data:M??[],onDefaultVariableSelect:I,skipDefaultVariableContent:x},Math.random(),!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:258,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:251,columnNumber:6},void 0),o.jsxDEV("div",{style:{padding:"16px 14px",width:t==="whatsapp"||t=="webpush"||t=="rcs"?428:400,display:D?"none":"block"},children:t!==n.CHANNEL_TYPE.WHATSAPP&&t!==n.CHANNEL_TYPE?.RCS?t==n.CHANNEL_TYPE.WEBPUSH?o.jsxDEV(ne.default,{whatsappSpecificPickerMeta:h,template:r,onTemplateChange:a=>{g?.(a)},showVariableModal:m},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:293,columnNumber:9},void 0):o.jsxDEV(ie.default,{onFocus:t===n.CHANNEL_TYPE.EMAIL?O:void 0,showVariableModal:m,discountCode:f,setDiscountCode:k},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:302,columnNumber:9},void 0):(t===n.CHANNEL_TYPE.WHATSAPP||t===n.CHANNEL_TYPE.RCS)&&p?o.jsxDEV(z.default,{whatsappSpecificPickerMeta:h,template:r,showVariableModal:m,variableListForImage:v,discountCode:f,setDiscountCode:k},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:316,columnNumber:8},void 0):o.jsxDEV(ae.default,{whatsappSpecificPickerMeta:h,template:r,onTemplateChange:a=>{g?.(a)},showVariableModal:m,variableListForImage:v,discountCode:f,setDiscountCode:k,fileName:U,setFileName:j},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:325,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:278,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:246,columnNumber:5},void 0),[n.CHANNEL_TYPE.WHATSAPP,n.CHANNEL_TYPE.SMS].includes(t)&&!b&&!A&&o.jsxDEV(B,{children:o.jsxDEV(Q.BodySecondary,{color:l.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:346,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:345,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/Body.tsx",lineNumber:199,columnNumber:3},void 0)};exports.default=ce;
 //# 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","jsxDEV","MobilePreview","this","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","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","jsxDEV","MobilePreview","this","CarouselPreview","TemplatePreview","DesktopPreview","Fragment","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-dev-runtime"),m=require("react"),d=require("styled-components"),p=require("../../spinner/Spinner.js"),c=require("../../template-preview/TemplatePreview.js"),u=require("../../template-preview/models/Channels.js"),n=require("../../../constants/Theme.js"),s=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},b=s(m),r=s(d),f=r.default.div`
-	background: ${n.COLORS.surface.standard};
-	border: 1px solid ${n.COLORS.stroke.primary};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),l=require("react"),p=require("styled-components"),d=require("../../spinner/Spinner.js"),c=require("../../template-preview/TemplatePreview.js"),u=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=i(l),n=i(p),k=n.default.div`
+	background: ${o.COLORS.surface.standard};
+	border: 1px solid ${o.COLORS.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,x=r.default.div`
+`,v=n.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${n.COLORS.stroke.primary};
-`,t=r.default.div`
+	border-bottom-color: ${o.COLORS.stroke.primary};
+`,r=n.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,i=b.default.forwardRef(({display_content:o,showSampleValues:a},l)=>e.jsxDEV(f,{ref:l,children:[e.jsxDEV(x,{children:[e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:40,columnNumber:5},void 0),e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:41,columnNumber:5},void 0),e.jsxDEV(t,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:42,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:39,columnNumber:4},void 0),e.jsxDEV("div",{children:o?e.jsxDEV(c.TemplatePreview,{showSampleValues:a,channel:u.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:46,columnNumber:6},void 0):e.jsxDEV("div",{style:{padding:20},children:e.jsxDEV(p.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:65,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:64,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:44,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:38,columnNumber:3},void 0));i.displayName="DesktopPreview";exports.default=i;
+`,s=b.default.forwardRef(({display_content:t,showSampleValues:a},m)=>e.jsxDEV(k,{ref:m,children:[e.jsxDEV(v,{children:[e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:40,columnNumber:5},void 0),e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:41,columnNumber:5},void 0),e.jsxDEV(r,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:42,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:39,columnNumber:4},void 0),e.jsxDEV("div",{children:t?e.jsxDEV(c.TemplatePreview,{showSampleValues:a,channel:u.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:t,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:46,columnNumber:6},void 0):e.jsxDEV("div",{style:{padding:20},children:e.jsxDEV(d.Spinner,{size:"small"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:65,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:64,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:44,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DesktopPreview.tsx",lineNumber:38,columnNumber:3},void 0));s.displayName="DesktopPreview";exports.default=s;
 //# 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","jsxDEV","this","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"0cAOMA,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,OAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,SAACP,EAAA,CACA,SAAA,CAAAO,EAAAA,OAACN,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,CAAA,CAAA,EAHN,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EACAD,EAAAA,OAAC,OACC,SAAAH,EACAG,EAAAA,OAACE,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,EAfpB,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,EAkBAD,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAK,OAAA,EAAd,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAH,MAAsB,CAAA,EADvB,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAtBF,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAwBA,CAAA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,8HAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAED,EACDN,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","jsxDEV","this","TemplatePreview","CHANNEL_TYPE","Spinner"],"mappings":"0cAOMA,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,OAACV,EAAA,CAAU,IAAKS,EACf,SAAA,CAAAC,SAACP,EAAA,CACA,SAAA,CAAAO,EAAAA,OAACN,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,WACJP,EAAA,GAAD,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAO,MAAK,CAAA,CAAA,EAHN,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EACAD,EAAAA,OAAC,OACC,SAAAH,EACAG,EAAAA,OAACE,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,EAfpB,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,EAkBAD,EAAAA,OAAC,MAAA,CAAI,MAAO,CAAE,QAAS,EAAA,EACtB,SAAAA,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAK,OAAA,EAAd,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAH,MAAsB,CAAA,EADvB,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAtBF,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAwBA,CAAA,CAAA,EA9BD,OAAA,GAAA,CAAA,SAAA,6JAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA+BA,CAED,EACDN,EAAe,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),C=require("../../../assets/icons/PlusIcon.js"),t=require("react"),D=require("../../checkBox/CheckBox.js"),N=require("../../input/Input.js"),y=require("../../TypographyStyle.js"),V=require("../context/templateModalContext.js"),h=require("./VariableConnectorsPanel.js"),E=d=>{const{discountCode:r,setDiscountCode:n}=d,[a,m]=t.useState(""),[s,c]=t.useState(!!r),[u,l]=t.useState(!1),{setVariableCallback:p,setShowVariablePicker:b}=V.useTemplateModalContext(),i=t.useRef(),f=t.useRef();t.useEffect(()=>{n&&a&&n(r+a)},[a]);const x=o=>{m(o.actualValue)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsxDEV(D.CheckBox,{isChecked:s,onValueChange:()=>{s&&n&&(n(""),m("")),c(!s)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:44,columnNumber:6},void 0),e.jsxDEV(y.TitleSmall,{style:{marginLeft:8},children:"Add discount code"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:54,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:36,columnNumber:5},void 0),s&&e.jsxDEV("div",{ref:i,style:{margin:10},children:[e.jsxDEV(N.Input,{placeholder:"Enter your discount code",onChangeText:o=>{n&&n(o)},value:r,onFocus:()=>{l(!0)},onBlur:o=>{o.relatedTarget?.id==="addVar"?(i.current&&i.current.focus(),l(!0)):l(!1)},noErrorHint:!0,validate:o=>[!0,""]},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:59,columnNumber:6},void 0),u&&e.jsxDEV(h.AddVariableStyled,{ref:f,id:"addVar",onClick:o=>{o.stopPropagation(),p(()=>x),b(!0)},children:e.jsxDEV("div",{className:"add",children:[e.jsxDEV(C.default,{width:14,height:14,color:"white"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:96,columnNumber:9},void 0),e.jsxDEV("div",{className:"variable",children:"Add variable"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:97,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:95,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:86,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:58,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:34,columnNumber:3},void 0)};exports.DiscountCodeComponent=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),h=require("../../../assets/icons/PlusIcon.js"),t=require("react"),v=require("../../checkBox/CheckBox.js"),x=require("../../input/Input.js"),C=require("../../TypographyStyle.js"),D=require("../context/templateModalContext.js"),N=require("./VariableConnectorsPanel.js"),y=c=>{const{discountCode:s,setDiscountCode:n}=c,[a,m]=t.useState(""),[r,u]=t.useState(!!s),[d,i]=t.useState(!1),{setVariableCallback:p,setShowVariablePicker:b}=D.useTemplateModalContext(),l=t.useRef(),f=t.useRef();t.useEffect(()=>{n&&a&&n(s+a)},[a]);const k=o=>{m(o.actualValue)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsxDEV(v.CheckBox,{isChecked:r,onValueChange:()=>{r&&n&&(n(""),m("")),u(!r)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:44,columnNumber:6},void 0),e.jsxDEV(C.TitleSmall,{style:{marginLeft:8},children:"Add discount code"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:54,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:36,columnNumber:5},void 0),r&&e.jsxDEV("div",{ref:l,style:{margin:10},children:[e.jsxDEV(x.Input,{placeholder:"Enter your discount code",onChangeText:o=>{n&&n(o)},value:s,onFocus:()=>{i(!0)},onBlur:o=>{o.relatedTarget?.id==="addVar"?(l.current&&l.current.focus(),i(!0)):i(!1)},noErrorHint:!0,validate:o=>[!0,""]},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:59,columnNumber:6},void 0),d&&e.jsxDEV(N.AddVariableStyled,{ref:f,id:"addVar",onClick:o=>{o.stopPropagation(),p(()=>k),b(!0)},children:e.jsxDEV("div",{className:"add",children:[e.jsxDEV(h.default,{width:14,height:14,color:"white"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:96,columnNumber:9},void 0),e.jsxDEV("div",{className:"variable",children:"Add variable"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:97,columnNumber:9},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:95,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:86,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:58,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx",lineNumber:34,columnNumber:3},void 0)};exports.DiscountCodeComponent=y;
 //# sourceMappingURL=DiscountCodeComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscountCodeComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { AddVariableStyled } from './VariableConnectorsPanel';\n\nexport const DiscountCodeComponent = (props: {\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}) => {\n\tconst { discountCode, setDiscountCode } = props;\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!discountCode);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst { setVariableCallback, setShowVariablePicker } =\n\t\tuseTemplateModalContext();\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode && variableValue) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t\tsetVariableValue('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={14} height={14} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DiscountCodeComponent","props","discountCode","setDiscountCode","variableValue","setVariableValue","useState","isChecked","setIsChecked","showAddVariable","setShowAddVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","superRef","useRef","varRef","useEffect","handleVariableCallback","variable","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"DiscountCodeComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/DiscountCodeComponent.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { AddVariableStyled } from './VariableConnectorsPanel';\n\nexport const DiscountCodeComponent = (props: {\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}) => {\n\tconst { discountCode, setDiscountCode } = props;\n\tconst [variableValue, setVariableValue] = useState<string>('');\n\tconst [isChecked, setIsChecked] = useState<boolean>(!!discountCode);\n\tconst [showAddVariable, setShowAddVariable] = useState<boolean>(false);\n\tconst { setVariableCallback, setShowVariablePicker } =\n\t\tuseTemplateModalContext();\n\n\tconst superRef = useRef<any>();\n\tconst varRef = useRef<any>();\n\n\tuseEffect(() => {\n\t\tif (setDiscountCode && variableValue) {\n\t\t\tsetDiscountCode(discountCode + variableValue);\n\t\t}\n\t}, [variableValue]);\n\n\tconst handleVariableCallback = (variable: any) => {\n\t\tsetVariableValue(variable.actualValue);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={() => {\n\t\t\t\t\t\t\tif (isChecked && setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode('');\n\t\t\t\t\t\t\t\tsetVariableValue('');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsChecked(!isChecked);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>Add discount code</TitleSmall>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t{isChecked && (\n\t\t\t\t<div ref={superRef} style={{ margin: 10 }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tplaceholder={'Enter your discount code'}\n\t\t\t\t\t\tonChangeText={(value) => {\n\t\t\t\t\t\t\tif (setDiscountCode) {\n\t\t\t\t\t\t\t\tsetDiscountCode(value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvalue={discountCode}\n\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\tif (e.relatedTarget?.id === 'addVar') {\n\t\t\t\t\t\t\t\tif (superRef.current) {\n\t\t\t\t\t\t\t\t\t(superRef.current as any).focus();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetShowAddVariable(true);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetShowAddVariable(false);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tnoErrorHint\n\t\t\t\t\t\tvalidate={(_) => {\n\t\t\t\t\t\t\treturn [true, ''];\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t{showAddVariable && (\n\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\tref={varRef}\n\t\t\t\t\t\t\tid={'addVar'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t<PlusIcon width={14} height={14} color=\"white\" />\n\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DiscountCodeComponent","props","discountCode","setDiscountCode","variableValue","setVariableValue","useState","isChecked","setIsChecked","showAddVariable","setShowAddVariable","setVariableCallback","setShowVariablePicker","useTemplateModalContext","superRef","useRef","varRef","useEffect","handleVariableCallback","variable","jsxDEV","Fragment","CheckBox","this","TitleSmall","Input","value","e","_","AddVariableStyled","PlusIcon"],"mappings":"qYAQaA,EAAyBC,GAGhC,CACL,KAAM,CAAE,aAAAC,EAAc,gBAAAC,CAAA,EAAoBF,EACpC,CAACG,EAAeC,CAAgB,EAAIC,EAAAA,SAAiB,EAAE,EACvD,CAACC,EAAWC,CAAY,EAAIF,EAAAA,SAAkB,CAAC,CAACJ,CAAY,EAC5D,CAACO,EAAiBC,CAAkB,EAAIJ,EAAAA,SAAkB,EAAK,EAC/D,CAAE,oBAAAK,EAAqB,sBAAAC,CAAA,EAC5BC,0BAAA,EAEKC,EAAWC,EAAAA,OAAA,EACXC,EAASD,EAAAA,OAAA,EAEfE,EAAAA,UAAU,IAAM,CACXd,GAAmBC,GACtBD,EAAgBD,EAAeE,CAAa,CAE9C,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMc,EAA0BC,GAAkB,CACjDd,EAAiBc,EAAS,WAAW,CACtC,EAEA,OACCC,EAAAA,OAAAC,WAAA,CAEE,SAAA,CAAAD,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,GACZ,UAAW,CAAA,EAGZ,SAAA,CAAAA,EAAAA,OAACE,EAAAA,SAAA,CACA,UAAAf,EACA,cAAe,IAAM,CAChBA,GAAaJ,IAChBA,EAAgB,EAAE,EAClBE,EAAiB,EAAE,GAEpBG,EAAa,CAACD,CAAS,CACxB,CAAA,EARD,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAgB,MAAA,WAUCC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,qBAAtC,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAD,MAAuD,CAAA,CAAA,EAlBxD,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAqBAhB,YACC,MAAA,CAAI,IAAKO,EAAU,MAAO,CAAE,OAAQ,EAAA,EACpC,SAAA,CAAAM,EAAAA,OAACK,EAAAA,MAAA,CACA,YAAa,2BACb,aAAeC,GAAU,CACpBvB,GACHA,EAAgBuB,CAAK,CAEvB,EACA,MAAOxB,EACP,QAAS,IAAM,CACdQ,EAAmB,EAAI,CACxB,EACA,OAASiB,GAAM,CACVA,EAAE,eAAe,KAAO,UACvBb,EAAS,SACXA,EAAS,QAAgB,MAAA,EAE3BJ,EAAmB,EAAI,GAEvBA,EAAmB,EAAK,CAE1B,EACA,YAAW,GACX,SAAWkB,GACH,CAAC,GAAM,EAAE,CACjB,EAxBD,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAL,MAAA,EA0BCd,GACAW,EAAAA,OAACS,EAAAA,kBAAA,CACA,IAAKb,EACL,GAAI,SACJ,QAAUW,GAAM,CACfA,EAAE,gBAAA,EACFhB,EAAoB,IAAMO,CAAsB,EAChDN,EAAsB,EAAI,CAC3B,EAEA,SAAAQ,EAAAA,OAAC,MAAA,CAAI,UAAU,MACd,SAAA,CAAAA,EAAAA,OAACU,EAAAA,SAAS,MAAO,GAAI,OAAQ,GAAI,MAAM,SAAvC,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAP,MAA+C,EAC/CH,SAAC,MAAA,CAAI,UAAU,WAAW,SAAA,cAAA,EAA1B,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAG,MAAsC,CAAA,CAAA,EAFvC,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAGA,CAAA,EAZD,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAaA,CAAA,EAzCF,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA2CA,CAAA,CAAA,EAnEF,OAAA,GAAA,CAAA,SAAA,oKAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAqEA,CAEF"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),S=require("../../../assets/icons/arrow_back.svg.js"),I=require("../../../assets/icons/info.svg.js"),r=require("react"),D=require("../../button/Button.js"),A=require("../../image-cropper/BikImageCropper.js"),P=require("../../input-with-vars/InputWithVariables.js"),C=require("../../spinner/Spinner.js"),t=require("../../template-preview/models/TemplateMeta.js"),q=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../../TypographyStyle.js"),B=require("../../../utils/validator.js"),a=require("../../../constants/Theme.js"),H=require("../../../assets/icons/file.svg.js"),_=require("../../../assets/icons/filePdf.svg.js"),L=require("../../../assets/icons/image.svg.js"),O=require("../../../assets/icons/upload.svg.js"),R=require("../context/templateModalContext.js"),Y=require("../utils/validateIsUrl.js"),G=require("../../variable-picker-v3/model.js"),$=({setOpenEditMedia:b,mediaComponentFormat:n,variableListForImage:M,openEditMedia:g,uploadMedia:E,fileRef:c,useEditWhatsappTemplateMediaResponse:o,skipAddVariable:f})=>{const{pod:v,setHideCrossButton:x,setHideFooterButton:y}=R.useTemplateModalContext(),[h,u]=r.useState(""),[k,V]=r.useState(void 0),[N,s]=r.useState(!1),[d,U]=r.useState("");r.useEffect(()=>(y(!0),()=>{y(!1)}),[]),r.useEffect(()=>{const l=document.querySelector('[class*="ModalWrapper"]');l&&V(l)},[o.loading]);let m;if(n===t.HEADER_TYPES.IMAGE?m="image/png, image/jpeg":n===t.HEADER_TYPES.VIDEO?m="video/mp4":m="application/pdf",!g)return e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:84,columnNumber:10},void 0);const p=()=>n===t.HEADER_TYPES.IMAGE?"Image":n===t.HEADER_TYPES.VIDEO?"Video":"Document",w=()=>o.loading?"Upload in progress...":n===t.HEADER_TYPES.IMAGE?"Upload an image":n===t.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document",j=()=>o.loading?`Your ${n.toLowerCase()} is getting loaded. This may take a couple of minutes.`:n===t.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":n===t.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB",T=l=>{x(!!l)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e.jsxDEV(S.default,{onClick:l=>{l.stopPropagation(),b(!1),u("")},style:{cursor:"pointer"},width:16,height:16},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:137,columnNumber:5},void 0),e.jsxDEV(i.TitleRegular,{children:"Update Media"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:147,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:129,columnNumber:4},void 0),e.jsxDEV("div",{style:{position:"relative",padding:16,borderRadius:4,border:N?`1px dashed ${a.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${a.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:a.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:o.loading?"flex":"initial"},children:[e.jsxDEV("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[o.loading?e.jsxDEV(C.PureSpinner,{width:"40px",height:"40px",color:a.COLORS.content.brand},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:177,columnNumber:7},void 0):e.jsxDEV("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:a.DEFAULT_THEME.colorsV2.background.base},children:n===t.HEADER_TYPES.IMAGE?e.jsxDEV(L.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:195,columnNumber:9},void 0):n===t.HEADER_TYPES.VIDEO?e.jsxDEV(H.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:197,columnNumber:9},void 0):e.jsxDEV(_.default,{width:40,height:40},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:199,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:183,columnNumber:7},void 0),e.jsxDEV(i.TitleMedium,{children:w()},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:203,columnNumber:6},void 0),e.jsxDEV(i.BodySecondary,{color:a.COLORS.content.secondary,children:j()},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:204,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:166,columnNumber:5},void 0),!o.loading&&e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e.jsxDEV(P.InputWithVariables,{labelText:`${p()} URL`,onPickerToggle:T,pickerType:G.PickerType.EMBEDDED,portalElement:k??document.body,noMaxCharCheck:!0,allowMix:!1,onChange:l=>{U(l.actualValue),s(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:h,prevVariable:{actualValue:"",variableType:"string"},variablesList:M,placeHolder:f?"Enter URL":"Enter URL/Add variable",showAddButton:v===q.POD.CAMPAIGN?!f&&n===t.HEADER_TYPES.IMAGE:!0},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:213,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:210,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:249,columnNumber:8},void 0),e.jsxDEV(i.BodyCaption,{children:"Or upload media from device"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:252,columnNumber:8},void 0),e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:253,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:240,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",width:"100%"},children:e.jsxDEV(D.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:O.default,onClick:()=>{E(),s(!1)},size:"medium"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:258,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:257,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:209,columnNumber:6},void 0),N&&e.jsxDEV("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e.jsxDEV(I.default,{width:16,height:16,color:a.COLORS.content.negative},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:283,columnNumber:7},void 0),e.jsxDEV(i.BodyCaption,{style:{color:a.COLORS.content.negative},children:`Select ${p()}`},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:284,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:273,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:149,columnNumber:4},void 0),!o.loading&&e.jsxDEV("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e.jsxDEV(D.Button,{buttonText:`Add ${p()}`,onClick:()=>{if(!d){s(!0);return}if(!B.validateURL(d)&&!Y.isVariable(d)){u("Enter valid URL");return}E(d),b(!1),u(""),s(!1)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:295,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:292,columnNumber:5},void 0),e.jsxDEV("input",{ref:c,style:{display:"none"},type:"file",onChange:o.handleImageUpload,accept:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:316,columnNumber:4},void 0),!!o.selectedImage&&e.jsxDEV(A.BikImageCropper,{aspectRatio:15/8,src:o.selectedImage,onCropComplete:o.onCropComplete,onCancel:()=>{o.setLoading(!1),o.setSelectedImage(""),c.current&&(c.current.value="")}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:324,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:128,columnNumber:3},void 0)};exports.default=$;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-dev-runtime"),I=require("../../../assets/icons/arrow_back.svg.js"),A=require("../../../assets/icons/info.svg.js"),a=require("react"),h=require("../../button/Button.js"),P=require("../../image-cropper/BikImageCropper.js"),W=require("../../input-with-vars/InputWithVariables.js"),C=require("../../spinner/Spinner.js"),n=require("../../template-preview/models/TemplateMeta.js"),q=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../../TypographyStyle.js"),B=require("../../../utils/validator.js"),i=require("../../../constants/Theme.js"),H=require("../../../assets/icons/file.svg.js"),_=require("../../../assets/icons/filePdf.svg.js"),L=require("../../../assets/icons/image.svg.js"),w=require("../../../assets/icons/upload.svg.js"),O=require("../context/templateModalContext.js"),R=require("../utils/validateIsUrl.js"),Y=require("../../variable-picker-v3/model.js"),G=({setOpenEditMedia:b,mediaComponentFormat:o,variableListForImage:y,openEditMedia:N,uploadMedia:E,fileRef:c,useEditWhatsappTemplateMediaResponse:t,skipAddVariable:f})=>{const{pod:D,setHideCrossButton:k,setHideFooterButton:x}=O.useTemplateModalContext(),[M,u]=a.useState(""),[g,V]=a.useState(void 0),[v,s]=a.useState(!1),[m,U]=a.useState("");a.useEffect(()=>(x(!0),()=>{x(!1)}),[]),a.useEffect(()=>{const r=document.querySelector('[class*="ModalWrapper"]');r&&V(r)},[t.loading]);let d;if(o===n.HEADER_TYPES.IMAGE?d="image/png, image/jpeg":o===n.HEADER_TYPES.VIDEO?d="video/mp4":d="application/pdf",!N)return e.jsxDEV(e.Fragment,{},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:84,columnNumber:10},void 0);const p=()=>o===n.HEADER_TYPES.IMAGE?"Image":o===n.HEADER_TYPES.VIDEO?"Video":"Document",j=()=>t.loading?"Upload in progress...":o===n.HEADER_TYPES.IMAGE?"Upload an image":o===n.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document",T=()=>t.loading?`Your ${o.toLowerCase()} is getting loaded. This may take a couple of minutes.`:o===n.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":o===n.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB",S=r=>{k(!!r)};return e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e.jsxDEV(I.default,{onClick:r=>{r.stopPropagation(),b(!1),u("")},style:{cursor:"pointer"},width:16,height:16},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:137,columnNumber:5},void 0),e.jsxDEV(l.TitleRegular,{children:"Update Media"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:147,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:129,columnNumber:4},void 0),e.jsxDEV("div",{style:{position:"relative",padding:16,borderRadius:4,border:v?`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:t.loading?"flex":"initial"},children:[e.jsxDEV("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[t.loading?e.jsxDEV(C.PureSpinner,{width:"40px",height:"40px",color:i.COLORS.content.brand},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:177,columnNumber:7},void 0):e.jsxDEV("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base},children:o===n.HEADER_TYPES.IMAGE?e.jsxDEV(L.default,{width:40,height:40},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:195,columnNumber:9},void 0):o===n.HEADER_TYPES.VIDEO?e.jsxDEV(H.default,{width:40,height:40},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:197,columnNumber:9},void 0):e.jsxDEV(_.default,{width:40,height:40},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:199,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:183,columnNumber:7},void 0),e.jsxDEV(l.TitleMedium,{children:j()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:203,columnNumber:6},void 0),e.jsxDEV(l.BodySecondary,{color:i.COLORS.content.secondary,children:T()},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:204,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:166,columnNumber:5},void 0),!t.loading&&e.jsxDEV(e.Fragment,{children:[e.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e.jsxDEV(W.InputWithVariables,{labelText:`${p()} URL`,onPickerToggle:S,pickerType:Y.PickerType.EMBEDDED,portalElement:g??document.body,noMaxCharCheck:!0,allowMix:!1,onChange:r=>{U(r.actualValue),s(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:M,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,placeHolder:f?"Enter URL":"Enter URL/Add variable",showAddButton:D===q.POD.CAMPAIGN?!f&&o===n.HEADER_TYPES.IMAGE:!0},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:213,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:210,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:249,columnNumber:8},void 0),e.jsxDEV(l.BodyCaption,{children:"Or upload media from device"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:252,columnNumber:8},void 0),e.jsxDEV("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:253,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:240,columnNumber:7},void 0),e.jsxDEV("div",{style:{display:"flex",width:"100%"},children:e.jsxDEV(h.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:w.default,onClick:()=>{E(),s(!1)},size:"medium"},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:258,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:257,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:209,columnNumber:6},void 0),v&&e.jsxDEV("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e.jsxDEV(A.default,{width:16,height:16,color:i.COLORS.content.negative},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:283,columnNumber:7},void 0),e.jsxDEV(l.BodyCaption,{style:{color:i.COLORS.content.negative},children:`Select ${p()}`},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:284,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:273,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:149,columnNumber:4},void 0),!t.loading&&e.jsxDEV("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e.jsxDEV(h.Button,{buttonText:`Add ${p()}`,onClick:()=>{if(!m){s(!0);return}if(!B.validateURL(m)&&!R.isVariable(m)){u("Enter valid URL");return}E(m),b(!1),u(""),s(!1)}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:295,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:292,columnNumber:5},void 0),e.jsxDEV("input",{ref:c,style:{display:"none"},type:"file",onChange:t.handleImageUpload,accept:d},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:316,columnNumber:4},void 0),!!t.selectedImage&&e.jsxDEV(P.BikImageCropper,{aspectRatio:15/8,src:t.selectedImage,onCropComplete:t.onCropComplete,onCancel:()=>{t.setLoading(!1),t.setSelectedImage(""),c.current&&(c.current.value="")}},void 0,!1,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:324,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/EditMediaModal.tsx",lineNumber:128,columnNumber:3},void 0)};exports.default=G;
 //# sourceMappingURL=EditMediaModal.js.map