@bikdotai/bik-component-library 0.0.814 → 0.0.815

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

@@ -1 +1 @@
-{"version":3,"file":"EditWhatsAppTemplateV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.tsx"],"sourcesContent":["import { PickerType } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Input } from '@src/components/input';\nimport { InputWithVariables } from '@src/components/input-with-vars';\nimport {\n\tisCarouselComponent,\n\tisRCSChannel,\n} from '@src/components/template-preview/helpers/templateMiscHelper';\nimport type { EmailTemplateType } from '@src/components/template-preview/models/EmailTemplate';\nimport type { SMSTemplateType } from '@src/components/template-preview/models/SmsTemplate';\nimport {\n\tButtonPlaceHolderOptions,\n\tHEADER_TYPES,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\ttype CTABtnValType,\n\tPOD,\n\ttype QRBBtnValType,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport {\n\tSTATIC_URL_VARIABLE_NAME,\n\tUNSUBSCRIBE_URL_VARIABLE,\n} from '../utils/constants';\nimport { getAllDataFromTemplateComponent } from '../utils/getDataFromTemplateComponent';\nimport { isVariable } from '../utils/validateIsUrl';\nimport {\n\tvalidateInputName,\n\tvalidateInputNameChatbot,\n} from '../utils/validateName';\nimport { BackTrackComponent } from './BackTrackComponent';\nimport { DiscountCodeComponent } from './DiscountCodeComponent';\nimport EditMediaModal from './EditMediaModal';\nimport EditMediaV2 from './EditMediaV2';\nimport { EditTemplateMediaContainer } from './EditMediaV2.style';\nimport { useEditWhatsappTemplateMedia } from './useEditWhtasappTemplateMedia';\nimport VariableConnector from './VariableConnector';\nimport { Container } from './VariableConnectorsPanel';\nimport VariableConnectorWhatsApp from './VariableConnectorWhatsApp';\nimport VariableEditorHeader from './VariableEditorHeader';\nimport WhatsAppTemplateCardButtonV2, {\n\tQRBBtnUpdateFunctionType,\n\tURLBtnUpdateFunctionType,\n} from './WhatsAppTemplateCardButtonV2';\n\nexport interface EditWhatsAppTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WhatsAppTemplate | WhatsAppCarouselTemplate;\n\tonTemplateChange?: (\n\t\ttemplate:\n\t\t\t| WhatsAppTemplate\n\t\t\t| EmailTemplateType\n\t\t\t| SMSTemplateType\n\t\t\t| WhatsAppCarouselTemplate,\n\t) => void;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n}\n\nconst EditWhatsAppTemplateV2 = ({\n\ttemplate,\n\tonTemplateChange,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n\tvariableListForImage,\n\tsetDiscountCode,\n\tfileName,\n\tsetFileName,\n}: EditWhatsAppTemplateV2Props) => {\n\tconst isCarouselType = (template as WhatsAppCarouselTemplate).isCarouselType;\n\tconst {\n\t\toriginalVariableList,\n\t\tpod,\n\t\textras,\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\tdisableCopyCode,\n\t\tisError,\n\t\tcardIndex,\n\t} = useTemplateModalContext();\n\tconst {\n\t\tdescriptionComponents,\n\t\turlBtns,\n\t\tqrbBtns,\n\t\timageComponent,\n\t\tbodyVariables,\n\t\theaderVariables,\n\t\ttitleVariables,\n\t} = getAllDataFromTemplateComponent(template as WhatsAppTemplate);\n\n\tconst fileRef = useRef<HTMLInputElement>(null);\n\n\tconst [showDiscountCheckBox, setShowDiscountCheckBox] =\n\t\tuseState<boolean>(false);\n\tconst [templateComponentData, setTemplateComponentData] = useState<any>(\n\t\tselectedCarouselIndex === -1\n\t\t\t? {\n\t\t\t\t\tdescriptionComponents,\n\t\t\t\t\turlBtns,\n\t\t\t\t\tqrbBtns,\n\t\t\t\t\timageComponent,\n\t\t\t\t\tbodyVariables,\n\t\t\t\t\theaderVariables,\n\t\t\t\t\ttitleVariables,\n\t\t\t  }\n\t\t\t: {},\n\t);\n\n\tconst { uploadMediaLink, uploadMediaFiles, validateMimeType } =\n\t\twhatsappSpecificPickerMeta as WhatsAppPickerMeta;\n\n\tconst useEditWhatsappTemplateMediaResponse = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl,\n\t\tvalidateMimeType,\n\t\tmediaComponent: !isCarouselType\n\t\t\t? imageComponent\n\t\t\t: templateComponentData.imageComponent,\n\t\tfileRef,\n\t});\n\n\tconst [hasNewImageUpload, setHasNewImageUpload] = useState<boolean>(false);\n\tconst [enteredPdf, setEnteredPdf] = useState(fileName);\n\tconst [pdfInputError, setPdfInputError] = useState<string | undefined>();\n\n\t/**\n\t * Whenever template changes, check if we have Checkout URL in the button mapping.\n\t * If yes, show discount check box\n\t */\n\tuseEffect(() => {\n\t\tconst discountCheckboxEnabled = template.mapping.buttons?.find(\n\t\t\t(button) => button.slice(2, -2) === 'checkout.checkoutUrl',\n\t\t);\n\t\tif (discountCheckboxEnabled) {\n\t\t\tsetShowDiscountCheckBox(true);\n\t\t} else {\n\t\t\tsetShowDiscountCheckBox(false);\n\t\t\tconst setDiscountCode = extras?.discountCodeExtra?.[1];\n\t\t\tsetDiscountCode?.('');\n\t\t}\n\t}, [template]);\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst currentCarousel = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(currentCarousel as WhatsAppTemplate);\n\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t} else if (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex === -1\n\t\t) {\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent: mediaComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(template as WhatsAppTemplate);\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent: mediaComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t}\n\t}, [selectedCarouselIndex]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\thasNewImageUpload\n\t\t) {\n\t\t\tconst currentCarousel = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(currentCarousel as WhatsAppTemplate);\n\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t\tsetHasNewImageUpload(false);\n\t\t}\n\t}, [hasNewImageUpload]);\n\n\tfunction updateTemplateImageUrl(\n\t\turl: string,\n\t\tformat: WhatsAppTemplate['components'][0]['format'],\n\t) {\n\t\tlet localTemplate: any;\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tlocalTemplate = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t} else {\n\t\t\tlocalTemplate = { ...template };\n\t\t}\n\n\t\tconst imageComponentIndex = localTemplate?.components?.findIndex(\n\t\t\t(component) => {\n\t\t\t\tif (\n\t\t\t\t\tcomponent.type === 'HEADER' &&\n\t\t\t\t\tcomponent.format !== 'NONE' &&\n\t\t\t\t\tcomponent.format !== 'TEXT'\n\t\t\t\t) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t},\n\t\t);\n\n\t\tif (\n\t\t\ttypeof imageComponentIndex !== 'undefined' &&\n\t\t\timageComponentIndex > -1 &&\n\t\t\tlocalTemplate?.components[imageComponentIndex]\n\t\t) {\n\t\t\tconst updatedComponent: WhatsAppTemplate['components'][0] = {\n\t\t\t\t...localTemplate.components[imageComponentIndex],\n\t\t\t\tformat,\n\t\t\t\texample: {\n\t\t\t\t\theader_handle: [url],\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst components = [...localTemplate.components];\n\t\t\tcomponents[imageComponentIndex] = updatedComponent;\n\t\t\tlocalTemplate = { ...localTemplate, components };\n\t\t}\n\n\t\tif (localTemplate.mapping) {\n\t\t\tlocalTemplate.mapping = {\n\t\t\t\t...localTemplate.mapping,\n\t\t\t\theader: undefined,\n\t\t\t};\n\t\t}\n\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = localTemplate.components;\n\t\t\tif (\n\t\t\t\ttemplateCopy?.mapping?.cards &&\n\t\t\t\ttemplateCopy?.mapping?.cards.length > 0\n\t\t\t) {\n\t\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\t\tlocalTemplate.mapping ?? {};\n\t\t\t}\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t\tsetHasNewImageUpload(true);\n\t\t} else {\n\t\t\tonTemplateChange?.({ ...localTemplate });\n\t\t}\n\t}\n\n\tfunction updateSelectedTemplateURLBtn(\n\t\tval: CTABtnValType,\n\t\tmode: 'custom' | 'placeholder',\n\t\tbtnIndex: number,\n\t) {\n\t\tconst tempCopy =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t  }\n\t\t\t\t: { ...template };\n\t\tconst selectedTemplate = cloneDeep(tempCopy);\n\n\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\tconst customValue = isCustom\n\t\t\t? val\n\t\t\t: typeof val !== 'string'\n\t\t\t? val.defaultValue\n\t\t\t\t? val.defaultValue\n\t\t\t\t: 'https://d.bik.ai/'\n\t\t\t: 'https://d.bik.ai';\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\t\t\tconst ctaBtns = card.buttons?.filter(\n\t\t\t\t\t\t\t\t\t\t\t(btn) => btn.type === 'URL',\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tlet currentButton: any = ctaBtns?.[btnIndex] ?? {};\n\t\t\t\t\t\t\t\t\t\tcurrentButton = {\n\t\t\t\t\t\t\t\t\t\t\t...currentButton,\n\t\t\t\t\t\t\t\t\t\t\turl: 'https://d.bik.ai/{{1}}',\n\t\t\t\t\t\t\t\t\t\t\texample: [customValue],\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst newButtonList = card.buttons?.map((btn) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tbtn.type === 'URL' &&\n\t\t\t\t\t\t\t\t\t\t\t\tbtn?.text === currentButton?.text\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn btn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst mappingButtonsComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.mapping?.cards?.map((card) => {\n\t\t\t\treturn {\n\t\t\t\t\t...card,\n\t\t\t\t\tbuttons: card?.buttons?.map((button, index: number) => {\n\t\t\t\t\t\tif (index === btnIndex) {\n\t\t\t\t\t\t\treturn isCustom\n\t\t\t\t\t\t\t\t? '((customBtnPlaceholder))'\n\t\t\t\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t\t\t\t? val.placeHolder\n\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn button;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t});\n\t\t\tconst newTemplate = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\tnewTemplate.components = newComponent as any;\n\t\t\tnewTemplate.mapping.cards = mappingButtonsComponent;\n\t\t\tonTemplateChange?.({ ...newTemplate });\n\t\t\treturn;\n\t\t}\n\n\t\tconst btnComponentIndex = selectedTemplate?.components.findIndex(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\n\t\tif (typeof btnComponentIndex !== 'undefined' && btnComponentIndex > -1) {\n\t\t\tconst ctaBtns = selectedTemplate?.components[\n\t\t\t\tbtnComponentIndex\n\t\t\t].buttons?.filter((btn) => btn.type === 'URL');\n\n\t\t\tif (ctaBtns?.length > 0) {\n\t\t\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\t\t\tconst customValue = isCustom\n\t\t\t\t\t? val\n\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t? val.defaultValue\n\t\t\t\t\t\t? val.defaultValue\n\t\t\t\t\t\t: 'https://d.bik.ai/'\n\t\t\t\t\t: 'https://d.bik.ai/';\n\n\t\t\t\tlet currentButton = ctaBtns[btnIndex];\n\t\t\t\tcurrentButton = {\n\t\t\t\t\t...currentButton,\n\t\t\t\t\turl: 'https://d.bik.ai/{{1}}',\n\t\t\t\t\texample: [customValue],\n\t\t\t\t};\n\n\t\t\t\tconst buttons = [\n\t\t\t\t\t...(selectedTemplate.components?.[btnComponentIndex]?.buttons ?? []),\n\t\t\t\t];\n\t\t\t\tconst newButtonList = buttons.map((btn) => {\n\t\t\t\t\tif (btn.type === 'URL' && btn?.text === currentButton?.text) {\n\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn btn;\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tconst btnComponent = {\n\t\t\t\t\t...selectedTemplate.components[btnComponentIndex],\n\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t};\n\n\t\t\t\tconst mappingButtons = selectedTemplate.mapping?.buttons;\n\n\t\t\t\tif (mappingButtons && mappingButtons.length > 0) {\n\t\t\t\t\tmappingButtons[btnIndex] = isCustom\n\t\t\t\t\t\t? '((customBtnPlaceholder))'\n\t\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t\t? val.placeHolder\n\t\t\t\t\t\t: '';\n\t\t\t\t}\n\n\t\t\t\tconst mapping = {\n\t\t\t\t\t...selectedTemplate.mapping,\n\t\t\t\t\tbuttons: mappingButtons,\n\t\t\t\t};\n\n\t\t\t\tselectedTemplate.mapping = mapping;\n\t\t\t\tconst components = [...selectedTemplate.components];\n\t\t\t\tcomponents[btnComponentIndex] = btnComponent;\n\t\t\t\tselectedTemplate.components = components;\n\t\t\t}\n\t\t}\n\n\t\tif (typeof val !== 'string') {\n\t\t\tconst discountCheckBoxEnabled =\n\t\t\t\tval.placeHolder?.slice(2, -2) === 'checkout.checkoutUrl';\n\t\t\tif (discountCheckBoxEnabled) {\n\t\t\t\tsetShowDiscountCheckBox(true);\n\t\t\t} else {\n\t\t\t\tsetShowDiscountCheckBox(false);\n\t\t\t\tsetDiscountCode?.('');\n\t\t\t}\n\t\t}\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = selectedTemplate.components;\n\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\tselectedTemplate.mapping!;\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t} else {\n\t\t\tonTemplateChange?.(selectedTemplate as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tfunction updateSelectedTemplateQRBBtn(\n\t\tval: QRBBtnValType,\n\t\tmode: 'custom' | 'placeholder',\n\t\tbtnIndex: number,\n\t) {\n\t\tconst selectedTemplate =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t  }\n\t\t\t\t: { ...template };\n\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\t\t\tconst qrbButtons = card?.buttons?.filter(\n\t\t\t\t\t\t\t\t\t\t\t(btn) => btn.type === 'QUICK_REPLY',\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tlet currentButton: any = qrbButtons?.[btnIndex] ?? {};\n\t\t\t\t\t\t\t\t\t\tcurrentButton = {\n\t\t\t\t\t\t\t\t\t\t\t...currentButton,\n\t\t\t\t\t\t\t\t\t\t\tflowId: val.flowId,\n\t\t\t\t\t\t\t\t\t\t\tflowName: val.flowName,\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst newButtonList = card?.buttons?.map((btn) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tbtn.type === 'QUICK_REPLY' &&\n\t\t\t\t\t\t\t\t\t\t\t\tbtn?.text === currentButton?.text\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn btn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst newTemplate = cloneDeep(template);\n\t\t\tnewTemplate.components = newComponent as any;\n\t\t\tonTemplateChange?.({ ...newTemplate });\n\t\t\treturn;\n\t\t}\n\n\t\tconst btnComponentIndex = selectedTemplate?.components.findIndex(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\t\tif (typeof btnComponentIndex !== 'undefined' && btnComponentIndex > -1) {\n\t\t\tconst qrbButtons = selectedTemplate?.components[\n\t\t\t\tbtnComponentIndex\n\t\t\t]?.buttons?.filter((btn) => btn.type === 'QUICK_REPLY');\n\n\t\t\tif (qrbButtons) {\n\t\t\t\tlet currentButton = qrbButtons[btnIndex];\n\t\t\t\tcurrentButton = {\n\t\t\t\t\t...currentButton,\n\t\t\t\t\tflowId: val.flowId,\n\t\t\t\t\tflowName: val.flowName,\n\t\t\t\t};\n\n\t\t\t\tconst buttons = [\n\t\t\t\t\t...(selectedTemplate.components?.[btnComponentIndex]?.buttons ?? []),\n\t\t\t\t];\n\n\t\t\t\tconst newButtonList = buttons.map((btn) => {\n\t\t\t\t\tif (btn.type === 'QUICK_REPLY' && btn?.text === currentButton?.text) {\n\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn btn;\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tconst btnComponent = {\n\t\t\t\t\t...selectedTemplate.components[btnComponentIndex],\n\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t};\n\t\t\t\tconst components = [...selectedTemplate.components];\n\t\t\t\tcomponents[btnComponentIndex] = btnComponent;\n\t\t\t\tselectedTemplate.components = components;\n\t\t\t}\n\t\t}\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = selectedTemplate.components;\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t} else {\n\t\t\tonTemplateChange?.(selectedTemplate as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tconst validatePdfName = () => {\n\t\tif (!enteredPdf) {\n\t\t\tsetFileName?.('');\n\t\t\tsetPdfInputError('PDF name is Required');\n\t\t\treturn;\n\t\t}\n\t\tconst isValid = validateInputName(enteredPdf);\n\t\tsetFileName?.(enteredPdf);\n\n\t\tif (isValid) {\n\t\t\tsetPdfInputError('Please enter a valid PDF name');\n\t\t\treturn;\n\t\t}\n\t\tsetPdfInputError(undefined);\n\t};\n\n\tconst validatePdfNameChatbot = () => {\n\t\tif (!fileName) {\n\t\t\tsetPdfInputError('PDF name is Required');\n\t\t\treturn;\n\t\t}\n\t\tconst isInvalid = validateInputNameChatbot(fileName);\n\n\t\tsetFileName?.(fileName ?? '');\n\t\tif (isInvalid) {\n\t\t\tsetPdfInputError('Please enter a valid PDF name');\n\t\t\treturn;\n\t\t}\n\t\tsetPdfInputError(undefined);\n\t};\n\n\tuseEffect(() => {\n\t\tif (isError && pod === POD.CHATBOT) {\n\t\t\tvalidatePdfNameChatbot();\n\t\t}\n\t}, [isError]);\n\n\tconst _mediaComponent = !isCarouselType\n\t\t? imageComponent\n\t\t: templateComponentData.imageComponent;\n\n\tif (useEditWhatsappTemplateMediaResponse.openEditMedia) {\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tstyle={{\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\twidth: 400,\n\t\t\t\t\tmaxHeight: 460,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EditMediaModal\n\t\t\t\t\tmediaComponentFormat={_mediaComponent.format ?? HEADER_TYPES.IMAGE}\n\t\t\t\t\tuploadMedia={useEditWhatsappTemplateMediaResponse.uploadMedia}\n\t\t\t\t\tvariableListForImage={variableListForImage || []}\n\t\t\t\t\tuseEditWhatsappTemplateMediaResponse={\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse\n\t\t\t\t\t}\n\t\t\t\t\tsetOpenEditMedia={\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setOpenEditMedia\n\t\t\t\t\t}\n\t\t\t\t\topenEditMedia={useEditWhatsappTemplateMediaResponse.openEditMedia}\n\t\t\t\t\teditIconRef={useEditWhatsappTemplateMediaResponse.editIconRef}\n\t\t\t\t\tfileRef={fileRef}\n\t\t\t\t/>\n\t\t\t</Container>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Container\n\t\t\tstyle={{\n\t\t\t\tflexDirection: 'column',\n\t\t\t\twidth: 400,\n\t\t\t\tmaxHeight: 460,\n\t\t\t\tminWidth: isProductCarouselType ? '420px' : 'auto',\n\t\t\t}}\n\t\t>\n\t\t\t{!!templateComponentData.imageComponent &&\n\t\t\t\t!isProductCarouselType &&\n\t\t\t\t!isRCSChannel(template?.channel) && (\n\t\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\t\timageName={_mediaComponent?.example?.header_handle ?? []}\n\t\t\t\t\t\t\thandleImageChange={\n\t\t\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.handleImageChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmediaType={_mediaComponent?.format}\n\t\t\t\t\t\t\terror={useEditWhatsappTemplateMediaResponse.error}\n\t\t\t\t\t\t\tisLoading={useEditWhatsappTemplateMediaResponse.loading}\n\t\t\t\t\t\t\tsetOpenEditMedia={\n\t\t\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setOpenEditMedia\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tselectedVariable={\n\t\t\t\t\t\t\t\tisVariable(_mediaComponent?.example?.header_handle?.[0] ?? '')\n\t\t\t\t\t\t\t\t\t? _mediaComponent?.example?.header_handle?.[0]\n\t\t\t\t\t\t\t\t\t: template?.mapping?.header?.[0]\n\t\t\t\t\t\t\t\t\t? template?.mapping?.header?.[0]\n\t\t\t\t\t\t\t\t\t: useEditWhatsappTemplateMediaResponse.selectedVariable\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{imageComponent?.['format'] == HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t\t<PdfContainer>\n\t\t\t\t\t\t\t\t{pod === POD.CHATBOT ? (\n\t\t\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\t\t\tlabelText=\"PDF Name\"\n\t\t\t\t\t\t\t\t\t\tplaceHolder={'Enter the name'}\n\t\t\t\t\t\t\t\t\t\terrorMessage={pdfInputError ? pdfInputError : undefined}\n\t\t\t\t\t\t\t\t\t\tonChange={(name) => {\n\t\t\t\t\t\t\t\t\t\t\tsetPdfInputError('');\n\t\t\t\t\t\t\t\t\t\t\tsetFileName?.(name?.actualValue ?? '');\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\t\t\tallowMix={true}\n\t\t\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\t\t\tprevVariable={{\n\t\t\t\t\t\t\t\t\t\t\tactualValue: fileName ?? '',\n\t\t\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\t\t\tshowAddButton={true}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tlabelText=\"PDF Name\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Enter the name\"\n\t\t\t\t\t\t\t\t\t\tvalue={enteredPdf}\n\t\t\t\t\t\t\t\t\t\terrorMessage={pdfInputError ? pdfInputError : undefined}\n\t\t\t\t\t\t\t\t\t\tonBlur={validatePdfName}\n\t\t\t\t\t\t\t\t\t\tonChangeText={(name) => {\n\t\t\t\t\t\t\t\t\t\t\tsetPdfInputError('');\n\t\t\t\t\t\t\t\t\t\t\tsetEnteredPdf(name);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</PdfContainer>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t\t)}\n\n\t\t\t{templateComponentData.bodyVariables?.length > 0 && (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tpaddingTop: templateComponentData.mediaComponent ? 24 : 8,\n\t\t\t\t\t}}\n\t\t\t\t\theaderText={'Edit variable values'}\n\t\t\t\t\tsubText={'Edit values for the variables used in template'}\n\t\t\t\t\ttoolTipInfo={\n\t\t\t\t\t\t'Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below'\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{templateComponentData.descriptionComponents?.map(\n\t\t\t\t(descriptionComponent, i) => (\n\t\t\t\t\t<VariableConnectorWhatsApp\n\t\t\t\t\t\toriginalVariableList={\n\t\t\t\t\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables)\n\t\t\t\t\t\t\t\t\t\t.cards[selectedCarouselIndex]\n\t\t\t\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttype={descriptionComponent.type}\n\t\t\t\t\t\tdescriptionComponent={descriptionComponent.component}\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)?.filter((btn) => btn.type === 'URL')?.length > 0 && (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\theaderText={'Edit buttons'}\n\t\t\t\t\tsubText={'Edit the link connected to the CTA button'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)\n\t\t\t\t?.filter((btn) => (pod !== POD.CHATBOT ? btn.type === 'URL' : true))\n\t\t\t\t?.map((btn, i) => {\n\t\t\t\t\tconst isStaticUrl = btn.buttonVariable === STATIC_URL_VARIABLE_NAME;\n\t\t\t\t\tconst isUnsubscribeUrl =\n\t\t\t\t\t\tbtn.buttonVariable === UNSUBSCRIBE_URL_VARIABLE;\n\t\t\t\t\tif (btn.type === 'URL') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\t\t\tdisableEdit={isStaticUrl || isUnsubscribeUrl}\n\t\t\t\t\t\t\t\tCTAoptions={\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.CTAoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\t\t\tkey={`${i}_${selectedCarouselIndex}`}\n\t\t\t\t\t\t\t\tcurrentVariableList={\n\t\t\t\t\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\t\t\t\t\tselectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t...(\n\t\t\t\t\t\t\t\t\t\t\t\t\toriginalVariableList as WhatsAppCarouselTemplateVariables\n\t\t\t\t\t\t\t\t\t\t\t\t).cards[selectedCarouselIndex],\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: { ...(originalVariableList as WhatsAppTemplateVariables) }\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tupdateSelectedURLTemplateBtn={\n\t\t\t\t\t\t\t\t\tupdateSelectedTemplateURLBtn as URLBtnUpdateFunctionType\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\n\t\t\t{/* If pod is chatbot and qrb button is there, Backtrack should be present */}\n\t\t\t{pod === POD.CHATBOT &&\n\t\t\t\tqrbBtns[0]?.component?.buttons &&\n\t\t\t\tqrbBtns[0]?.component?.buttons?.length > 0 && (\n\t\t\t\t\t<BackTrackComponent\n\t\t\t\t\t\tbackTrackMessage={extras?.backTrackExtra?.[0]}\n\t\t\t\t\t\tsetBackTrackMessage={extras?.backTrackExtra?.[1]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t{!isRCSChannel(template?.channel) &&\n\t\t\t\t(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t  ]?.buttons\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t\t)?.filter((btn) => btn.type === 'QUICK_REPLY')?.length > 0 &&\n\t\t\t\t(pod !== POD.CHATBOT ? (\n\t\t\t\t\t<VariableEditorHeader\n\t\t\t\t\t\theaderText={'Edit buttons'}\n\t\t\t\t\t\tsubText={'Edit the chatflows triggered on clicking  the buttons'}\n\t\t\t\t\t\ttoolTipInfo={\n\t\t\t\t\t\t\t'There is an option to trigger chatflows through the buttons which can keep the user engaged'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BackTrackComponent\n\t\t\t\t\t\tbackTrackMessage={extras?.backTrackExtra?.[0]}\n\t\t\t\t\t\tsetBackTrackMessage={extras?.backTrackExtra?.[1]}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t{!isRCSChannel(template?.channel) &&\n\t\t\t\t(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t  ]?.buttons\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t\t)\n\t\t\t\t\t?.filter((btn) => btn.type === 'QUICK_REPLY')\n\t\t\t\t\t?.map((btn, i) => {\n\t\t\t\t\t\tif (btn.type === 'QUICK_REPLY' && pod !== POD.CHATBOT) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\t\t\t\tQRBoptions={\n\t\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.QRBoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\t\t\t\tkey={`${i}_${selectedCarouselIndex}`}\n\t\t\t\t\t\t\t\t\tcurrentVariableList={\n\t\t\t\t\t\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\t\t\t\t\t\tselectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\toriginalVariableList as WhatsAppCarouselTemplateVariables\n\t\t\t\t\t\t\t\t\t\t\t\t\t).cards[selectedCarouselIndex],\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...(originalVariableList as WhatsAppTemplateVariables),\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tupdateSelectedQRBTemplateBtn={\n\t\t\t\t\t\t\t\t\t\tupdateSelectedTemplateQRBBtn as QRBBtnUpdateFunctionType\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})}\n\t\t\t{pod === POD.CHATBOT && showDiscountCheckBox && (\n\t\t\t\t<DiscountCodeComponent\n\t\t\t\t\tdiscountCode={extras?.discountCodeExtra?.[0]}\n\t\t\t\t\tsetDiscountCode={extras?.discountCodeExtra?.[1]}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)?.map((button, i) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{disableCopyCode ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tmarginBottom: 20,\n\t\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\t\tpadding: '8px 10px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tstate={'disabled'}\n\t\t\t\t\t\t\t\t\t\tlabelText={button.text ?? 'Copy Code'}\n\t\t\t\t\t\t\t\t\t\tvalue={button.buttonVariable ?? ''}\n\t\t\t\t\t\t\t\t\t\tonChangeText={() => {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<VariableConnector\n\t\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\t\tvariable={{\n\t\t\t\t\t\t\t\t\t\tvariableName: button.text ?? 'Copy Code',\n\t\t\t\t\t\t\t\t\t\tupdatedValue: button.buttonVariable ?? '',\n\t\t\t\t\t\t\t\t\t\ttype: 'string',\n\t\t\t\t\t\t\t\t\t\tisEditableVariable: true,\n\t\t\t\t\t\t\t\t\t\tindex: button.index ?? 0, // this index is respect to components -> buttons\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\tshowVariableModal={true}\n\t\t\t\t\t\t\t\t\tcomponentType={'BUTTONS'}\n\t\t\t\t\t\t\t\t\tbuttonType={button.type}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</Container>\n\t);\n};\n\nexport default EditWhatsAppTemplateV2;\n\nconst PdfContainer = styled.div`\n\tpadding-top: 24px;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tmargin-bottom: 8px;\n\tline-height: normal;\n`;\n"],"names":["EditWhatsAppTemplateV2","template","onTemplateChange","whatsappSpecificPickerMeta","showVariableModal","variableListForImage","setDiscountCode","fileName","setFileName","isCarouselType","originalVariableList","pod","extras","selectedCarouselIndex","isProductCarouselType","disableCopyCode","isError","cardIndex","useTemplateModalContext","descriptionComponents","urlBtns","qrbBtns","imageComponent","bodyVariables","headerVariables","titleVariables","getAllDataFromTemplateComponent","fileRef","useRef","showDiscountCheckBox","setShowDiscountCheckBox","useState","templateComponentData","setTemplateComponentData","uploadMediaLink","uploadMediaFiles","validateMimeType","useEditWhatsappTemplateMediaResponse","useEditWhatsappTemplateMedia","updateTemplateImageUrl","hasNewImageUpload","setHasNewImageUpload","enteredPdf","setEnteredPdf","pdfInputError","setPdfInputError","useEffect","button","currentCarousel","mediaComponent","url","format","localTemplate","imageComponentIndex","component","updatedComponent","components","templateCopy","cloneDeep","updateSelectedTemplateURLBtn","val","mode","btnIndex","tempCopy","selectedTemplate","isCustom","customValue","newComponent","isCarouselComponent","cardComponent","card","currentButton","btn","newButtonList","mappingButtonsComponent","index","newTemplate","btnComponentIndex","ctaBtns","btnComponent","mappingButtons","mapping","updateSelectedTemplateQRBBtn","qrbButtons","validatePdfName","isValid","validateInputName","validatePdfNameChatbot","isInvalid","validateInputNameChatbot","POD","_mediaComponent","jsx","Container","EditMediaModal","HEADER_TYPES","jsxs","isRCSChannel","EditTemplateMediaContainer","EditMediaV2","isVariable","PdfContainer","InputWithVariables","name","PickerType","Input","Fragment","VariableEditorHeader","descriptionComponent","i","VariableConnectorWhatsApp","isStaticUrl","STATIC_URL_VARIABLE_NAME","isUnsubscribeUrl","UNSUBSCRIBE_URL_VARIABLE","WhatsAppTemplateCardButtonV2","BackTrackComponent","DiscountCodeComponent","VariableConnector","styled"],"mappings":"8rCA2EMA,GAAyB,CAAC,CAC/B,SAAAC,EACA,iBAAAC,EACA,2BAAAC,EACA,kBAAAC,GACA,qBAAAC,EACA,gBAAAC,GACA,SAAAC,EACA,YAAAC,CACD,IAAmC,CAClC,MAAMC,EAAkBR,EAAsC,eACxD,CACL,qBAAAS,EACA,IAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,gBAAAC,GACA,QAAAC,EACA,UAAAC,CAAA,EACGC,2BAAA,EACE,CACL,sBAAAC,GACA,QAAAC,GACA,QAAAC,EACA,eAAAC,EACA,cAAAC,GACA,gBAAAC,GACA,eAAAC,EAAA,EACGC,EAAAA,gCAAgCzB,CAA4B,EAE1D0B,EAAUC,EAAAA,OAAyB,IAAI,EAEvC,CAACC,GAAsBC,CAAuB,EACnDC,EAAAA,SAAkB,EAAK,EAClB,CAACC,EAAuBC,CAAwB,EAAIF,EAAAA,SACzDlB,IAA0B,GACvB,CACA,sBAAAM,GACA,QAAAC,GACA,QAAAC,EACA,eAAAC,EACA,cAAAC,GACA,gBAAAC,GACA,eAAAC,EAAA,EAEA,CAAA,CAAC,EAGC,CAAE,gBAAAS,GAAiB,iBAAAC,GAAkB,iBAAAC,EAAA,EAC1CjC,EAEKkC,EAAuCC,GAAAA,6BAA6B,CACzE,gBAAAJ,GACA,iBAAAC,GACA,uBAAAI,GACA,iBAAAH,GACA,eAAiB3B,EAEduB,EAAsB,eADtBV,EAEH,QAAAK,CAAA,CACA,EAEK,CAACa,EAAmBC,CAAoB,EAAIV,EAAAA,SAAkB,EAAK,EACnE,CAACW,EAAYC,EAAa,EAAIZ,EAAAA,SAASxB,CAAQ,EAC/C,CAACqC,EAAeC,CAAgB,EAAId,WAAA,EAM1Ce,EAAAA,UAAU,IAAM,CAIf,GAHgC7C,EAAS,QAAQ,SAAS,KACxD8C,GAAWA,EAAO,MAAM,EAAG,EAAE,IAAM,sBAAA,EAGpCjB,EAAwB,EAAI,MACtB,CACNA,EAAwB,EAAK,EAC7B,MAAMxB,EAAkBM,GAAQ,oBAAoB,CAAC,EACrDN,IAAkB,EAAE,CACrB,CACD,EAAG,CAACL,CAAQ,CAAC,EAEb6C,EAAAA,UAAU,IAAM,CACf,GAAIjC,GAAyB,MAAaA,EAAwB,GAAI,CACrE,MAAMmC,EAAkB,CACvB,WAAa/C,EAAsC,WAAWgB,CAAS,GACpE,QAAQJ,CAAqB,EAAE,WAClC,QAAUZ,GAAuC,SAAS,QACzDY,CACD,CAAA,EAEK,CACL,sBAAAM,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,CAAA,EACGC,EAAAA,gCAAgCsB,CAAmC,EAEvEf,EAAyB,CACxB,sBAAAd,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,CAAA,CACA,CACF,SACCZ,GAAyB,MACzBA,IAA0B,GACzB,CACD,KAAM,CACL,sBAAAM,EACA,QAAAC,EACA,QAAAC,EACA,eAAgB4B,EAChB,cAAA1B,EACA,gBAAAC,EACA,eAAAC,CAAA,EACGC,EAAAA,gCAAgCzB,CAA4B,EAChEgC,EAAyB,CACxB,sBAAAd,EACA,QAAAC,EACA,QAAAC,EACA,eAAgB4B,EAChB,cAAA1B,EACA,gBAAAC,EACA,eAAAC,CAAA,CACA,CACF,CACD,EAAG,CAACZ,CAAqB,CAAC,EAE1BiC,EAAAA,UAAU,IAAM,CACf,GACCjC,GAAyB,MACzBA,EAAwB,IACxB2B,EACC,CACD,MAAMQ,EAAkB,CACvB,WAAa/C,EAAsC,WAAWgB,CAAS,GACpE,QAAQJ,CAAqB,EAAE,WAClC,QAAUZ,GAAuC,SAAS,QACzDY,CACD,CAAA,EAEK,CACL,sBAAAM,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,CAAA,EACGC,EAAAA,gCAAgCsB,CAAmC,EAEvEf,EAAyB,CACxB,sBAAAd,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,CAAA,CACA,EACDgB,EAAqB,EAAK,CAC3B,CACD,EAAG,CAACD,CAAiB,CAAC,EAEtB,SAASD,GACRW,EACAC,EACC,CACD,IAAIC,EACAvC,GAAyB,MAAaA,EAAwB,GACjEuC,EAAgB,CACf,WAAanD,EAAsC,WAAWgB,CAAS,GACpE,QAAQJ,CAAqB,EAAE,WAClC,QAAUZ,GAAuC,SAAS,QACzDY,CACD,CAAA,EAGDuC,EAAgB,CAAE,GAAGnD,CAAA,EAGtB,MAAMoD,EAAsBD,GAAe,YAAY,UACrDE,GAAc,CACd,GACCA,EAAU,OAAS,UACnBA,EAAU,SAAW,QACrBA,EAAU,SAAW,OAErB,MAAO,EAET,CAAA,EAGD,GACC,OAAOD,EAAwB,KAC/BA,EAAsB,IACtBD,GAAe,WAAWC,CAAmB,EAC5C,CACD,MAAME,EAAsD,CAC3D,GAAGH,EAAc,WAAWC,CAAmB,EAC/C,OAAAF,EACA,QAAS,CACR,cAAe,CAACD,CAAG,CAAA,CACpB,EAGKM,EAAa,CAAC,GAAGJ,EAAc,UAAU,EAC/CI,EAAWH,CAAmB,EAAIE,EAClCH,EAAgB,CAAE,GAAGA,EAAe,WAAAI,CAAA,CACrC,CASA,GAPIJ,EAAc,UACjBA,EAAc,QAAU,CACvB,GAAGA,EAAc,QACjB,OAAQ,MAAA,GAINvC,GAAyB,MAAaA,EAAwB,GAAI,CACrE,MAAM4C,EAAeC,EAAUzD,CAAoC,EACnEwD,EAAa,WAAWxC,CAAS,EAAE,MAClCJ,CACD,EAAE,WAAauC,EAAc,WAE5BK,GAAc,SAAS,OACvBA,GAAc,SAAS,MAAM,OAAS,IAEtCA,EAAa,QAAQ,MAAO5C,CAAqB,EAChDuC,EAAc,SAAW,CAAA,GAE3BlD,IAAmB,CAAE,GAAGuD,EAAc,EACtChB,EAAqB,EAAI,CAC1B,MACCvC,IAAmB,CAAE,GAAGkD,EAAe,CAEzC,CAEA,SAASO,GACRC,EACAC,EACAC,EACC,CACD,MAAMC,EACLlD,GAAyB,MAAaA,EAAwB,GAC3D,CACA,WAAa,CAAE,GAAGZ,GAChB,WAAWgB,CAAS,EAAE,QAAQJ,CAAqB,EACnD,WACF,QAAU,CAAE,GAAGZ,GAAwC,QACrD,QAAQY,CAAqB,CAAA,EAE/B,CAAE,GAAGZ,CAAA,EACH+D,EAAmBN,EAAUK,CAAQ,EAErCE,EAAWJ,IAAS,UAAY,OAAOD,GAAQ,SAC/CM,EAAcD,EACjBL,EACA,OAAOA,GAAQ,SACfA,EAAI,aACHA,EAAI,aACJ,oBACD,mBACH,GACC/C,GAAyB,MACzBA,EAAwB,IACxBC,EACC,CACD,MAAMqD,EAAe,CACpB,GAAIlE,CAAA,EACH,WAAW,IAAKqD,GACbc,EAAAA,oBAAoBd,EAAU,IAAI,EAC9B,CACN,GAAGA,EACH,MAAOA,EAAU,OAAO,IAAKe,IACrB,CACN,GAAGA,EACH,WAAYA,EAAc,WAAW,IAAKC,GAAS,CAClD,GAAIA,EAAK,OAAS,UAAW,CAK5B,IAAIC,EAJYD,EAAK,SAAS,OAC5BE,GAAQA,EAAI,OAAS,KAAA,IAGYV,CAAQ,GAAK,CAAA,EAChDS,EAAgB,CACf,GAAGA,EACH,IAAK,yBACL,QAAS,CAACL,CAAW,CAAA,EAGtB,MAAMO,EAAgBH,EAAK,SAAS,IAAKE,GAEvCA,EAAI,OAAS,OACbA,GAAK,OAASD,GAAe,KAEtBA,EAEAC,CAER,EACD,MAAO,CACN,GAAGF,EACH,QAASG,CAAA,CAEX,KACC,QAAOH,CAET,CAAC,CAAA,EAEF,CAAA,EAGKhB,CAER,EACKoB,EAA0B,CAC/B,GAAIzE,CAAA,EACH,SAAS,OAAO,IAAKqE,IACf,CACN,GAAGA,EACH,QAASA,GAAM,SAAS,IAAI,CAACvB,EAAQ4B,IAChCA,IAAUb,EACNG,EACJ,2BACA,OAAOL,GAAQ,SACfA,EAAI,YACJ,GAEGb,CACP,CAAA,EAEF,EACK6B,EAAclB,EAAUzD,CAAoC,EAClE2E,EAAY,WAAaT,EACzBS,EAAY,QAAQ,MAAQF,EAC5BxE,IAAmB,CAAE,GAAG0E,EAAa,EACrC,MACD,CAEA,MAAMC,EAAoBb,GAAkB,WAAW,UACrDV,GAAcA,EAAU,OAAS,SAAA,EAGnC,GAAI,OAAOuB,EAAsB,KAAeA,EAAoB,GAAI,CACvE,MAAMC,EAAUd,GAAkB,WACjCa,CACD,EAAE,SAAS,OAAQL,GAAQA,EAAI,OAAS,KAAK,EAE7C,GAAIM,GAAS,OAAS,EAAG,CACxB,MAAMb,EAAWJ,IAAS,UAAY,OAAOD,GAAQ,SAC/CM,EAAcD,EACjBL,EACA,OAAOA,GAAQ,UACfA,EAAI,aACHA,EAAI,aAEL,oBAEH,IAAIW,EAAgBO,EAAQhB,CAAQ,EACpCS,EAAgB,CACf,GAAGA,EACH,IAAK,yBACL,QAAS,CAACL,CAAW,CAAA,EAMtB,MAAMO,EAHU,CACf,GAAIT,EAAiB,aAAaa,CAAiB,GAAG,SAAW,CAAA,CAAC,EAErC,IAAKL,GAC9BA,EAAI,OAAS,OAASA,GAAK,OAASD,GAAe,KAC/CA,EAEAC,CAER,EAEKO,EAAe,CACpB,GAAGf,EAAiB,WAAWa,CAAiB,EAChD,QAASJ,CAAA,EAGJO,EAAiBhB,EAAiB,SAAS,QAE7CgB,GAAkBA,EAAe,OAAS,IAC7CA,EAAelB,CAAQ,EAAIG,EACxB,2BACA,OAAOL,GAAQ,SACfA,EAAI,YACJ,IAGJ,MAAMqB,EAAU,CACf,GAAGjB,EAAiB,QACpB,QAASgB,CAAA,EAGVhB,EAAiB,QAAUiB,EAC3B,MAAMzB,EAAa,CAAC,GAAGQ,EAAiB,UAAU,EAClDR,EAAWqB,CAAiB,EAAIE,EAChCf,EAAiB,WAAaR,CAC/B,CACD,CAYA,GAVI,OAAOI,GAAQ,WAEjBA,EAAI,aAAa,MAAM,EAAG,EAAE,IAAM,uBAElC9B,EAAwB,EAAI,GAE5BA,EAAwB,EAAK,EAC7BxB,KAAkB,EAAE,IAGlBO,GAAyB,MAAaA,EAAwB,GAAI,CACrE,MAAM4C,EAAeC,EAAUzD,CAAoC,EACnEwD,EAAa,WAAWxC,CAAS,EAAE,MAClCJ,CACD,EAAE,WAAamD,EAAiB,WAChCP,EAAa,QAAQ,MAAO5C,CAAqB,EAChDmD,EAAiB,QAClB9D,IAAmB,CAAE,GAAGuD,EAAc,CACvC,MACCvD,IAAmB8D,CAAoC,CAEzD,CAEA,SAASkB,GACRtB,EACAC,EACAC,EACC,CACD,MAAME,EACLnD,GAAyB,MAAaA,EAAwB,GAC3D,CACA,WAAa,CAAE,GAAGZ,GAChB,WAAWgB,CAAS,EAAE,QAAQJ,CAAqB,EACnD,WACF,QAAU,CAAE,GAAGZ,GAAwC,QACrD,QAAQY,CAAqB,CAAA,EAE/B,CAAE,GAAGZ,CAAA,EAET,GACCY,GAAyB,MACzBA,EAAwB,IACxBC,EACC,CACD,MAAMqD,EAAe,CACpB,GAAIlE,CAAA,EACH,WAAW,IAAKqD,GACbc,EAAAA,oBAAoBd,EAAU,IAAI,EAC9B,CACN,GAAGA,EACH,MAAOA,EAAU,OAAO,IAAKe,IACrB,CACN,GAAGA,EACH,WAAYA,EAAc,WAAW,IAAKC,GAAS,CAClD,GAAIA,EAAK,OAAS,UAAW,CAK5B,IAAIC,EAJeD,GAAM,SAAS,OAChCE,GAAQA,EAAI,OAAS,aAAA,IAGeV,CAAQ,GAAK,CAAA,EACnDS,EAAgB,CACf,GAAGA,EACH,OAAQX,EAAI,OACZ,SAAUA,EAAI,QAAA,EAGf,MAAMa,EAAgBH,GAAM,SAAS,IAAKE,GAExCA,EAAI,OAAS,eACbA,GAAK,OAASD,GAAe,KAEtBA,EAEAC,CAER,EACD,MAAO,CACN,GAAGF,EACH,QAASG,CAAA,CAEX,KACC,QAAOH,CAET,CAAC,CAAA,EAEF,CAAA,EAGKhB,CAER,EACKsB,EAAclB,EAAUzD,CAAQ,EACtC2E,EAAY,WAAaT,EACzBjE,IAAmB,CAAE,GAAG0E,EAAa,EACrC,MACD,CAEA,MAAMC,EAAoBb,GAAkB,WAAW,UACrDV,GAAcA,EAAU,OAAS,SAAA,EAEnC,GAAI,OAAOuB,EAAsB,KAAeA,EAAoB,GAAI,CACvE,MAAMM,EAAanB,GAAkB,WACpCa,CACD,GAAG,SAAS,OAAQL,GAAQA,EAAI,OAAS,aAAa,EAEtD,GAAIW,EAAY,CACf,IAAIZ,EAAgBY,EAAWrB,CAAQ,EACvCS,EAAgB,CACf,GAAGA,EACH,OAAQX,EAAI,OACZ,SAAUA,EAAI,QAAA,EAOf,MAAMa,EAJU,CACf,GAAIT,EAAiB,aAAaa,CAAiB,GAAG,SAAW,CAAA,CAAC,EAGrC,IAAKL,GAC9BA,EAAI,OAAS,eAAiBA,GAAK,OAASD,GAAe,KACvDA,EAEAC,CAER,EAEKO,EAAe,CACpB,GAAGf,EAAiB,WAAWa,CAAiB,EAChD,QAASJ,CAAA,EAEJjB,EAAa,CAAC,GAAGQ,EAAiB,UAAU,EAClDR,EAAWqB,CAAiB,EAAIE,EAChCf,EAAiB,WAAaR,CAC/B,CACD,CACA,GAAI3C,GAAyB,MAAaA,EAAwB,GAAI,CACrE,MAAM4C,EAAeC,EAAUzD,CAAoC,EACnEwD,EAAa,WAAWxC,CAAS,EAAE,MAClCJ,CACD,EAAE,WAAamD,EAAiB,WAChC9D,IAAmB,CAAE,GAAGuD,EAAc,CACvC,MACCvD,IAAmB8D,CAAoC,CAEzD,CAEA,MAAMoB,GAAkB,IAAM,CAC7B,GAAI,CAAC1C,EAAY,CAChBlC,IAAc,EAAE,EAChBqC,EAAiB,sBAAsB,EACvC,MACD,CACA,MAAMwC,EAAUC,GAAAA,kBAAkB5C,CAAU,EAG5C,GAFAlC,IAAckC,CAAU,EAEpB2C,EAAS,CACZxC,EAAiB,+BAA+B,EAChD,MACD,CACAA,EAAiB,MAAS,CAC3B,EAEM0C,GAAyB,IAAM,CACpC,GAAI,CAAChF,EAAU,CACdsC,EAAiB,sBAAsB,EACvC,MACD,CACA,MAAM2C,EAAYC,GAAAA,yBAAyBlF,CAAQ,EAGnD,GADAC,IAAcD,GAAY,EAAE,EACxBiF,EAAW,CACd3C,EAAiB,+BAA+B,EAChD,MACD,CACAA,EAAiB,MAAS,CAC3B,EAEAC,EAAAA,UAAU,IAAM,CACX9B,GAAWL,IAAQ+E,EAAAA,IAAI,SAC1BH,GAAA,CAEF,EAAG,CAACvE,CAAO,CAAC,EAEZ,MAAM2E,EAAmBlF,EAEtBuB,EAAsB,eADtBV,EAGH,OAAIe,EAAqC,cAEvCuD,EAAAA,IAACC,GAAAA,UAAA,CACA,MAAO,CACN,cAAe,SACf,MAAO,IACP,UAAW,GAAA,EAGZ,SAAAD,EAAAA,IAACE,GAAAA,QAAA,CACA,qBAAsBH,EAAgB,QAAUI,EAAAA,aAAa,MAC7D,YAAa1D,EAAqC,YAClD,qBAAsBhC,GAAwB,CAAA,EAC9C,qCAAAgC,EAGA,iBACCA,EAAqC,iBAEtC,cAAeA,EAAqC,cACpD,YAAaA,EAAqC,YAClD,QAAAV,CAAA,CAAA,CACD,CAAA,EAMFqE,EAAAA,KAACH,GAAAA,UAAA,CACA,MAAO,CACN,cAAe,SACf,MAAO,IACP,UAAW,IACX,SAAU/E,EAAwB,QAAU,MAAA,EAG5C,SAAA,CAAA,CAAC,CAACkB,EAAsB,gBACxB,CAAClB,GACD,CAACmF,EAAAA,aAAahG,GAAU,OAAO,GAC9B+F,EAAAA,KAACE,GAAAA,2BAAA,CACA,SAAA,CAAAN,EAAAA,IAACO,GAAAA,QAAA,CACA,UAAWR,GAAiB,SAAS,eAAiB,CAAA,EACtD,kBACCtD,EAAqC,kBAEtC,UAAWsD,GAAiB,OAC5B,MAAOtD,EAAqC,MAC5C,UAAWA,EAAqC,QAChD,iBACCA,EAAqC,iBAEtC,iBACC+D,GAAAA,WAAWT,GAAiB,SAAS,gBAAgB,CAAC,GAAK,EAAE,EAC1DA,GAAiB,SAAS,gBAAgB,CAAC,EAC3C1F,GAAU,SAAS,SAAS,CAAC,EAC7BA,GAAU,SAAS,SAAS,CAAC,EAC7BoC,EAAqC,gBAAA,CAAA,EAGzCf,GAAiB,QAAayE,EAAAA,aAAa,SAC3CH,EAAAA,IAACS,GAAA,CACC,SAAA1F,IAAQ+E,EAAAA,IAAI,QACZE,EAAAA,IAACU,GAAAA,mBAAA,CACA,UAAU,WACV,YAAa,iBACb,aAAc1D,GAAgC,OAC9C,SAAW2D,GAAS,CACnB1D,EAAiB,EAAE,EACnBrC,IAAc+F,GAAM,aAAe,EAAE,CACtC,EACA,WAAYC,GAAAA,WAAW,SACvB,eAAgB,GAChB,SAAU,GACV,cAAa,GACb,cAAc,kBACd,aAAc,CACb,YAAajG,GAAY,GACzB,aAAc,QAAA,EAEf,cAAeF,EACf,cAAe,EAAA,CAAA,EAGhBuF,EAAAA,IAACa,GAAAA,MAAA,CACA,UAAU,WACV,YAAY,iBACZ,MAAO/D,EACP,aAAcE,GAAgC,OAC9C,OAAQwC,GACR,aAAemB,GAAS,CACvB1D,EAAiB,EAAE,EACnBF,GAAc4D,CAAI,CACnB,CAAA,CAAA,EAGH,EAEAX,MAAAc,EAAAA,SAAA,CAAA,CAAE,CAAA,EAEJ,EAGD1E,EAAsB,eAAe,OAAS,GAC9C4D,EAAAA,IAACe,EAAAA,QAAA,CACA,eAAgB,CACf,WAAY3E,EAAsB,eAAiB,GAAK,CAAA,EAEzD,WAAY,uBACZ,QAAS,iDACT,YACC,0IAAA,CAAA,EAKFA,EAAsB,uBAAuB,IAC7C,CAAC4E,EAAsBC,IACtBjB,EAAAA,IAACkB,GAAAA,QAAA,CACA,qBACCjG,GAAyB,MAAaA,EAAwB,GAC1DH,EACA,MAAMG,CAAqB,EAC3BH,EAEL,KAAMkG,EAAqB,KAC3B,qBAAsBA,EAAqB,UAE3C,kBAAAxG,EAAA,EADKyG,CAAA,CAEN,GAIAhG,GAAyB,MAAaA,EAAwB,GAC5DH,EAA2D,MAC5DG,CACA,GAAG,QACFH,GAAoD,UACrD,OAAQ8D,GAAQA,EAAI,OAAS,KAAK,GAAG,OAAS,GAChDoB,EAAAA,IAACe,EAAAA,QAAA,CACA,WAAY,eACZ,QAAS,2CAAA,CAAA,GAIT9F,GAAyB,MAAaA,EAAwB,GAC5DH,EAA2D,MAC5DG,CACA,GAAG,QACFH,GAAoD,UAErD,OAAQ8D,GAAS7D,IAAQ+E,EAAAA,IAAI,QAAUlB,EAAI,OAAS,MAAQ,EAAK,GACjE,IAAI,CAACA,EAAKqC,IAAM,CACjB,MAAME,EAAcvC,EAAI,iBAAmBwC,GAAAA,yBACrCC,EACLzC,EAAI,iBAAmB0C,GAAAA,yBACxB,GAAI1C,EAAI,OAAS,MAChB,OACCoB,EAAAA,IAACuB,GAAAA,QAAA,CACA,kBAAmBN,EACnB,YAAaE,GAAeE,EAC5B,WACC9G,GAA4B,WAE7B,OAAQqE,EAER,oBACC3D,GAAyB,MACzBA,EAAwB,GACrB,CACA,GACCH,EACC,MAAMG,CAAqB,CAAA,EAE7B,CAAE,GAAIH,CAAA,EAEV,6BACCiD,EAAA,EAZI,GAAGkD,CAAC,IAAIhG,CAAqB,EAAA,CAiBtC,CAAC,EAGDF,IAAQ+E,EAAAA,IAAI,SACZrE,EAAQ,CAAC,GAAG,WAAW,SACvBA,EAAQ,CAAC,GAAG,WAAW,SAAS,OAAS,GACxCuE,EAAAA,IAACwB,GAAAA,mBAAA,CACA,iBAAkBxG,GAAQ,iBAAiB,CAAC,EAC5C,oBAAqBA,GAAQ,iBAAiB,CAAC,CAAA,CAAA,EAIjD,CAACqF,EAAAA,aAAahG,GAAU,OAAO,IAC9BY,GAAyB,MAAaA,EAAwB,GAC3DH,EAA2D,MAC5DG,CACA,GAAG,QACFH,GAAoD,UACrD,OAAQ8D,GAAQA,EAAI,OAAS,aAAa,GAAG,OAAS,IACxD7D,IAAQ+E,EAAAA,IAAI,QACZE,EAAAA,IAACe,EAAAA,QAAA,CACA,WAAY,eACZ,QAAS,wDACT,YACC,6FAAA,CAAA,EAIFf,EAAAA,IAACwB,GAAAA,mBAAA,CACA,iBAAkBxG,GAAQ,iBAAiB,CAAC,EAC5C,oBAAqBA,GAAQ,iBAAiB,CAAC,CAAA,CAAA,GAIjD,CAACqF,eAAahG,GAAU,OAAO,IAC9BY,GAAyB,MAAaA,EAAwB,GAC3DH,EAA2D,MAC5DG,CACA,GAAG,QACFH,GAAoD,UAErD,OAAQ8D,GAAQA,EAAI,OAAS,aAAa,GAC1C,IAAI,CAACA,EAAKqC,IAAM,CACjB,GAAIrC,EAAI,OAAS,eAAiB7D,IAAQ+E,EAAAA,IAAI,QAC7C,OACCE,EAAAA,IAACuB,GAAAA,QAAA,CACA,kBAAmBN,EACnB,WACC1G,GAA4B,WAE7B,OAAQqE,EAER,oBACC3D,GAAyB,MACzBA,EAAwB,GACrB,CACA,GACCH,EACC,MAAMG,CAAqB,CAAA,EAE7B,CACA,GAAIH,CAAA,EAGR,6BACCwE,EAAA,EAdI,GAAG2B,CAAC,IAAIhG,CAAqB,EAAA,CAmBtC,CAAC,EACFF,IAAQ+E,EAAAA,IAAI,SAAW7D,IACvB+D,EAAAA,IAACyB,GAAAA,sBAAA,CACA,aAAczG,GAAQ,oBAAoB,CAAC,EAC3C,gBAAiBA,GAAQ,oBAAoB,CAAC,CAAA,CAAA,GAI9CC,GAAyB,MAAaA,EAAwB,GAC5DH,EAA2D,MAC5DG,CACA,GAAG,QACFH,GAAoD,UACrD,IAAI,CAACqC,EAAQ8D,IAAM,CACrB,GAAI9D,EAAO,OAAS,YACnB,yBAEG,SAAAhC,GACA6E,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,aAAc,GACd,aAAc,EACd,QAAS,UAAA,EAGV,SAAAA,EAAAA,IAACa,GAAAA,MAAA,CACA,MAAO,WACP,UAAW1D,EAAO,MAAQ,YAC1B,MAAOA,EAAO,gBAAkB,GAChC,aAAc,IAAM,CAEpB,CAAA,CAAA,CACD,CAAA,EAGD6C,EAAAA,IAAC0B,GAAAA,QAAA,CACA,MAAOT,EACP,SAAU,CACT,aAAc9D,EAAO,MAAQ,YAC7B,aAAcA,EAAO,gBAAkB,GACvC,KAAM,SACN,mBAAoB,GACpB,MAAOA,EAAO,OAAS,CAAA,EAGxB,kBAAmB,GACnB,cAAe,UACf,WAAYA,EAAO,IAAA,EAHd8D,CAAA,EAMR,CAGH,CAAC,CAAA,CAAA,CAAA,CAGJ,EAIMR,GAAekB,GAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"EditWhatsAppTemplateV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.tsx"],"sourcesContent":["import { PickerType } from '@src/helpers';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Input } from '@src/components/input';\nimport { InputWithVariables } from '@src/components/input-with-vars';\nimport {\n\tisCarouselComponent,\n\tisRCSChannel,\n} from '@src/components/template-preview/helpers/templateMiscHelper';\nimport type { EmailTemplateType } from '@src/components/template-preview/models/EmailTemplate';\nimport type { SMSTemplateType } from '@src/components/template-preview/models/SmsTemplate';\nimport {\n\tButtonPlaceHolderOptions,\n\tHEADER_TYPES,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport type {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateVariables,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\ttype CTABtnValType,\n\tPOD,\n\ttype QRBBtnValType,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n\ttype WhatsAppTemplateVariables,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport {\n\tSTATIC_URL_VARIABLE_NAME,\n\tUNSUBSCRIBE_URL_VARIABLE,\n} from '../utils/constants';\nimport { getAllDataFromTemplateComponent } from '../utils/getDataFromTemplateComponent';\nimport { isVariable } from '../utils/validateIsUrl';\nimport {\n\tvalidateInputName,\n\tvalidateInputNameChatbot,\n} from '../utils/validateName';\nimport { BackTrackComponent } from './BackTrackComponent';\nimport { DiscountCodeComponent } from './DiscountCodeComponent';\nimport EditMediaModal from './EditMediaModal';\nimport EditMediaV2 from './EditMediaV2';\nimport { EditTemplateMediaContainer } from './EditMediaV2.style';\nimport { useEditWhatsappTemplateMedia } from './useEditWhtasappTemplateMedia';\nimport VariableConnector from './VariableConnector';\nimport { Container } from './VariableConnectorsPanel';\nimport VariableConnectorWhatsApp from './VariableConnectorWhatsApp';\nimport VariableEditorHeader from './VariableEditorHeader';\nimport WhatsAppTemplateCardButtonV2, {\n\tQRBBtnUpdateFunctionType,\n\tURLBtnUpdateFunctionType,\n} from './WhatsAppTemplateCardButtonV2';\n\nexport interface EditWhatsAppTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WhatsAppTemplate | WhatsAppCarouselTemplate;\n\tonTemplateChange?: (\n\t\ttemplate:\n\t\t\t| WhatsAppTemplate\n\t\t\t| EmailTemplateType\n\t\t\t| SMSTemplateType\n\t\t\t| WhatsAppCarouselTemplate,\n\t) => void;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n\tfileName?: string;\n\tsetFileName?: (name: string) => void;\n}\n\nconst EditWhatsAppTemplateV2 = ({\n\ttemplate,\n\tonTemplateChange,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n\tvariableListForImage,\n\tsetDiscountCode,\n\tfileName,\n\tsetFileName,\n}: EditWhatsAppTemplateV2Props) => {\n\tconst isCarouselType = (template as WhatsAppCarouselTemplate).isCarouselType;\n\tconst {\n\t\toriginalVariableList,\n\t\tpod,\n\t\textras,\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\tdisableCopyCode,\n\t\tisError,\n\t\tcardIndex,\n\t} = useTemplateModalContext();\n\tconst {\n\t\tdescriptionComponents,\n\t\turlBtns,\n\t\tqrbBtns,\n\t\timageComponent,\n\t\tbodyVariables,\n\t\theaderVariables,\n\t\ttitleVariables,\n\t} = getAllDataFromTemplateComponent(template as WhatsAppTemplate);\n\n\tconst fileRef = useRef<HTMLInputElement>(null);\n\n\tconst [showDiscountCheckBox, setShowDiscountCheckBox] =\n\t\tuseState<boolean>(false);\n\tconst [templateComponentData, setTemplateComponentData] = useState<any>(\n\t\tselectedCarouselIndex === -1\n\t\t\t? {\n\t\t\t\t\tdescriptionComponents,\n\t\t\t\t\turlBtns,\n\t\t\t\t\tqrbBtns,\n\t\t\t\t\timageComponent,\n\t\t\t\t\tbodyVariables,\n\t\t\t\t\theaderVariables,\n\t\t\t\t\ttitleVariables,\n\t\t\t  }\n\t\t\t: {},\n\t);\n\n\tconst { uploadMediaLink, uploadMediaFiles, validateMimeType } =\n\t\twhatsappSpecificPickerMeta as WhatsAppPickerMeta;\n\n\tconst useEditWhatsappTemplateMediaResponse = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl,\n\t\tvalidateMimeType,\n\t\tmediaComponent: !isCarouselType\n\t\t\t? imageComponent\n\t\t\t: templateComponentData.imageComponent,\n\t\tfileRef,\n\t});\n\n\tconst [hasNewImageUpload, setHasNewImageUpload] = useState<boolean>(false);\n\tconst [enteredPdf, setEnteredPdf] = useState(fileName);\n\tconst [pdfInputError, setPdfInputError] = useState<string | undefined>();\n\n\t/**\n\t * Whenever template changes, check if we have Checkout URL in the button mapping.\n\t * If yes, show discount check box\n\t */\n\tuseEffect(() => {\n\t\tconst discountCheckboxEnabled = template.mapping.buttons?.find(\n\t\t\t(button) => button.slice(2, -2) === 'checkout.checkoutUrl',\n\t\t);\n\t\tif (discountCheckboxEnabled) {\n\t\t\tsetShowDiscountCheckBox(true);\n\t\t} else {\n\t\t\tsetShowDiscountCheckBox(false);\n\t\t\tconst setDiscountCode = extras?.discountCodeExtra?.[1];\n\t\t\tsetDiscountCode?.('');\n\t\t}\n\t}, [template]);\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst currentCarousel = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(currentCarousel as WhatsAppTemplate);\n\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t} else if (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex === -1\n\t\t) {\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent: mediaComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(template as WhatsAppTemplate);\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent: mediaComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t}\n\t}, [selectedCarouselIndex]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\thasNewImageUpload\n\t\t) {\n\t\t\tconst currentCarousel = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t\tconst {\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t} = getAllDataFromTemplateComponent(currentCarousel as WhatsAppTemplate);\n\n\t\t\tsetTemplateComponentData({\n\t\t\t\tdescriptionComponents,\n\t\t\t\turlBtns,\n\t\t\t\tqrbBtns,\n\t\t\t\timageComponent,\n\t\t\t\tbodyVariables,\n\t\t\t\theaderVariables,\n\t\t\t\ttitleVariables,\n\t\t\t});\n\t\t\tsetHasNewImageUpload(false);\n\t\t}\n\t}, [hasNewImageUpload]);\n\n\tfunction updateTemplateImageUrl(\n\t\turl: string,\n\t\tformat: WhatsAppTemplate['components'][0]['format'],\n\t) {\n\t\tlet localTemplate: any;\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tlocalTemplate = {\n\t\t\t\tcomponents: (template as WhatsAppCarouselTemplate).components[cardIndex]\n\t\t\t\t\t?.cards?.[selectedCarouselIndex].components,\n\t\t\t\tmapping: (template as WhatsAppCarouselTemplate)?.mapping?.cards?.[\n\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t],\n\t\t\t};\n\t\t} else {\n\t\t\tlocalTemplate = { ...template };\n\t\t}\n\n\t\tconst imageComponentIndex = localTemplate?.components?.findIndex(\n\t\t\t(component) => {\n\t\t\t\tif (\n\t\t\t\t\tcomponent.type === 'HEADER' &&\n\t\t\t\t\tcomponent.format !== 'NONE' &&\n\t\t\t\t\tcomponent.format !== 'TEXT'\n\t\t\t\t) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t},\n\t\t);\n\n\t\tif (\n\t\t\ttypeof imageComponentIndex !== 'undefined' &&\n\t\t\timageComponentIndex > -1 &&\n\t\t\tlocalTemplate?.components[imageComponentIndex]\n\t\t) {\n\t\t\tconst updatedComponent: WhatsAppTemplate['components'][0] = {\n\t\t\t\t...localTemplate.components[imageComponentIndex],\n\t\t\t\tformat,\n\t\t\t\texample: {\n\t\t\t\t\theader_handle: [url],\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst components = [...localTemplate.components];\n\t\t\tcomponents[imageComponentIndex] = updatedComponent;\n\t\t\tlocalTemplate = { ...localTemplate, components };\n\t\t}\n\n\t\tif (localTemplate.mapping) {\n\t\t\tlocalTemplate.mapping = {\n\t\t\t\t...localTemplate.mapping,\n\t\t\t\theader: undefined,\n\t\t\t};\n\t\t}\n\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = localTemplate.components;\n\t\t\tif (\n\t\t\t\ttemplateCopy?.mapping?.cards &&\n\t\t\t\ttemplateCopy?.mapping?.cards.length > 0\n\t\t\t) {\n\t\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\t\tlocalTemplate.mapping ?? {};\n\t\t\t}\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t\tsetHasNewImageUpload(true);\n\t\t} else {\n\t\t\tonTemplateChange?.({ ...localTemplate });\n\t\t}\n\t}\n\n\tfunction updateSelectedTemplateURLBtn(\n\t\tval: CTABtnValType,\n\t\tmode: 'custom' | 'placeholder',\n\t\tbtnIndex: number,\n\t) {\n\t\tconst tempCopy =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t  }\n\t\t\t\t: { ...template };\n\t\tconst selectedTemplate = cloneDeep(tempCopy);\n\n\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\tconst customValue = isCustom\n\t\t\t? val\n\t\t\t: typeof val !== 'string'\n\t\t\t? val.defaultValue\n\t\t\t\t? val.defaultValue\n\t\t\t\t: 'https://d.bik.ai/'\n\t\t\t: 'https://d.bik.ai';\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\t\t\tconst ctaBtns = card.buttons?.filter(\n\t\t\t\t\t\t\t\t\t\t\t(btn) => btn.type === 'URL',\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tlet currentButton: any = ctaBtns?.[btnIndex] ?? {};\n\t\t\t\t\t\t\t\t\t\tcurrentButton = {\n\t\t\t\t\t\t\t\t\t\t\t...currentButton,\n\t\t\t\t\t\t\t\t\t\t\turl: 'https://d.bik.ai/{{1}}',\n\t\t\t\t\t\t\t\t\t\t\texample: [customValue],\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst newButtonList = card.buttons?.map((btn) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tbtn.type === 'URL' &&\n\t\t\t\t\t\t\t\t\t\t\t\tbtn?.text === currentButton?.text\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn btn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst mappingButtonsComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.mapping?.cards?.map((card) => {\n\t\t\t\treturn {\n\t\t\t\t\t...card,\n\t\t\t\t\tbuttons: card?.buttons?.map((button, index: number) => {\n\t\t\t\t\t\tif (index === btnIndex) {\n\t\t\t\t\t\t\treturn isCustom\n\t\t\t\t\t\t\t\t? '((customBtnPlaceholder))'\n\t\t\t\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t\t\t\t? val.placeHolder\n\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn button;\n\t\t\t\t\t}),\n\t\t\t\t};\n\t\t\t});\n\t\t\tconst newTemplate = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\tnewTemplate.components = newComponent as any;\n\t\t\tnewTemplate.mapping.cards = mappingButtonsComponent;\n\t\t\tonTemplateChange?.({ ...newTemplate });\n\t\t\treturn;\n\t\t}\n\n\t\tconst btnComponentIndex = selectedTemplate?.components.findIndex(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\n\t\tif (typeof btnComponentIndex !== 'undefined' && btnComponentIndex > -1) {\n\t\t\tconst ctaBtns = selectedTemplate?.components[\n\t\t\t\tbtnComponentIndex\n\t\t\t].buttons?.filter((btn) => btn.type === 'URL');\n\n\t\t\tif (ctaBtns?.length > 0) {\n\t\t\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\t\t\tconst customValue = isCustom\n\t\t\t\t\t? val\n\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t? val.defaultValue\n\t\t\t\t\t\t? val.defaultValue\n\t\t\t\t\t\t: 'https://d.bik.ai/'\n\t\t\t\t\t: 'https://d.bik.ai/';\n\n\t\t\t\tlet currentButton = ctaBtns[btnIndex];\n\t\t\t\tcurrentButton = {\n\t\t\t\t\t...currentButton,\n\t\t\t\t\turl: 'https://d.bik.ai/{{1}}',\n\t\t\t\t\texample: [customValue],\n\t\t\t\t};\n\n\t\t\t\tconst buttons = [\n\t\t\t\t\t...(selectedTemplate.components?.[btnComponentIndex]?.buttons ?? []),\n\t\t\t\t];\n\t\t\t\tconst newButtonList = buttons.map((btn) => {\n\t\t\t\t\tif (btn.type === 'URL' && btn?.text === currentButton?.text) {\n\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn btn;\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tconst btnComponent = {\n\t\t\t\t\t...selectedTemplate.components[btnComponentIndex],\n\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t};\n\n\t\t\t\tconst mappingButtons = selectedTemplate.mapping?.buttons;\n\n\t\t\t\tif (mappingButtons && mappingButtons.length > 0) {\n\t\t\t\t\tmappingButtons[btnIndex] = isCustom\n\t\t\t\t\t\t? '((customBtnPlaceholder))'\n\t\t\t\t\t\t: typeof val !== 'string'\n\t\t\t\t\t\t? val.placeHolder\n\t\t\t\t\t\t: '';\n\t\t\t\t}\n\n\t\t\t\tconst mapping = {\n\t\t\t\t\t...selectedTemplate.mapping,\n\t\t\t\t\tbuttons: mappingButtons,\n\t\t\t\t};\n\n\t\t\t\tselectedTemplate.mapping = mapping;\n\t\t\t\tconst components = [...selectedTemplate.components];\n\t\t\t\tcomponents[btnComponentIndex] = btnComponent;\n\t\t\t\tselectedTemplate.components = components;\n\t\t\t}\n\t\t}\n\n\t\tif (typeof val !== 'string') {\n\t\t\tconst discountCheckBoxEnabled =\n\t\t\t\tval.placeHolder?.slice(2, -2) === 'checkout.checkoutUrl';\n\t\t\tif (discountCheckBoxEnabled) {\n\t\t\t\tsetShowDiscountCheckBox(true);\n\t\t\t} else {\n\t\t\t\tsetShowDiscountCheckBox(false);\n\t\t\t\tsetDiscountCode?.('');\n\t\t\t}\n\t\t}\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = selectedTemplate.components;\n\t\t\ttemplateCopy.mapping.cards![selectedCarouselIndex] =\n\t\t\t\tselectedTemplate.mapping!;\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t} else {\n\t\t\tonTemplateChange?.(selectedTemplate as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tfunction updateSelectedTemplateQRBBtn(\n\t\tval: QRBBtnValType,\n\t\tmode: 'custom' | 'placeholder',\n\t\tbtnIndex: number,\n\t) {\n\t\tconst selectedTemplate =\n\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? {\n\t\t\t\t\t\tcomponents: ({ ...template } as WhatsAppCarouselTemplate)\n\t\t\t\t\t\t\t.components[cardIndex].cards?.[selectedCarouselIndex]\n\t\t\t\t\t\t\t.components as any,\n\t\t\t\t\t\tmapping: ({ ...template } as WhatsAppCarouselTemplate).mapping\n\t\t\t\t\t\t\t.cards?.[selectedCarouselIndex],\n\t\t\t\t  }\n\t\t\t\t: { ...template };\n\n\t\tif (\n\t\t\tselectedCarouselIndex != undefined &&\n\t\t\tselectedCarouselIndex > -1 &&\n\t\t\tisProductCarouselType\n\t\t) {\n\t\t\tconst newComponent = {\n\t\t\t\t...(template as WhatsAppCarouselTemplate),\n\t\t\t}.components.map((component) => {\n\t\t\t\tif (isCarouselComponent(component.type)) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...component,\n\t\t\t\t\t\tcards: component.cards?.map((cardComponent) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t...cardComponent,\n\t\t\t\t\t\t\t\tcomponents: cardComponent.components.map((card) => {\n\t\t\t\t\t\t\t\t\tif (card.type === 'BUTTONS') {\n\t\t\t\t\t\t\t\t\t\tconst qrbButtons = card?.buttons?.filter(\n\t\t\t\t\t\t\t\t\t\t\t(btn) => btn.type === 'QUICK_REPLY',\n\t\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\t\t\tlet currentButton: any = qrbButtons?.[btnIndex] ?? {};\n\t\t\t\t\t\t\t\t\t\tcurrentButton = {\n\t\t\t\t\t\t\t\t\t\t\t...currentButton,\n\t\t\t\t\t\t\t\t\t\t\tflowId: val.flowId,\n\t\t\t\t\t\t\t\t\t\t\tflowName: val.flowName,\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst newButtonList = card?.buttons?.map((btn) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tbtn.type === 'QUICK_REPLY' &&\n\t\t\t\t\t\t\t\t\t\t\t\tbtn?.text === currentButton?.text\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn btn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...card,\n\t\t\t\t\t\t\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn card;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}),\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn component;\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst newTemplate = cloneDeep(template);\n\t\t\tnewTemplate.components = newComponent as any;\n\t\t\tonTemplateChange?.({ ...newTemplate });\n\t\t\treturn;\n\t\t}\n\n\t\tconst btnComponentIndex = selectedTemplate?.components.findIndex(\n\t\t\t(component) => component.type === 'BUTTONS',\n\t\t);\n\t\tif (typeof btnComponentIndex !== 'undefined' && btnComponentIndex > -1) {\n\t\t\tconst qrbButtons = selectedTemplate?.components[\n\t\t\t\tbtnComponentIndex\n\t\t\t]?.buttons?.filter((btn) => btn.type === 'QUICK_REPLY');\n\n\t\t\tif (qrbButtons) {\n\t\t\t\tlet currentButton = qrbButtons[btnIndex];\n\t\t\t\tcurrentButton = {\n\t\t\t\t\t...currentButton,\n\t\t\t\t\tflowId: val.flowId,\n\t\t\t\t\tflowName: val.flowName,\n\t\t\t\t};\n\n\t\t\t\tconst buttons = [\n\t\t\t\t\t...(selectedTemplate.components?.[btnComponentIndex]?.buttons ?? []),\n\t\t\t\t];\n\n\t\t\t\tconst newButtonList = buttons.map((btn) => {\n\t\t\t\t\tif (btn.type === 'QUICK_REPLY' && btn?.text === currentButton?.text) {\n\t\t\t\t\t\treturn currentButton;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn btn;\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tconst btnComponent = {\n\t\t\t\t\t...selectedTemplate.components[btnComponentIndex],\n\t\t\t\t\tbuttons: newButtonList,\n\t\t\t\t};\n\t\t\t\tconst components = [...selectedTemplate.components];\n\t\t\t\tcomponents[btnComponentIndex] = btnComponent;\n\t\t\t\tselectedTemplate.components = components;\n\t\t\t}\n\t\t}\n\t\tif (selectedCarouselIndex != undefined && selectedCarouselIndex > -1) {\n\t\t\tconst templateCopy = cloneDeep(template as WhatsAppCarouselTemplate);\n\t\t\ttemplateCopy.components[cardIndex].cards![\n\t\t\t\tselectedCarouselIndex\n\t\t\t].components = selectedTemplate.components;\n\t\t\tonTemplateChange?.({ ...templateCopy });\n\t\t} else {\n\t\t\tonTemplateChange?.(selectedTemplate as WhatsAppTemplate);\n\t\t}\n\t}\n\n\tconst validatePdfName = () => {\n\t\tif (!enteredPdf) {\n\t\t\tsetFileName?.('');\n\t\t\tsetPdfInputError('PDF name is Required');\n\t\t\treturn;\n\t\t}\n\t\tconst isValid = validateInputName(enteredPdf);\n\t\tsetFileName?.(enteredPdf);\n\n\t\tif (isValid) {\n\t\t\tsetPdfInputError('Please enter a valid PDF name');\n\t\t\treturn;\n\t\t}\n\t\tsetPdfInputError(undefined);\n\t};\n\n\tconst validatePdfNameChatbot = () => {\n\t\tif (!fileName) {\n\t\t\tsetPdfInputError('PDF name is Required');\n\t\t\treturn;\n\t\t}\n\t\tconst isInvalid = validateInputNameChatbot(fileName);\n\n\t\tsetFileName?.(fileName ?? '');\n\t\tif (isInvalid) {\n\t\t\tsetPdfInputError('Please enter a valid PDF name');\n\t\t\treturn;\n\t\t}\n\t\tsetPdfInputError(undefined);\n\t};\n\n\tuseEffect(() => {\n\t\tif (isError && pod === POD.CHATBOT) {\n\t\t\tvalidatePdfNameChatbot();\n\t\t}\n\t}, [isError]);\n\n\tconst _mediaComponent = !isCarouselType\n\t\t? imageComponent\n\t\t: templateComponentData.imageComponent;\n\n\tif (useEditWhatsappTemplateMediaResponse.openEditMedia) {\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tstyle={{\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\twidth: 400,\n\t\t\t\t\tmaxHeight: 460,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EditMediaModal\n\t\t\t\t\tmediaComponentFormat={_mediaComponent.format ?? HEADER_TYPES.IMAGE}\n\t\t\t\t\tuploadMedia={useEditWhatsappTemplateMediaResponse.uploadMedia}\n\t\t\t\t\tvariableListForImage={variableListForImage || []}\n\t\t\t\t\tuseEditWhatsappTemplateMediaResponse={\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse\n\t\t\t\t\t}\n\t\t\t\t\tsetOpenEditMedia={\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setOpenEditMedia\n\t\t\t\t\t}\n\t\t\t\t\topenEditMedia={useEditWhatsappTemplateMediaResponse.openEditMedia}\n\t\t\t\t\teditIconRef={useEditWhatsappTemplateMediaResponse.editIconRef}\n\t\t\t\t\tfileRef={fileRef}\n\t\t\t\t/>\n\t\t\t</Container>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Container\n\t\t\tstyle={{\n\t\t\t\tflexDirection: 'column',\n\t\t\t\twidth: 400,\n\t\t\t\tmaxHeight: 460,\n\t\t\t\tminWidth: isProductCarouselType ? '420px' : 'auto',\n\t\t\t}}\n\t\t>\n\t\t\t{!!templateComponentData.imageComponent &&\n\t\t\t\t!isProductCarouselType &&\n\t\t\t\t!isRCSChannel(template?.channel) && (\n\t\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\t\timageName={_mediaComponent?.example?.header_handle ?? []}\n\t\t\t\t\t\t\thandleImageChange={\n\t\t\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.handleImageChange\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmediaType={_mediaComponent?.format}\n\t\t\t\t\t\t\terror={useEditWhatsappTemplateMediaResponse.error}\n\t\t\t\t\t\t\tisLoading={useEditWhatsappTemplateMediaResponse.loading}\n\t\t\t\t\t\t\tsetOpenEditMedia={\n\t\t\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setOpenEditMedia\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tselectedVariable={\n\t\t\t\t\t\t\t\tisVariable(_mediaComponent?.example?.header_handle?.[0] ?? '')\n\t\t\t\t\t\t\t\t\t? _mediaComponent?.example?.header_handle?.[0]\n\t\t\t\t\t\t\t\t\t: template?.mapping?.header?.[0]\n\t\t\t\t\t\t\t\t\t? template?.mapping?.header?.[0]\n\t\t\t\t\t\t\t\t\t: useEditWhatsappTemplateMediaResponse.selectedVariable\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{imageComponent?.['format'] == HEADER_TYPES.DOCUMENT ? (\n\t\t\t\t\t\t\t<PdfContainer>\n\t\t\t\t\t\t\t\t{pod === POD.CHATBOT ? (\n\t\t\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\t\t\tlabelText=\"PDF Name\"\n\t\t\t\t\t\t\t\t\t\tplaceHolder={'Enter the name'}\n\t\t\t\t\t\t\t\t\t\terrorMessage={pdfInputError ? pdfInputError : undefined}\n\t\t\t\t\t\t\t\t\t\tonChange={(name) => {\n\t\t\t\t\t\t\t\t\t\t\tsetPdfInputError('');\n\t\t\t\t\t\t\t\t\t\t\tsetFileName?.(name?.actualValue ?? '');\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\t\t\tallowMix={true}\n\t\t\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\t\t\tprevVariable={{\n\t\t\t\t\t\t\t\t\t\t\tactualValue: fileName ?? '',\n\t\t\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\t\t\tshowAddButton={true}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tlabelText=\"PDF Name\"\n\t\t\t\t\t\t\t\t\t\tplaceholder=\"Enter the name\"\n\t\t\t\t\t\t\t\t\t\tvalue={enteredPdf}\n\t\t\t\t\t\t\t\t\t\terrorMessage={pdfInputError ? pdfInputError : undefined}\n\t\t\t\t\t\t\t\t\t\tonBlur={validatePdfName}\n\t\t\t\t\t\t\t\t\t\tonChangeText={(name) => {\n\t\t\t\t\t\t\t\t\t\t\tsetPdfInputError('');\n\t\t\t\t\t\t\t\t\t\t\tsetEnteredPdf(name);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</PdfContainer>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t\t)}\n\n\t\t\t{templateComponentData.bodyVariables?.length > 0 && (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tpaddingTop: templateComponentData.mediaComponent ? 24 : 8,\n\t\t\t\t\t}}\n\t\t\t\t\theaderText={'Edit variable values'}\n\t\t\t\t\tsubText={'Edit values for the variables used in template'}\n\t\t\t\t\ttoolTipInfo={\n\t\t\t\t\t\t'Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below'\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{templateComponentData.descriptionComponents?.map(\n\t\t\t\t(descriptionComponent, i) => (\n\t\t\t\t\t<VariableConnectorWhatsApp\n\t\t\t\t\t\toriginalVariableList={\n\t\t\t\t\t\t\tselectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables)\n\t\t\t\t\t\t\t\t\t\t.cards[selectedCarouselIndex]\n\t\t\t\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttype={descriptionComponent.type}\n\t\t\t\t\t\tdescriptionComponent={descriptionComponent.component}\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)?.filter((btn) => btn.type === 'URL')?.length > 0 && (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\theaderText={'Edit buttons'}\n\t\t\t\t\tsubText={'Edit the link connected to the CTA button'}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)\n\t\t\t\t?.filter((btn) => (pod !== POD.CHATBOT ? btn.type === 'URL' : true))\n\t\t\t\t?.map((btn, i) => {\n\t\t\t\t\tconst isStaticUrl = btn.buttonVariable === STATIC_URL_VARIABLE_NAME;\n\t\t\t\t\tconst isUnsubscribeUrl =\n\t\t\t\t\t\tbtn.buttonVariable === UNSUBSCRIBE_URL_VARIABLE;\n\t\t\t\t\tif (btn.type === 'URL') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\t\t\tdisableEdit={isStaticUrl || isUnsubscribeUrl}\n\t\t\t\t\t\t\t\tCTAoptions={\n\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.CTAoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\t\t\tkey={`${i}_${selectedCarouselIndex}`}\n\t\t\t\t\t\t\t\tcurrentVariableList={\n\t\t\t\t\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\t\t\t\t\tselectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t...(\n\t\t\t\t\t\t\t\t\t\t\t\t\toriginalVariableList as WhatsAppCarouselTemplateVariables\n\t\t\t\t\t\t\t\t\t\t\t\t).cards[selectedCarouselIndex],\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: { ...(originalVariableList as WhatsAppTemplateVariables) }\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tupdateSelectedURLTemplateBtn={\n\t\t\t\t\t\t\t\t\tupdateSelectedTemplateURLBtn as URLBtnUpdateFunctionType\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\n\t\t\t{/* If pod is chatbot and qrb button is there, Backtrack should be present */}\n\t\t\t{pod === POD.CHATBOT &&\n\t\t\t\tqrbBtns[0]?.component?.buttons &&\n\t\t\t\tqrbBtns[0]?.component?.buttons?.length > 0 && (\n\t\t\t\t\t<BackTrackComponent\n\t\t\t\t\t\tbackTrackMessage={extras?.backTrackExtra?.[0]}\n\t\t\t\t\t\tsetBackTrackMessage={extras?.backTrackExtra?.[1]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t{!isRCSChannel(template?.channel) &&\n\t\t\t\t(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t  ]?.buttons\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t\t)?.filter((btn) => btn.type === 'QUICK_REPLY')?.length > 0 &&\n\t\t\t\t(pod !== POD.CHATBOT ? (\n\t\t\t\t\t<VariableEditorHeader\n\t\t\t\t\t\theaderText={'Edit buttons'}\n\t\t\t\t\t\tsubText={'Edit the chatflows triggered on clicking  the buttons'}\n\t\t\t\t\t\ttoolTipInfo={\n\t\t\t\t\t\t\t'There is an option to trigger chatflows through the buttons which can keep the user engaged'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BackTrackComponent\n\t\t\t\t\t\tbackTrackMessage={extras?.backTrackExtra?.[0]}\n\t\t\t\t\t\tsetBackTrackMessage={extras?.backTrackExtra?.[1]}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t{!isRCSChannel(template?.channel) &&\n\t\t\t\t(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t\t  ]?.buttons\n\t\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t\t)\n\t\t\t\t\t?.filter((btn) => btn.type === 'QUICK_REPLY')\n\t\t\t\t\t?.map((btn, i) => {\n\t\t\t\t\t\tif (btn.type === 'QUICK_REPLY' && pod !== POD.CHATBOT) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\t\t\t\tQRBoptions={\n\t\t\t\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.QRBoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\t\t\t\tkey={`${i}_${selectedCarouselIndex}`}\n\t\t\t\t\t\t\t\t\tcurrentVariableList={\n\t\t\t\t\t\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\t\t\t\t\t\tselectedCarouselIndex > -1\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\toriginalVariableList as WhatsAppCarouselTemplateVariables\n\t\t\t\t\t\t\t\t\t\t\t\t\t).cards[selectedCarouselIndex],\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t...(originalVariableList as WhatsAppTemplateVariables),\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tupdateSelectedQRBTemplateBtn={\n\t\t\t\t\t\t\t\t\t\tupdateSelectedTemplateQRBBtn as QRBBtnUpdateFunctionType\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})}\n\t\t\t{pod === POD.CHATBOT && showDiscountCheckBox && (\n\t\t\t\t<DiscountCodeComponent\n\t\t\t\t\tdiscountCode={extras?.discountCodeExtra?.[0]}\n\t\t\t\t\tsetDiscountCode={extras?.discountCodeExtra?.[1]}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{(selectedCarouselIndex != undefined && selectedCarouselIndex > -1\n\t\t\t\t? (originalVariableList as WhatsAppCarouselTemplateVariables).cards[\n\t\t\t\t\t\tselectedCarouselIndex\n\t\t\t\t  ]?.buttons\n\t\t\t\t: (originalVariableList as WhatsAppTemplateVariables)?.buttons\n\t\t\t)?.map((button, i) => {\n\t\t\t\tif (button.type === 'COPY_CODE') {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{disableCopyCode ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tmarginBottom: 20,\n\t\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\t\tpadding: '8px 10px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tstate={'disabled'}\n\t\t\t\t\t\t\t\t\t\tlabelText={button.text ?? 'Copy Code'}\n\t\t\t\t\t\t\t\t\t\tvalue={button.buttonVariable ?? ''}\n\t\t\t\t\t\t\t\t\t\tonChangeText={() => {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<VariableConnector\n\t\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\t\tvariable={{\n\t\t\t\t\t\t\t\t\t\tvariableName: button.text ?? 'Copy Code',\n\t\t\t\t\t\t\t\t\t\tupdatedValue: button.buttonVariable ?? '',\n\t\t\t\t\t\t\t\t\t\ttype: 'string',\n\t\t\t\t\t\t\t\t\t\tisEditableVariable: true,\n\t\t\t\t\t\t\t\t\t\tindex: button.index ?? 0, // this index is respect to components -> buttons\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\tshowVariableModal={true}\n\t\t\t\t\t\t\t\t\tcomponentType={'BUTTONS'}\n\t\t\t\t\t\t\t\t\tbuttonType={button.type}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</Container>\n\t);\n};\n\nexport default EditWhatsAppTemplateV2;\n\nconst PdfContainer = styled.div`\n\tpadding-top: 24px;\n\tpadding-left: 10px;\n\tpadding-right: 10px;\n\tmargin-bottom: 8px;\n\tline-height: normal;\n`;\n"],"names":["EditWhatsAppTemplateV2","template","onTemplateChange","whatsappSpecificPickerMeta","showVariableModal","variableListForImage","setDiscountCode","fileName","setFileName","isCarouselType","originalVariableList","pod","extras","selectedCarouselIndex","isProductCarouselType","disableCopyCode","isError","cardIndex","useTemplateModalContext","descriptionComponents","urlBtns","qrbBtns","imageComponent","bodyVariables","headerVariables","titleVariables","getAllDataFromTemplateComponent","fileRef","useRef","showDiscountCheckBox","setShowDiscountCheckBox","useState","templateComponentData","setTemplateComponentData","uploadMediaLink","uploadMediaFiles","validateMimeType","useEditWhatsappTemplateMediaResponse","useEditWhatsappTemplateMedia","updateTemplateImageUrl","hasNewImageUpload","setHasNewImageUpload","enteredPdf","setEnteredPdf","pdfInputError","setPdfInputError","useEffect","button","currentCarousel","mediaComponent","url","format","localTemplate","imageComponentIndex","component","updatedComponent","components","templateCopy","cloneDeep","updateSelectedTemplateURLBtn","val","mode","btnIndex","tempCopy","selectedTemplate","isCustom","customValue","newComponent","isCarouselComponent","cardComponent","card","currentButton","btn","newButtonList","mappingButtonsComponent","index","newTemplate","btnComponentIndex","ctaBtns","btnComponent","mappingButtons","mapping","updateSelectedTemplateQRBBtn","qrbButtons","validatePdfName","isValid","validateInputName","validatePdfNameChatbot","isInvalid","validateInputNameChatbot","POD","_mediaComponent","jsx","Container","EditMediaModal","HEADER_TYPES","jsxs","isRCSChannel","EditTemplateMediaContainer","EditMediaV2","isVariable","PdfContainer","InputWithVariables","name","PickerType","Input","Fragment","VariableEditorHeader","descriptionComponent","i","VariableConnectorWhatsApp","isStaticUrl","STATIC_URL_VARIABLE_NAME","isUnsubscribeUrl","UNSUBSCRIBE_URL_VARIABLE","WhatsAppTemplateCardButtonV2","BackTrackComponent","DiscountCodeComponent","VariableConnector","styled"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),h=require("../../../assets/icons/info.svg.js"),a=require("react"),S=require("styled-components"),j=require("../../button/Button.js"),T=require("../../tag/Tag.js"),q=require("../../template-preview/helpers/templateMiscHelper.js"),C=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),R=require("../Badge/index.js"),v=require("../context/templateModalContext.js"),O=S.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),h=require("../../../assets/icons/info.svg.js"),a=require("react"),S=require("styled-components"),j=require("../../button/Button.js"),T=require("../../tag/Tag.js"),q=require("../../template-preview/helpers/templateMiscHelper.js"),C=require("../../template-preview/models/Channels.js"),u=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),R=require("../Badge/index.js"),v=require("../context/templateModalContext.js"),O=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},k=O(S),w=k.default.div`
 	background: ${i.COLORS.surface.standard};
 	border-top-width: 1px;
 	border-top-color: ${i.COLORS.stroke.primary};
@@ -12,5 +12,5 @@
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	height: ${e=>e.isWhatsappCarousel?64:80}px;
-`,k=({isWhatsappCarousel:e,onSelect:x,footerButtonText:s,footerInfoText:l})=>{const{isError:c,selectedCarouselIndex:t,setSelectedCarouselIndex:d,setErrorIndexes:g,template:n,showVariablePicker:m,hideFooterButton:p,carouselBodyError:b}=v.useTemplateModalContext(),[y,o]=a.useState(e?"Next":"Select template");function f(){e&&t===-1&&d?d(0):(g?.([]),x())}return a.useEffect(()=>{s?o(s):e&&t===-1?o("Next"):e&&t!=null&&t>-1&&o("Save & Select Template")},[t]),r.jsxs(O,{isWhatsappCarousel:e,justifyContent:e&&n?.mapping?.body?.length?"space-between":"end",children:[q.isRCSChannel(n?.channel||C.CHANNEL_TYPE.WHATSAPP)?r.jsx(u.TitleRegular,{}):e&&t!=null&&t>=-1&&!!n?.mapping?.body?.length&&r.jsx(u.TitleRegular,{color:i.COLORS.text.secondary,children:`Step ${t===-1?1:2}/2`}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[c&&r.jsx(R.Badge,{errorText:b||"Some inputs are missing or incorrect. Please check"}),!c&&l&&r.jsx("div",{style:{marginRight:12},children:r.jsx(T.Tag,{tagText:l,LeadingIcon:h.default})}),!p&&r.jsx(j.Button,{disabled:m,id:"select-template-btn",buttonText:y,size:e?"small":"large",onClick:f})]})]})};exports.default=k;
+`,B=({isWhatsappCarousel:e,onSelect:x,footerButtonText:l,footerInfoText:s})=>{const{isError:d,selectedCarouselIndex:t,setSelectedCarouselIndex:c,setErrorIndexes:g,template:n,showVariablePicker:p,hideFooterButton:f,carouselBodyError:m}=v.useTemplateModalContext(),[b,o]=a.useState(e?"Next":"Select template");function y(){e&&t===-1&&c?c(0):(g?.([]),x())}return a.useEffect(()=>{l?o(l):e&&t===-1?o("Next"):e&&t!=null&&t>-1&&o("Save & Select Template")},[t]),r.jsxs(w,{isWhatsappCarousel:e,justifyContent:e&&n?.mapping?.body?.length?"space-between":"end",children:[q.isRCSChannel(n?.channel||C.CHANNEL_TYPE.WHATSAPP)?r.jsx(u.TitleRegular,{}):e&&t!=null&&t>=-1&&!!n?.mapping?.body?.length&&r.jsx(u.TitleRegular,{color:i.COLORS.text.secondary,children:`Step ${t===-1?1:2}/2`}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[d&&r.jsx(R.Badge,{errorText:m||"Some inputs are missing or incorrect. Please check"}),!d&&s&&r.jsx("div",{style:{marginRight:12},children:r.jsx(T.Tag,{tagText:s,LeadingIcon:h.default})}),!f&&r.jsx(j.Button,{disabled:p,id:"select-template-btn",buttonText:b,size:e?"small":"large",onClick:y})]})]})};exports.default=B;
 //# sourceMappingURL=Footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Footer.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { Tag } from '@src/components/tag/Tag';\nimport { isRCSChannel } from '@src/components/template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { Badge } from '../Badge';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{\n\tjustifyContent?: string;\n\tisWhatsappCarousel: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-width: 1px;\n\tborder-top-color: ${COLORS.stroke.primary};\n\tbox-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);\n\twidth: 100%;\n\tpadding: 0 24px;\n\tdisplay: flex;\n\tjustify-content: ${(props) => props.justifyContent ?? 'end'};\n\talign-items: center;\n\tgap: 12;\n\tborder-bottom-left-radius: 4px;\n\tborder-bottom-right-radius: 4px;\n\theight: ${(props) => (props.isWhatsappCarousel ? 64 : 80)}px;\n`;\n\nexport interface FooterProps {\n\tisWhatsappCarousel: boolean;\n\tonSelect: () => void;\n\tfooterButtonText?: string;\n\tfooterInfoText?: string;\n}\nconst Footer = ({\n\tisWhatsappCarousel,\n\tonSelect,\n\tfooterButtonText,\n\tfooterInfoText,\n}: FooterProps) => {\n\tconst {\n\t\tisError,\n\t\tselectedCarouselIndex,\n\t\tsetSelectedCarouselIndex,\n\t\tsetErrorIndexes,\n\t\ttemplate,\n\t\tshowVariablePicker,\n\t\thideFooterButton,\n\t\tcarouselBodyError,\n\t} = useTemplateModalContext();\n\tconst [buttonText, setButtonText] = useState<string>(\n\t\tisWhatsappCarousel ? 'Next' : 'Select template',\n\t);\n\n\tfunction onButtonClick() {\n\t\tif (\n\t\t\tisWhatsappCarousel &&\n\t\t\tselectedCarouselIndex === -1 &&\n\t\t\tsetSelectedCarouselIndex\n\t\t) {\n\t\t\tsetSelectedCarouselIndex(0);\n\t\t} else {\n\t\t\tsetErrorIndexes?.([]);\n\t\t\tonSelect();\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (footerButtonText) {\n\t\t\tsetButtonText(footerButtonText);\n\t\t} else {\n\t\t\tif (isWhatsappCarousel && selectedCarouselIndex === -1) {\n\t\t\t\tsetButtonText('Next');\n\t\t\t} else if (\n\t\t\t\tisWhatsappCarousel &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex > -1\n\t\t\t) {\n\t\t\t\tsetButtonText('Save & Select Template');\n\t\t\t}\n\t\t}\n\t}, [selectedCarouselIndex]);\n\n\treturn (\n\t\t<Container\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tjustifyContent={\n\t\t\t\tisWhatsappCarousel && !!template?.mapping?.body?.length\n\t\t\t\t\t? 'space-between'\n\t\t\t\t\t: 'end'\n\t\t\t}\n\t\t>\n\t\t\t{!isRCSChannel(template?.channel || CHANNEL_TYPE.WHATSAPP) ? (\n\t\t\t\tisWhatsappCarousel &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= -1 &&\n\t\t\t\t!!template?.mapping?.body?.length && (\n\t\t\t\t\t<TitleRegular color={COLORS.text.secondary}>{`Step ${\n\t\t\t\t\t\tselectedCarouselIndex === -1 ? 1 : 2\n\t\t\t\t\t}/2`}</TitleRegular>\n\t\t\t\t)\n\t\t\t) : (\n\t\t\t\t<TitleRegular />\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isError && (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\terrorText={\n\t\t\t\t\t\t\tcarouselBodyError ||\n\t\t\t\t\t\t\t'Some inputs are missing or incorrect. Please check'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{!isError && footerInfoText && (\n\t\t\t\t\t<div style={{ marginRight: 12 }}>\n\t\t\t\t\t\t<Tag tagText={footerInfoText} LeadingIcon={InfoIcon} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!hideFooterButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={showVariablePicker}\n\t\t\t\t\t\tid=\"select-template-btn\"\n\t\t\t\t\t\tbuttonText={buttonText}\n\t\t\t\t\t\tsize={isWhatsappCarousel ? 'small' : 'large'}\n\t\t\t\t\t\tonClick={onButtonClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport default Footer;\n"],"names":["Container","styled","COLORS","props","Footer","isWhatsappCarousel","onSelect","footerButtonText","footerInfoText","isError","selectedCarouselIndex","setSelectedCarouselIndex","setErrorIndexes","template","showVariablePicker","hideFooterButton","carouselBodyError","useTemplateModalContext","buttonText","setButtonText","useState","onButtonClick","useEffect","jsxs","isRCSChannel","CHANNEL_TYPE","TitleRegular","jsx","Badge","Tag","InfoIcon","Button"],"mappings":"2kBAYMA,EAAYC,EAAO;AAAA,eAIVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKrBC,GAAUA,EAAM,gBAAkB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,WAKhDA,GAAWA,EAAM,mBAAqB,GAAK,EAAG;AAAA,EASpDC,EAAS,CAAC,CACf,mBAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,eAAAC,CACD,IAAmB,CAClB,KAAM,CACL,QAAAC,EACA,sBAAAC,EACA,yBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,kBAAAC,CAAA,EACGC,0BAAA,EACE,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SACnCf,EAAqB,OAAS,iBAAA,EAG/B,SAASgB,GAAgB,CAEvBhB,GACAK,IAA0B,IAC1BC,EAEAA,EAAyB,CAAC,GAE1BC,IAAkB,CAAA,CAAE,EACpBN,EAAA,EAEF,CAEAgB,OAAAA,EAAAA,UAAU,IAAM,CACXf,EACHY,EAAcZ,CAAgB,EAE1BF,GAAsBK,IAA0B,GACnDS,EAAc,MAAM,EAEpBd,GACAK,GAAyB,MACzBA,EAAwB,IAExBS,EAAc,wBAAwB,CAGzC,EAAG,CAACT,CAAqB,CAAC,EAGzBa,EAAAA,KAACvB,EAAA,CACA,mBAAAK,EACA,eACCA,GAAwBQ,GAAU,SAAS,MAAM,OAC9C,gBACA,MAGH,SAAA,CAACW,EAAAA,aAAaX,GAAU,SAAWY,EAAAA,aAAa,QAAQ,QAUvDC,EAAAA,aAAA,EAAa,EATdrB,GACAK,GAAyB,MACzBA,GAAyB,IACzB,CAAC,CAACG,GAAU,SAAS,MAAM,QAC1Bc,EAAAA,IAACD,EAAAA,aAAA,CAAa,MAAOxB,EAAAA,OAAO,KAAK,UAAY,SAAA,QAC5CQ,IAA0B,GAAK,EAAI,CACpC,IAAA,CAAK,EAKPa,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,QAAA,EAGZ,SAAA,CAAAd,GACAkB,EAAAA,IAACC,EAAAA,MAAA,CACA,UACCZ,GACA,oDAAA,CAAA,EAIF,CAACP,GAAWD,GACZmB,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,YAAa,EAAA,EAC1B,eAACE,EAAAA,IAAA,CAAI,QAASrB,EAAgB,YAAasB,EAAAA,QAAU,EACtD,EAEA,CAACf,GACDY,EAAAA,IAACI,EAAAA,OAAA,CACA,SAAUjB,EACV,GAAG,sBACH,WAAAI,EACA,KAAMb,EAAqB,QAAU,QACrC,QAASgB,CAAA,CAAA,CACV,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH"}
+{"version":3,"file":"Footer.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Footer.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { Tag } from '@src/components/tag/Tag';\nimport { isRCSChannel } from '@src/components/template-preview/helpers/templateMiscHelper';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { Badge } from '../Badge';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{\n\tjustifyContent?: string;\n\tisWhatsappCarousel: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-width: 1px;\n\tborder-top-color: ${COLORS.stroke.primary};\n\tbox-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);\n\twidth: 100%;\n\tpadding: 0 24px;\n\tdisplay: flex;\n\tjustify-content: ${(props) => props.justifyContent ?? 'end'};\n\talign-items: center;\n\tgap: 12;\n\tborder-bottom-left-radius: 4px;\n\tborder-bottom-right-radius: 4px;\n\theight: ${(props) => (props.isWhatsappCarousel ? 64 : 80)}px;\n`;\n\nexport interface FooterProps {\n\tisWhatsappCarousel: boolean;\n\tonSelect: () => void;\n\tfooterButtonText?: string;\n\tfooterInfoText?: string;\n}\nconst Footer = ({\n\tisWhatsappCarousel,\n\tonSelect,\n\tfooterButtonText,\n\tfooterInfoText,\n}: FooterProps) => {\n\tconst {\n\t\tisError,\n\t\tselectedCarouselIndex,\n\t\tsetSelectedCarouselIndex,\n\t\tsetErrorIndexes,\n\t\ttemplate,\n\t\tshowVariablePicker,\n\t\thideFooterButton,\n\t\tcarouselBodyError,\n\t} = useTemplateModalContext();\n\tconst [buttonText, setButtonText] = useState<string>(\n\t\tisWhatsappCarousel ? 'Next' : 'Select template',\n\t);\n\n\tfunction onButtonClick() {\n\t\tif (\n\t\t\tisWhatsappCarousel &&\n\t\t\tselectedCarouselIndex === -1 &&\n\t\t\tsetSelectedCarouselIndex\n\t\t) {\n\t\t\tsetSelectedCarouselIndex(0);\n\t\t} else {\n\t\t\tsetErrorIndexes?.([]);\n\t\t\tonSelect();\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (footerButtonText) {\n\t\t\tsetButtonText(footerButtonText);\n\t\t} else {\n\t\t\tif (isWhatsappCarousel && selectedCarouselIndex === -1) {\n\t\t\t\tsetButtonText('Next');\n\t\t\t} else if (\n\t\t\t\tisWhatsappCarousel &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex > -1\n\t\t\t) {\n\t\t\t\tsetButtonText('Save & Select Template');\n\t\t\t}\n\t\t}\n\t}, [selectedCarouselIndex]);\n\n\treturn (\n\t\t<Container\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tjustifyContent={\n\t\t\t\tisWhatsappCarousel && !!template?.mapping?.body?.length\n\t\t\t\t\t? 'space-between'\n\t\t\t\t\t: 'end'\n\t\t\t}\n\t\t>\n\t\t\t{!isRCSChannel(template?.channel || CHANNEL_TYPE.WHATSAPP) ? (\n\t\t\t\tisWhatsappCarousel &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= -1 &&\n\t\t\t\t!!template?.mapping?.body?.length && (\n\t\t\t\t\t<TitleRegular color={COLORS.text.secondary}>{`Step ${\n\t\t\t\t\t\tselectedCarouselIndex === -1 ? 1 : 2\n\t\t\t\t\t}/2`}</TitleRegular>\n\t\t\t\t)\n\t\t\t) : (\n\t\t\t\t<TitleRegular />\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{isError && (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\terrorText={\n\t\t\t\t\t\t\tcarouselBodyError ||\n\t\t\t\t\t\t\t'Some inputs are missing or incorrect. Please check'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{!isError && footerInfoText && (\n\t\t\t\t\t<div style={{ marginRight: 12 }}>\n\t\t\t\t\t\t<Tag tagText={footerInfoText} LeadingIcon={InfoIcon} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!hideFooterButton && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={showVariablePicker}\n\t\t\t\t\t\tid=\"select-template-btn\"\n\t\t\t\t\t\tbuttonText={buttonText}\n\t\t\t\t\t\tsize={isWhatsappCarousel ? 'small' : 'large'}\n\t\t\t\t\t\tonClick={onButtonClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Container>\n\t);\n};\n\nexport default Footer;\n"],"names":["Container","styled","COLORS","props","Footer","isWhatsappCarousel","onSelect","footerButtonText","footerInfoText","isError","selectedCarouselIndex","setSelectedCarouselIndex","setErrorIndexes","template","showVariablePicker","hideFooterButton","carouselBodyError","useTemplateModalContext","buttonText","setButtonText","useState","onButtonClick","useEffect","jsxs","isRCSChannel","CHANNEL_TYPE","TitleRegular","jsx","Badge","Tag","InfoIcon","Button"],"mappings":"0oBAYMA,EAAYC,EAAAA,QAAO;AAAA,eAIVC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKrBC,GAAUA,EAAM,gBAAkB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,WAKhDA,GAAWA,EAAM,mBAAqB,GAAK,EAAG;AAAA,EASpDC,EAAS,CAAC,CACf,mBAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,eAAAC,CACD,IAAmB,CAClB,KAAM,CACL,QAAAC,EACA,sBAAAC,EACA,yBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,kBAAAC,CAAA,EACGC,0BAAA,EACE,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SACnCf,EAAqB,OAAS,iBAAA,EAG/B,SAASgB,GAAgB,CAEvBhB,GACAK,IAA0B,IAC1BC,EAEAA,EAAyB,CAAC,GAE1BC,IAAkB,CAAA,CAAE,EACpBN,EAAA,EAEF,CAEAgB,OAAAA,EAAAA,UAAU,IAAM,CACXf,EACHY,EAAcZ,CAAgB,EAE1BF,GAAsBK,IAA0B,GACnDS,EAAc,MAAM,EAEpBd,GACAK,GAAyB,MACzBA,EAAwB,IAExBS,EAAc,wBAAwB,CAGzC,EAAG,CAACT,CAAqB,CAAC,EAGzBa,EAAAA,KAACvB,EAAA,CACA,mBAAAK,EACA,eACCA,GAAwBQ,GAAU,SAAS,MAAM,OAC9C,gBACA,MAGH,SAAA,CAACW,EAAAA,aAAaX,GAAU,SAAWY,EAAAA,aAAa,QAAQ,QAUvDC,EAAAA,aAAA,EAAa,EATdrB,GACAK,GAAyB,MACzBA,GAAyB,IACzB,CAAC,CAACG,GAAU,SAAS,MAAM,QAC1Bc,EAAAA,IAACD,EAAAA,aAAA,CAAa,MAAOxB,EAAAA,OAAO,KAAK,UAAY,SAAA,QAC5CQ,IAA0B,GAAK,EAAI,CACpC,IAAA,CAAK,EAKPa,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,WAAY,QAAA,EAGZ,SAAA,CAAAd,GACAkB,EAAAA,IAACC,EAAAA,MAAA,CACA,UACCZ,GACA,oDAAA,CAAA,EAIF,CAACP,GAAWD,GACZmB,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,YAAa,EAAA,EAC1B,eAACE,EAAAA,IAAA,CAAI,QAASrB,EAAgB,YAAasB,EAAAA,QAAU,EACtD,EAEA,CAACf,GACDY,EAAAA,IAACI,EAAAA,OAAA,CACA,SAAUjB,EACV,GAAG,sBACH,WAAAI,EACA,KAAMb,EAAqB,QAAU,QACrC,QAASgB,CAAA,CAAA,CACV,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH"}

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

@@ -1,24 +1,24 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../assets/icons/desktop_custom.svg.js"),c=require("../../../assets/icons/mobile_custom.svg.js"),n=require("styled-components"),l=require("../../TypographyStyle.js"),e=require("../../../constants/Theme.js"),a=require("../context/templateModalContext.js"),p=n.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("../../../assets/icons/desktop_custom.svg.js"),c=require("../../../assets/icons/mobile_custom.svg.js"),l=require("styled-components"),a=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),p=require("../context/templateModalContext.js"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=u(l),b=r.default.div`
 	padding-top: 12px;
 	padding-bottom: 12px;
 	padding-left: 30px;
 	padding-right: 30px;
-	background-color: ${e.COLORS.surface.subdued};
+	background-color: ${t.COLORS.surface.subdued};
 	align-items: center;
 	display: flex;
-	filter: ${o=>o.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
-`,u=n.div`
+	filter: ${e=>e.showOnlyContent?"none":"drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)"};
+`,x=r.default.div`
 	display: flex;
-	border: 1px solid ${e.COLORS.stroke.primary};
+	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
 	overflow: hidden;
 	width: min-content;
-`,d=n.div`
-	background: ${o=>o.active?e.COLORS.background.brandLight:e.COLORS.background.base};
+`,i=r.default.div`
+	background: ${e=>e.active?t.COLORS.background.brandLight:t.COLORS.background.base};
 	padding: 6px 8px;
 	justify-content: center;
 	align-items: center;
-`,b=n(d)`
-	border-left: 1px solid ${e.COLORS.stroke.primary};
-`,x=({showOnlyContent:o})=>{const{device:r,setDevice:i}=a.useTemplateModalContext();return t.jsxs(p,{showOnlyContent:o,children:[t.jsxs(u,{children:[t.jsx(d,{active:r==="mobile",onClick:()=>i?.("mobile"),children:t.jsx(c.default,{color:r==="mobile"?e.COLORS.content.brand:e.COLORS.content.secondary,height:20,width:20})}),t.jsx(b,{active:r==="desktop",onClick:()=>i?.("desktop"),children:t.jsx(s.default,{color:r==="desktop"?e.COLORS.content.brand:e.COLORS.content.secondary,height:20,width:20})})]}),t.jsxs(l.BodyPrimary,{style:{color:e.COLORS.content.primary,marginLeft:16},children:[r==="mobile"?"Mobile":"Web"," view"]})]})};exports.default=x;
+`,f=r.default(i)`
+	border-left: 1px solid ${t.COLORS.stroke.primary};
+`,m=({showOnlyContent:e})=>{const{device:n,setDevice:d}=p.useTemplateModalContext();return o.jsxs(b,{showOnlyContent:e,children:[o.jsxs(x,{children:[o.jsx(i,{active:n==="mobile",onClick:()=>d?.("mobile"),children:o.jsx(c.default,{color:n==="mobile"?t.COLORS.content.brand:t.COLORS.content.secondary,height:20,width:20})}),o.jsx(f,{active:n==="desktop",onClick:()=>d?.("desktop"),children:o.jsx(s.default,{color:n==="desktop"?t.COLORS.content.brand:t.COLORS.content.secondary,height:20,width:20})})]}),o.jsxs(a.BodyPrimary,{style:{color:t.COLORS.content.primary,marginLeft:16},children:[n==="mobile"?"Mobile":"Web"," view"]})]})};exports.default=m;
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Header.tsx"],"sourcesContent":["import DesktopIcon from '@src/assets/icons/desktop_custom.svg';\nimport MobileIcon from '@src/assets/icons/mobile_custom.svg';\nimport styled from 'styled-components';\nimport { BodyPrimary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{ showOnlyContent?: boolean }>`\n\tpadding-top: 12px;\n\tpadding-bottom: 12px;\n\tpadding-left: 30px;\n\tpadding-right: 30px;\n\tbackground-color: ${COLORS.surface.subdued};\n\talign-items: center;\n\tdisplay: flex;\n\tfilter: ${(props) =>\n\t\tprops.showOnlyContent\n\t\t\t? 'none'\n\t\t\t: 'drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)'};\n`;\n\nconst DeviceIconWrapper = styled.div`\n\tdisplay: flex;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n\twidth: min-content;\n`;\n\nconst MobileIconHolder = styled.div<{\n\tactive?: boolean;\n}>`\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.background.base};\n\tpadding: 6px 8px;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst DesktopIconHolder = styled(MobileIconHolder)`\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport interface HeaderProps {\n\tshowOnlyContent?: boolean;\n}\n\nconst Header = ({ showOnlyContent }: HeaderProps) => {\n\tconst { device, setDevice } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container showOnlyContent={showOnlyContent}>\n\t\t\t<DeviceIconWrapper>\n\t\t\t\t<MobileIconHolder\n\t\t\t\t\tactive={device === 'mobile'}\n\t\t\t\t\tonClick={() => setDevice?.('mobile')}\n\t\t\t\t>\n\t\t\t\t\t<MobileIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'mobile'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</MobileIconHolder>\n\t\t\t\t<DesktopIconHolder\n\t\t\t\t\tactive={device === 'desktop'}\n\t\t\t\t\tonClick={() => setDevice?.('desktop')}\n\t\t\t\t>\n\t\t\t\t\t<DesktopIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'desktop'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</DesktopIconHolder>\n\t\t\t</DeviceIconWrapper>\n\t\t\t<BodyPrimary style={{ color: COLORS.content.primary, marginLeft: 16 }}>\n\t\t\t\t{device === 'mobile' ? 'Mobile' : 'Web'} view\n\t\t\t</BodyPrimary>\n\t\t</Container>\n\t);\n};\n\nexport default Header;\n"],"names":["Container","styled","COLORS","props","DeviceIconWrapper","MobileIconHolder","DesktopIconHolder","Header","showOnlyContent","device","setDevice","useTemplateModalContext","jsxs","jsx","MobileIcon","DesktopIcon","BodyPrimary"],"mappings":"gaAOMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKJC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,WAG/BC,GACVA,EAAM,gBACH,OACA,gDAAgD;AAAA,EAG/CC,EAAoBH,EAAO;AAAA;AAAA,qBAEZC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpCG,EAAmBJ,EAAO;AAAA,eAGhBE,GACdA,EAAM,OAASD,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,EAMhEI,EAAoBL,EAAOI,CAAgB;AAAA,0BACvBH,EAAAA,OAAO,OAAO,OAAO;AAAA,EAOzCK,EAAS,CAAC,CAAE,gBAAAC,KAAmC,CACpD,KAAM,CAAE,OAAAC,EAAQ,UAAAC,CAAA,EAAcC,0BAAA,EAE9B,OACCC,OAACZ,GAAU,gBAAAQ,EACV,SAAA,CAAAI,OAACR,EAAA,CACA,SAAA,CAAAS,EAAAA,IAACR,EAAA,CACA,OAAQI,IAAW,SACnB,QAAS,IAAMC,IAAY,QAAQ,EAEnC,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACA,MACCL,IAAW,SACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAEDW,EAAAA,IAACP,EAAA,CACA,OAAQG,IAAW,UACnB,QAAS,IAAMC,IAAY,SAAS,EAEpC,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACA,MACCN,IAAW,UACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,CACD,EACD,EACAU,EAAAA,KAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAOd,EAAAA,OAAO,QAAQ,QAAS,WAAY,EAAA,EAC/D,SAAA,CAAAO,IAAW,SAAW,SAAW,MAAM,OAAA,CAAA,CACzC,CAAA,EACD,CAEF"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/template-context-mapper/modalElements/Header.tsx"],"sourcesContent":["import DesktopIcon from '@src/assets/icons/desktop_custom.svg';\nimport MobileIcon from '@src/assets/icons/mobile_custom.svg';\nimport styled from 'styled-components';\nimport { BodyPrimary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../context/templateModalContext';\n\nconst Container = styled.div<{ showOnlyContent?: boolean }>`\n\tpadding-top: 12px;\n\tpadding-bottom: 12px;\n\tpadding-left: 30px;\n\tpadding-right: 30px;\n\tbackground-color: ${COLORS.surface.subdued};\n\talign-items: center;\n\tdisplay: flex;\n\tfilter: ${(props) =>\n\t\tprops.showOnlyContent\n\t\t\t? 'none'\n\t\t\t: 'drop-shadow(rgba(0, 0, 0, 0.12) 0px 12px 12px)'};\n`;\n\nconst DeviceIconWrapper = styled.div`\n\tdisplay: flex;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\toverflow: hidden;\n\twidth: min-content;\n`;\n\nconst MobileIconHolder = styled.div<{\n\tactive?: boolean;\n}>`\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.brandLight : COLORS.background.base};\n\tpadding: 6px 8px;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nconst DesktopIconHolder = styled(MobileIconHolder)`\n\tborder-left: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport interface HeaderProps {\n\tshowOnlyContent?: boolean;\n}\n\nconst Header = ({ showOnlyContent }: HeaderProps) => {\n\tconst { device, setDevice } = useTemplateModalContext();\n\n\treturn (\n\t\t<Container showOnlyContent={showOnlyContent}>\n\t\t\t<DeviceIconWrapper>\n\t\t\t\t<MobileIconHolder\n\t\t\t\t\tactive={device === 'mobile'}\n\t\t\t\t\tonClick={() => setDevice?.('mobile')}\n\t\t\t\t>\n\t\t\t\t\t<MobileIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'mobile'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</MobileIconHolder>\n\t\t\t\t<DesktopIconHolder\n\t\t\t\t\tactive={device === 'desktop'}\n\t\t\t\t\tonClick={() => setDevice?.('desktop')}\n\t\t\t\t>\n\t\t\t\t\t<DesktopIcon\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tdevice === 'desktop'\n\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t/>\n\t\t\t\t</DesktopIconHolder>\n\t\t\t</DeviceIconWrapper>\n\t\t\t<BodyPrimary style={{ color: COLORS.content.primary, marginLeft: 16 }}>\n\t\t\t\t{device === 'mobile' ? 'Mobile' : 'Web'} view\n\t\t\t</BodyPrimary>\n\t\t</Container>\n\t);\n};\n\nexport default Header;\n"],"names":["Container","styled","COLORS","props","DeviceIconWrapper","MobileIconHolder","DesktopIconHolder","Header","showOnlyContent","device","setDevice","useTemplateModalContext","jsxs","jsx","MobileIcon","DesktopIcon","BodyPrimary"],"mappings":"+dAOMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKJC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,WAG/BC,GACVA,EAAM,gBACH,OACA,gDAAgD;AAAA,EAG/CC,EAAoBH,EAAAA,QAAO;AAAA;AAAA,qBAEZC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMpCG,EAAmBJ,EAAAA,QAAO;AAAA,eAGhBE,GACdA,EAAM,OAASD,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,EAMhEI,EAAoBL,EAAAA,QAAOI,CAAgB;AAAA,0BACvBH,EAAAA,OAAO,OAAO,OAAO;AAAA,EAOzCK,EAAS,CAAC,CAAE,gBAAAC,KAAmC,CACpD,KAAM,CAAE,OAAAC,EAAQ,UAAAC,CAAA,EAAcC,0BAAA,EAE9B,OACCC,OAACZ,GAAU,gBAAAQ,EACV,SAAA,CAAAI,OAACR,EAAA,CACA,SAAA,CAAAS,EAAAA,IAACR,EAAA,CACA,OAAQI,IAAW,SACnB,QAAS,IAAMC,IAAY,QAAQ,EAEnC,SAAAG,EAAAA,IAACC,EAAAA,QAAA,CACA,MACCL,IAAW,SACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAEDW,EAAAA,IAACP,EAAA,CACA,OAAQG,IAAW,UACnB,QAAS,IAAMC,IAAY,SAAS,EAEpC,SAAAG,EAAAA,IAACE,EAAAA,QAAA,CACA,MACCN,IAAW,UACRP,EAAAA,OAAO,QAAQ,MACfA,EAAAA,OAAO,QAAQ,UAEnB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,CACD,EACD,EACAU,EAAAA,KAACI,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAOd,EAAAA,OAAO,QAAQ,QAAS,WAAY,EAAA,EAC/D,SAAA,CAAAO,IAAW,SAAW,SAAW,MAAM,OAAA,CAAA,CACzC,CAAA,EACD,CAEF"}

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("react"),r=require("styled-components"),a=require("../../template-preview/TemplatePreview.js"),m=require("../../template-preview/models/Channels.js"),v=require("../../template-preview/models/WhatsAppTemplate.js"),w=require("../context/templateModalContext.js"),s=require("../utils/getPreviewDimension.js"),b=r.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),m=require("react"),f=require("styled-components"),a=require("../../template-preview/TemplatePreview.js"),v=require("../../template-preview/models/Channels.js"),w=require("../../template-preview/models/WhatsAppTemplate.js"),b=require("../context/templateModalContext.js"),s=require("../utils/getPreviewDimension.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},g=l(m),o=l(f),x=o.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${t=>s.getPreviewWidth(t.channel)}px;
+	width: ${e=>s.getPreviewWidth(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,g=r.div`
+`,P=o.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,7 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,n=u.forwardRef(({display_content:t,channel:i,template:l,showSampleValues:c},d)=>{const{pod:p,hideDeviceContainerInPreview:h}=w.useTemplateModalContext(),o={showSampleValues:c,template:l,channel:i,smsSpecificMeta:{smsDisplayContent:t},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:p!==v.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:i==m.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:t,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return h?e.jsx(f,{children:e.jsx(a.TemplatePreview,{...o})}):e.jsx(e.Fragment,{children:e.jsxs(b,{channel:i,children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s.getPreviewWidth(i),height:443}}),e.jsx(g,{ref:d,children:e.jsx(a.TemplatePreview,{...o})})]})})});n.displayName="MobilePreview";const f=r.div`
+`,n=g.default.forwardRef(({display_content:e,channel:i,template:d,showSampleValues:c},p)=>{const{pod:u,hideDeviceContainerInPreview:h}=b.useTemplateModalContext(),r={showSampleValues:c,template:d,channel:i,smsSpecificMeta:{smsDisplayContent:e},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==w.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:i==v.CHANNEL_TYPE.RCS?"unset":240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:e,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0,hidePointerEvents:!0};return h?t.jsx(y,{children:t.jsx(a.TemplatePreview,{...r})}):t.jsx(t.Fragment,{children:t.jsxs(x,{channel:i,children:[t.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s.getPreviewWidth(i),height:443}}),t.jsx(P,{ref:p,children:t.jsx(a.TemplatePreview,{...r})})]})})});n.displayName="MobilePreview";const y=o.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"MobilePreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/MobilePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {\n\tTemplatePreview,\n\ttype TemplatePreviewProps,\n} from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type {\n\tAllTemplateTypes,\n\tNonNullTemplateTypes,\n} from '@src/components/template-preview/models/types';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { getPreviewWidth } from '../utils/getPreviewDimension';\n\nconst DeviceContainer = styled.div<{ channel: CHANNEL_TYPE }>`\n\tposition: relative;\n\theight: 100%;\n\tborder-radius: 31px;\n\twidth: ${(props) => getPreviewWidth(props.channel)}px;\n\tbackground-color: white;\n\tmargin: auto;\n\toverflow-y: auto;\n`;\n\nconst ContentWrapper = styled.div`\n\tposition: absolute;\n\tflex: 1;\n\tbackground-color: white;\n\tscroll-behavior: smooth;\n\tleft: 12px;\n\ttop: 8px;\n\twidth: calc(100% - 25px);\n\theight: calc(100% - 17px);\n\tborder-radius: 16px;\n\toverflow-y: auto;\n`;\n\nconst MobilePreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tdisplay_content: string;\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t}\n>(({ display_content, channel, template, showSampleValues }, ref) => {\n\tconst { pod, hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst templatePreviewProps: TemplatePreviewProps = {\n\t\tshowSampleValues,\n\t\ttemplate: template as NonNullTemplateTypes,\n\t\tchannel,\n\t\tsmsSpecificMeta: {\n\t\t\tsmsDisplayContent: display_content,\n\t\t},\n\t\twhatsAppSpecificMeta: {\n\t\t\tshowWhatsAppHeader: true,\n\t\t\twhatsAppExtras: pod !== POD.CHATBOT,\n\t\t\tcontainerStyle: {\n\t\t\t\tborder: 'none',\n\t\t\t\tborderBottomRightRadius: 0,\n\t\t\t\tborderBottomLeftRadius: 0,\n\t\t\t\tminHeight: 426,\n\t\t\t\twidth: channel == CHANNEL_TYPE.RCS ? 'unset' : 240,\n\t\t\t},\n\t\t},\n\t\tsize: 'small',\n\t\thideHeader: true,\n\t\temailSpecificMeta: {\n\t\t\temailDisplayContent: display_content,\n\t\t\thideViewButtonForEmail: true,\n\t\t\temailHtmlContainerId: 'template_html_mobile',\n\t\t\tcontainerStyle: {\n\t\t\t\theight: '100%',\n\t\t\t\twidth: '100%',\n\t\t\t},\n\t\t\ttemplateContainerStyles: {\n\t\t\t\theight: '100%',\n\t\t\t},\n\t\t},\n\t\tisPreview: true,\n\t\thidePointerEvents: true,\n\t};\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn (\n\t\t\t<StyledPlainPreview>\n\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t</StyledPlainPreview>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DeviceContainer channel={channel}>\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tsrc={\n\t\t\t\t\t\t'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a'\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: getPreviewWidth(channel),\n\t\t\t\t\t\theight: 443,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<ContentWrapper ref={ref}>\n\t\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t\t</ContentWrapper>\n\t\t\t</DeviceContainer>\n\t\t</>\n\t);\n});\n\nMobilePreview.displayName = 'MobilePreview';\n\nconst StyledPlainPreview = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n`;\n\nexport default MobilePreview;\n"],"names":["DeviceContainer","styled","props","getPreviewWidth","ContentWrapper","MobilePreview","React","display_content","channel","template","showSampleValues","ref","pod","hideDeviceContainerInPreview","useTemplateModalContext","templatePreviewProps","POD","CHANNEL_TYPE","StyledPlainPreview","jsx","TemplatePreview","Fragment","jsxs"],"mappings":"6cAeMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,UAIpBC,GAAUC,EAAAA,gBAAgBD,EAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAM7CE,EAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBI,EAAgBC,EAAM,WAQ1B,CAAC,CAAE,gBAAAC,EAAiB,QAAAC,EAAS,SAAAC,EAAU,iBAAAC,CAAA,EAAoBC,IAAQ,CACpE,KAAM,CAAE,IAAAC,EAAK,6BAAAC,CAAA,EAAiCC,0BAAA,EAExCC,EAA6C,CAClD,iBAAAL,EACA,SAAAD,EACA,QAAAD,EACA,gBAAiB,CAChB,kBAAmBD,CAAA,EAEpB,qBAAsB,CACrB,mBAAoB,GACpB,eAAgBK,IAAQI,EAAAA,IAAI,QAC5B,eAAgB,CACf,OAAQ,OACR,wBAAyB,EACzB,uBAAwB,EACxB,UAAW,IACX,MAAOR,GAAWS,eAAa,IAAM,QAAU,GAAA,CAChD,EAED,KAAM,QACN,WAAY,GACZ,kBAAmB,CAClB,oBAAqBV,EACrB,uBAAwB,GACxB,qBAAsB,uBACtB,eAAgB,CACf,OAAQ,OACR,MAAO,MAAA,EAER,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,UAAW,GACX,kBAAmB,EAAA,EAGpB,OAAIM,QAEDK,EAAA,CACA,SAAAC,EAAAA,IAACC,EAAAA,gBAAA,CAAiB,GAAGL,EAAsB,EAC5C,EAKDI,EAAAA,IAAAE,EAAAA,SAAA,CACC,SAAAC,EAAAA,KAACtB,EAAA,CAAgB,QAAAQ,EAChB,SAAA,CAAAW,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,IACC,6NAED,MAAO,CACN,MAAOhB,EAAAA,gBAAgBK,CAAO,EAC9B,OAAQ,GAAA,CACT,CAAA,QAEAJ,EAAA,CAAe,IAAAO,EACf,eAACS,kBAAA,CAAiB,GAAGL,EAAsB,CAAA,CAC5C,CAAA,CAAA,CACD,CAAA,CACD,CAEF,CAAC,EAEDV,EAAc,YAAc,gBAE5B,MAAMa,EAAqBjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"MobilePreview.js","sources":["../../../../../src/components/template-context-mapper/modalElements/MobilePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {\n\tTemplatePreview,\n\ttype TemplatePreviewProps,\n} from '@src/components/template-preview/TemplatePreview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport type {\n\tAllTemplateTypes,\n\tNonNullTemplateTypes,\n} from '@src/components/template-preview/models/types';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { getPreviewWidth } from '../utils/getPreviewDimension';\n\nconst DeviceContainer = styled.div<{ channel: CHANNEL_TYPE }>`\n\tposition: relative;\n\theight: 100%;\n\tborder-radius: 31px;\n\twidth: ${(props) => getPreviewWidth(props.channel)}px;\n\tbackground-color: white;\n\tmargin: auto;\n\toverflow-y: auto;\n`;\n\nconst ContentWrapper = styled.div`\n\tposition: absolute;\n\tflex: 1;\n\tbackground-color: white;\n\tscroll-behavior: smooth;\n\tleft: 12px;\n\ttop: 8px;\n\twidth: calc(100% - 25px);\n\theight: calc(100% - 17px);\n\tborder-radius: 16px;\n\toverflow-y: auto;\n`;\n\nconst MobilePreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tdisplay_content: string;\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t}\n>(({ display_content, channel, template, showSampleValues }, ref) => {\n\tconst { pod, hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst templatePreviewProps: TemplatePreviewProps = {\n\t\tshowSampleValues,\n\t\ttemplate: template as NonNullTemplateTypes,\n\t\tchannel,\n\t\tsmsSpecificMeta: {\n\t\t\tsmsDisplayContent: display_content,\n\t\t},\n\t\twhatsAppSpecificMeta: {\n\t\t\tshowWhatsAppHeader: true,\n\t\t\twhatsAppExtras: pod !== POD.CHATBOT,\n\t\t\tcontainerStyle: {\n\t\t\t\tborder: 'none',\n\t\t\t\tborderBottomRightRadius: 0,\n\t\t\t\tborderBottomLeftRadius: 0,\n\t\t\t\tminHeight: 426,\n\t\t\t\twidth: channel == CHANNEL_TYPE.RCS ? 'unset' : 240,\n\t\t\t},\n\t\t},\n\t\tsize: 'small',\n\t\thideHeader: true,\n\t\temailSpecificMeta: {\n\t\t\temailDisplayContent: display_content,\n\t\t\thideViewButtonForEmail: true,\n\t\t\temailHtmlContainerId: 'template_html_mobile',\n\t\t\tcontainerStyle: {\n\t\t\t\theight: '100%',\n\t\t\t\twidth: '100%',\n\t\t\t},\n\t\t\ttemplateContainerStyles: {\n\t\t\t\theight: '100%',\n\t\t\t},\n\t\t},\n\t\tisPreview: true,\n\t\thidePointerEvents: true,\n\t};\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn (\n\t\t\t<StyledPlainPreview>\n\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t</StyledPlainPreview>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DeviceContainer channel={channel}>\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tsrc={\n\t\t\t\t\t\t'https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a'\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: getPreviewWidth(channel),\n\t\t\t\t\t\theight: 443,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<ContentWrapper ref={ref}>\n\t\t\t\t\t<TemplatePreview {...templatePreviewProps} />\n\t\t\t\t</ContentWrapper>\n\t\t\t</DeviceContainer>\n\t\t</>\n\t);\n});\n\nMobilePreview.displayName = 'MobilePreview';\n\nconst StyledPlainPreview = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 1;\n`;\n\nexport default MobilePreview;\n"],"names":["DeviceContainer","styled","props","getPreviewWidth","ContentWrapper","MobilePreview","React","display_content","channel","template","showSampleValues","ref","pod","hideDeviceContainerInPreview","useTemplateModalContext","templatePreviewProps","POD","CHANNEL_TYPE","StyledPlainPreview","jsx","TemplatePreview","Fragment","jsxs"],"mappings":"mhBAeMA,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,UAIpBC,GAAUC,EAAAA,gBAAgBD,EAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAM7CE,EAAiBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBI,EAAgBC,EAAAA,QAAM,WAQ1B,CAAC,CAAE,gBAAAC,EAAiB,QAAAC,EAAS,SAAAC,EAAU,iBAAAC,CAAA,EAAoBC,IAAQ,CACpE,KAAM,CAAE,IAAAC,EAAK,6BAAAC,CAAA,EAAiCC,0BAAA,EAExCC,EAA6C,CAClD,iBAAAL,EACA,SAAAD,EACA,QAAAD,EACA,gBAAiB,CAChB,kBAAmBD,CAAA,EAEpB,qBAAsB,CACrB,mBAAoB,GACpB,eAAgBK,IAAQI,EAAAA,IAAI,QAC5B,eAAgB,CACf,OAAQ,OACR,wBAAyB,EACzB,uBAAwB,EACxB,UAAW,IACX,MAAOR,GAAWS,eAAa,IAAM,QAAU,GAAA,CAChD,EAED,KAAM,QACN,WAAY,GACZ,kBAAmB,CAClB,oBAAqBV,EACrB,uBAAwB,GACxB,qBAAsB,uBACtB,eAAgB,CACf,OAAQ,OACR,MAAO,MAAA,EAER,wBAAyB,CACxB,OAAQ,MAAA,CACT,EAED,UAAW,GACX,kBAAmB,EAAA,EAGpB,OAAIM,QAEDK,EAAA,CACA,SAAAC,EAAAA,IAACC,EAAAA,gBAAA,CAAiB,GAAGL,EAAsB,EAC5C,EAKDI,EAAAA,IAAAE,EAAAA,SAAA,CACC,SAAAC,EAAAA,KAACtB,EAAA,CAAgB,QAAAQ,EAChB,SAAA,CAAAW,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,IACC,6NAED,MAAO,CACN,MAAOhB,EAAAA,gBAAgBK,CAAO,EAC9B,OAAQ,GAAA,CACT,CAAA,QAEAJ,EAAA,CAAe,IAAAO,EACf,eAACS,kBAAA,CAAiB,GAAGL,EAAsB,CAAA,CAC5C,CAAA,CAAA,CACD,CAAA,CACD,CAEF,CAAC,EAEDV,EAAc,YAAc,gBAE5B,MAAMa,EAAqBjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../assets/icons/box.svg.js"),a=require("../../../assets/icons/delete.svg.js"),f=require("../../../assets/icons/edit.svg.js"),h=require("styled-components"),x=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),l=require("../../icon-button/IconButton.js"),p=h.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../assets/icons/box.svg.js"),a=require("../../../assets/icons/delete.svg.js"),f=require("../../../assets/icons/edit.svg.js"),h=require("styled-components"),p=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),l=require("../../icon-button/IconButton.js"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},x=u(h),y=x.default.div`
 	width: ${t=>t.width};
 	padding: 12px;
 	display: flex;
@@ -44,5 +44,5 @@
 			color: #000000;
 		}
 	}
-`,y=t=>{const{cardBody:r,deleteItem:c,editItem:i,hideIcon:d}=t;return e.jsxs(p,{width:"100%",children:[!d&&e.jsx("div",{style:{width:36,height:36},children:e.jsx(s.default,{})}),e.jsx("div",{className:"card-body",children:e.jsx(x.TitleSmall,{color:n.COLORS.content.secondary,children:r})}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[i&&e.jsx(l.IconButton,{style:{display:"flex"},Icon:()=>e.jsx(f.default,{width:24,height:24,color:n.COLORS.content.placeholder}),onClick:o=>{i(),o.stopPropagation()}}),e.jsx(l.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsx(a.default,{width:24,height:24,color:n.COLORS.content.placeholder}),onClick:o=>{c(),o.stopPropagation()}})]})]})};exports.ProductBox=y;
+`,m=t=>{const{cardBody:r,deleteItem:c,editItem:i,hideIcon:d}=t;return e.jsxs(y,{width:"100%",children:[!d&&e.jsx("div",{style:{width:36,height:36},children:e.jsx(s.default,{})}),e.jsx("div",{className:"card-body",children:e.jsx(p.TitleSmall,{color:n.COLORS.content.secondary,children:r})}),e.jsxs("div",{style:{display:"flex",alignItems:"center"},children:[i&&e.jsx(l.IconButton,{style:{display:"flex"},Icon:()=>e.jsx(f.default,{width:24,height:24,color:n.COLORS.content.placeholder}),onClick:o=>{i(),o.stopPropagation()}}),e.jsx(l.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsx(a.default,{width:24,height:24,color:n.COLORS.content.placeholder}),onClick:o=>{c(),o.stopPropagation()}})]})]})};exports.ProductBox=m;
 //# sourceMappingURL=ProductBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProductBox.js","sources":["../../../../../src/components/template-context-mapper/modalElements/ProductBox.tsx"],"sourcesContent":["import BoxIcon from '@src/assets/icons/box.svg';\nimport DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SimpleCardStyle = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 14px;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: #ffffff;\n\n\tborder: 1px solid #e0e0e0;\n\tborder-radius: 4px;\n\n\t.card-body {\n\t\twidth: 256px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\n\t\t&__dynamic {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #731dcf;\n\n\t\t\t&__desc {\n\t\t\t\tfont-family: 'Inter';\n\t\t\t\tfont-style: normal;\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tcolor: #616161;\n\t\t\t}\n\t\t}\n\n\t\t&__simple {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #000000;\n\t\t}\n\t}\n`;\n\ninterface ProductBoxProps {\n\tcardBody: string;\n\tdeleteItem: any;\n\teditItem?: any;\n\thideIcon?: boolean;\n}\n\nexport const ProductBox = (props: ProductBoxProps) => {\n\tconst { cardBody, deleteItem, editItem, hideIcon } = props;\n\n\treturn (\n\t\t<SimpleCardStyle width={'100%'}>\n\t\t\t{!hideIcon && (\n\t\t\t\t<div style={{ width: 36, height: 36 }}>\n\t\t\t\t\t<BoxIcon />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"card-body\">\n\t\t\t\t<TitleSmall color={COLORS.content.secondary}>{cardBody}</TitleSmall>\n\t\t\t</div>\n\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t{editItem && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\t\teditItem();\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<IconButton\n\t\t\t\t\tstyle={{ display: 'flex', color: '#919191' }}\n\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\tdeleteItem();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</SimpleCardStyle>\n\t);\n};\n"],"names":["SimpleCardStyle","styled","props","ProductBox","cardBody","deleteItem","editItem","hideIcon","jsxs","jsx","BoxIcon","TitleSmall","COLORS","IconButton","EditIcon","e","DeleteIcon"],"mappings":"8ZAQMA,EAAkBC,EAAO;AAAA,UACpBC,GAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsDnBC,EAAcD,GAA2B,CACrD,KAAM,CAAE,SAAAE,EAAU,WAAAC,EAAY,SAAAC,EAAU,SAAAC,GAAaL,EAErD,OACCM,EAAAA,KAACR,EAAA,CAAgB,MAAO,OACtB,SAAA,CAAA,CAACO,GACDE,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAA,EAAAA,IAACC,EAAAA,QAAA,CAAA,CAAQ,EACV,EAEDD,EAAAA,IAAC,MAAA,CAAI,UAAU,YACd,SAAAA,EAAAA,IAACE,EAAAA,WAAA,CAAW,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAR,CAAA,CAAS,EACxD,EACAI,OAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,UACzC,SAAA,CAAAF,GACAG,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,MAAA,EAClB,KAAM,IACLJ,EAAAA,IAACK,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGxB,QAAUG,GAAW,CACpBT,EAAA,EACAS,EAAE,gBAAA,CACH,CAAA,CAAA,EAGFN,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,OAAQ,MAAO,SAAA,EACjC,KAAM,IACLJ,EAAAA,IAACO,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOJ,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGxB,QAAUG,GAAW,CACpBV,EAAA,EACAU,EAAE,gBAAA,CACH,CAAA,CAAA,CACD,CAAA,CACD,CAAA,EACD,CAEF"}
+{"version":3,"file":"ProductBox.js","sources":["../../../../../src/components/template-context-mapper/modalElements/ProductBox.tsx"],"sourcesContent":["import BoxIcon from '@src/assets/icons/box.svg';\nimport DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nconst SimpleCardStyle = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 14px;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground: #ffffff;\n\n\tborder: 1px solid #e0e0e0;\n\tborder-radius: 4px;\n\n\t.card-body {\n\t\twidth: 256px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\n\t\t&__dynamic {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #731dcf;\n\n\t\t\t&__desc {\n\t\t\t\tfont-family: 'Inter';\n\t\t\t\tfont-style: normal;\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tline-height: 16px;\n\t\t\t\tcolor: #616161;\n\t\t\t}\n\t\t}\n\n\t\t&__simple {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 24px;\n\t\t\tcolor: #000000;\n\t\t}\n\t}\n`;\n\ninterface ProductBoxProps {\n\tcardBody: string;\n\tdeleteItem: any;\n\teditItem?: any;\n\thideIcon?: boolean;\n}\n\nexport const ProductBox = (props: ProductBoxProps) => {\n\tconst { cardBody, deleteItem, editItem, hideIcon } = props;\n\n\treturn (\n\t\t<SimpleCardStyle width={'100%'}>\n\t\t\t{!hideIcon && (\n\t\t\t\t<div style={{ width: 36, height: 36 }}>\n\t\t\t\t\t<BoxIcon />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"card-body\">\n\t\t\t\t<TitleSmall color={COLORS.content.secondary}>{cardBody}</TitleSmall>\n\t\t\t</div>\n\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t{editItem && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t<EditIcon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\t\teditItem();\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<IconButton\n\t\t\t\t\tstyle={{ display: 'flex', color: '#919191' }}\n\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={(e: any) => {\n\t\t\t\t\t\tdeleteItem();\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</SimpleCardStyle>\n\t);\n};\n"],"names":["SimpleCardStyle","styled","props","ProductBox","cardBody","deleteItem","editItem","hideIcon","jsxs","jsx","BoxIcon","TitleSmall","COLORS","IconButton","EditIcon","e","DeleteIcon"],"mappings":"6dAQMA,EAAkBC,EAAAA,QAAO;AAAA,UACpBC,GAAUA,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsDnBC,EAAcD,GAA2B,CACrD,KAAM,CAAE,SAAAE,EAAU,WAAAC,EAAY,SAAAC,EAAU,SAAAC,GAAaL,EAErD,OACCM,EAAAA,KAACR,EAAA,CAAgB,MAAO,OACtB,SAAA,CAAA,CAACO,GACDE,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAA,EAAAA,IAACC,EAAAA,QAAA,CAAA,CAAQ,EACV,EAEDD,EAAAA,IAAC,MAAA,CAAI,UAAU,YACd,SAAAA,EAAAA,IAACE,EAAAA,WAAA,CAAW,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAR,CAAA,CAAS,EACxD,EACAI,OAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,UACzC,SAAA,CAAAF,GACAG,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,MAAA,EAClB,KAAM,IACLJ,EAAAA,IAACK,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGxB,QAAUG,GAAW,CACpBT,EAAA,EACAS,EAAE,gBAAA,CACH,CAAA,CAAA,EAGFN,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,CAAE,QAAS,OAAQ,MAAO,SAAA,EACjC,KAAM,IACLJ,EAAAA,IAACO,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOJ,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGxB,QAAUG,GAAW,CACpBV,EAAA,EACAU,EAAE,gBAAA,CACH,CAAA,CAAA,CACD,CAAA,CACD,CAAA,EACD,CAEF"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../../assets/icons/delete.svg.js"),C=require("../../../assets/icons/PlusIcon.js"),p=require("react"),j=require("styled-components"),v=require("../../button/Button.js"),q=require("../../checkBox/CheckBox.js"),I=require("../../icon-button/IconButton.js"),h=require("../../input/Input.js"),k=require("../../TypographyStyle.js"),S=require("../../../constants/Theme.js"),T=m=>{const{params:u,onChange:l,isError:y,variableValue:x}=m,[i,g]=p.useState(u.length>0),[a,r]=p.useState(u);return p.useEffect(()=>{r(u)},[x]),e.jsxs(P,{children:[e.jsxs("div",{style:{display:"flex"},children:[e.jsx(q.CheckBox,{isChecked:i,onValueChange:t=>{r([]),l([]),g(t)}}),e.jsx(k.TitleSmall,{style:{marginLeft:8},children:"Add custom query params"})]}),i&&a.map((t,c)=>e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(h.Input,{placeholder:"Key",value:t.key,onChangeText:s=>{const o=a.map((n,d)=>d===c?{...n,key:s}:n);r(o),l(o)},state:y&&!t.key.length?"invalid":"none"}),e.jsx(h.Input,{placeholder:"Value",value:t.value,onChangeText:s=>{const o=a.map((n,d)=>d===c?{...n,value:s}:n);r(o),l(o)},state:y&&!t.value.length?"invalid":"none"}),e.jsx(I.IconButton,{Icon:f.default,width:20,height:20,onClick:()=>{const s=a.filter((o,n)=>n!=c);r(s),l(s)}})]},c)),i&&u.length<10&&e.jsx(v.Button,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:e.jsx(C.default,{width:16,height:16,color:S.COLORS.content.secondary})}),onClick:()=>{const t=[...a,{key:"",value:""}];r(t),l(t)}})]})},P=j.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../../assets/icons/delete.svg.js"),C=require("../../../assets/icons/PlusIcon.js"),y=require("react"),j=require("styled-components"),v=require("../../button/Button.js"),q=require("../../checkBox/CheckBox.js"),I=require("../../icon-button/IconButton.js"),m=require("../../input/Input.js"),k=require("../../TypographyStyle.js"),S=require("../../../constants/Theme.js"),T=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},b=T(j),P=n=>{const{params:c,onChange:a,isError:h,variableValue:x}=n,[d,f]=y.useState(c.length>0),[u,s]=y.useState(c);return y.useEffect(()=>{s(c)},[x]),e.jsxs(B,{children:[e.jsxs("div",{style:{display:"flex"},children:[e.jsx(q.CheckBox,{isChecked:d,onValueChange:t=>{s([]),a([]),f(t)}}),e.jsx(k.TitleSmall,{style:{marginLeft:8},children:"Add custom query params"})]}),d&&u.map((t,i)=>e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(m.Input,{placeholder:"Key",value:t.key,onChangeText:o=>{const l=u.map((r,p)=>p===i?{...r,key:o}:r);s(l),a(l)},state:h&&!t.key.length?"invalid":"none"}),e.jsx(m.Input,{placeholder:"Value",value:t.value,onChangeText:o=>{const l=u.map((r,p)=>p===i?{...r,value:o}:r);s(l),a(l)},state:h&&!t.value.length?"invalid":"none"}),e.jsx(I.IconButton,{Icon:g.default,width:20,height:20,onClick:()=>{const o=u.filter((l,r)=>r!=i);s(o),a(o)}})]},i)),d&&c.length<10&&e.jsx(v.Button,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:e.jsx(C.default,{width:16,height:16,color:S.COLORS.content.secondary})}),onClick:()=>{const t=[...u,{key:"",value:""}];s(t),a(t)}})]})},B=b.default.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -8,5 +8,5 @@
 		justify-content: center;
 		padding: 12px !important;
 	}
-`;exports.QueryParamsComponent=T;
+`;exports.QueryParamsComponent=P;
 //# sourceMappingURL=QueryParamsComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QueryParamsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const QueryParamsComponent = (props: {\n\tparams: { key: string; value: string }[];\n\tonChange: (params: { key: string; value: string }[]) => void;\n\tisError: boolean;\n\tvariableValue?: string;\n}) => {\n\tconst { params, onChange, isError, variableValue } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(params.length > 0);\n\tconst [paramsLocal, setParamsLocal] =\n\t\tuseState<{ key: string; value: string }[]>(params);\n\n\t// When variable value changes, reset params\n\tuseEffect(() => {\n\t\tsetParamsLocal(params);\n\t}, [variableValue]);\n\n\treturn (\n\t\t<StyledQueryParamsComponent>\n\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\tonValueChange={(checked: boolean) => {\n\t\t\t\t\t\tsetParamsLocal([]);\n\t\t\t\t\t\tonChange([]);\n\t\t\t\t\t\tsetIsChecked(checked);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\tAdd custom query params\n\t\t\t\t</TitleSmall>\n\t\t\t</div>\n\n\t\t\t{isChecked &&\n\t\t\t\tparamsLocal.map((param, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ display: 'flex', gap: '8px' }} key={index}>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Key'}\n\t\t\t\t\t\t\t\tvalue={param.key}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tkey: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.key.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Value'}\n\t\t\t\t\t\t\t\tvalue={param.value}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.value.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tIcon={DeleteIcon}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.filter(\n\t\t\t\t\t\t\t\t\t\t(_, curIndex) => curIndex != index,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t{isChecked && params.length < 10 && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={'Add Params'}\n\t\t\t\t\tbuttonType={'dashRegular'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tIconComponent={() => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\twidth: '20px',\n\t\t\t\t\t\t\t\theight: '20px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst temp = [...paramsLocal, { key: '', value: '' }];\n\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</StyledQueryParamsComponent>\n\t);\n};\n\nconst StyledQueryParamsComponent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\n\t.button-container {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 12px !important;\n\t}\n`;\n"],"names":["QueryParamsComponent","props","params","onChange","isError","variableValue","isChecked","setIsChecked","useState","paramsLocal","setParamsLocal","useEffect","StyledQueryParamsComponent","jsxs","jsx","CheckBox","checked","TitleSmall","param","index","Input","input","temp","p","i","IconButton","DeleteIcon","_","curIndex","Button","PlusIcon","COLORS","styled"],"mappings":"ifAWaA,EAAwBC,GAK/B,CACL,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,cAAAC,GAAkBJ,EAC/C,CAACK,EAAWC,CAAY,EAAIC,EAAAA,SAAkBN,EAAO,OAAS,CAAC,EAC/D,CAACO,EAAaC,CAAc,EACjCF,EAAAA,SAA2CN,CAAM,EAGlDS,OAAAA,EAAAA,UAAU,IAAM,CACfD,EAAeR,CAAM,CACtB,EAAG,CAACG,CAAa,CAAC,SAGhBO,EAAA,CACA,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,SAAA,CACA,UAAAT,EACA,cAAgBU,GAAqB,CACpCN,EAAe,CAAA,CAAE,EACjBP,EAAS,CAAA,CAAE,EACXI,EAAaS,CAAO,CACrB,CAAA,CAAA,QAEAC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,yBAAA,CAEtC,CAAA,EACD,EAECX,GACAG,EAAY,IAAI,CAACS,EAAOC,IAEtBN,EAAAA,KAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,IAAK,OACnC,SAAA,CAAAC,EAAAA,IAACM,EAAAA,MAAA,CACA,YAAa,MACb,MAAOF,EAAM,IACb,aAAeG,GAAU,CAExB,MAAMC,EAAOb,EAAY,IAAI,CAACc,EAAGC,IAC5BA,IAAML,EACF,CACN,GAAGI,EACH,IAAKF,CAAA,EAGAE,CACP,EACDb,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,EACA,MAAOlB,GAAW,CAACc,EAAM,IAAI,OAAS,UAAY,MAAA,CAAA,EAEnDJ,EAAAA,IAACM,EAAAA,MAAA,CACA,YAAa,QACb,MAAOF,EAAM,MACb,aAAeG,GAAU,CAExB,MAAMC,EAAOb,EAAY,IAAI,CAACc,EAAGC,IAC5BA,IAAML,EACF,CACN,GAAGI,EACH,MAAOF,CAAA,EAGFE,CACP,EACDb,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,EACA,MAAOlB,GAAW,CAACc,EAAM,MAAM,OAAS,UAAY,MAAA,CAAA,EAErDJ,EAAAA,IAACW,EAAAA,WAAA,CACA,KAAMC,EAAAA,QACN,MAAO,GACP,OAAQ,GACR,QAAS,IAAM,CACd,MAAMJ,EAAOb,EAAY,OACxB,CAACkB,EAAGC,IAAaA,GAAYT,CAAA,EAE9BT,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,CAAA,CAAA,CACD,CAAA,EArDiDH,CAsDlD,CAED,EACDb,GAAaJ,EAAO,OAAS,IAC7BY,EAAAA,IAACe,EAAAA,OAAA,CACA,WAAY,aACZ,WAAY,cACZ,MAAO,CACN,QAAS,OACT,WAAY,SACZ,eAAgB,QAAA,EAEjB,cAAe,IACdf,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,MAAA,EAGT,SAAAA,EAAAA,IAACgB,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOC,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CAAA,EAGF,QAAS,IAAM,CACd,MAAMT,EAAO,CAAC,GAAGb,EAAa,CAAE,IAAK,GAAI,MAAO,GAAI,EACpDC,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CACd,CAAA,CAAA,CACD,EAEF,CAEF,EAEMV,EAA6BoB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"QueryParamsComponent.js","sources":["../../../../../src/components/template-context-mapper/modalElements/QueryParamsComponent.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button/Button';\nimport { CheckBox } from '@src/components/checkBox/CheckBox';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { Input } from '@src/components/input/Input';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const QueryParamsComponent = (props: {\n\tparams: { key: string; value: string }[];\n\tonChange: (params: { key: string; value: string }[]) => void;\n\tisError: boolean;\n\tvariableValue?: string;\n}) => {\n\tconst { params, onChange, isError, variableValue } = props;\n\tconst [isChecked, setIsChecked] = useState<boolean>(params.length > 0);\n\tconst [paramsLocal, setParamsLocal] =\n\t\tuseState<{ key: string; value: string }[]>(params);\n\n\t// When variable value changes, reset params\n\tuseEffect(() => {\n\t\tsetParamsLocal(params);\n\t}, [variableValue]);\n\n\treturn (\n\t\t<StyledQueryParamsComponent>\n\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\tonValueChange={(checked: boolean) => {\n\t\t\t\t\t\tsetParamsLocal([]);\n\t\t\t\t\t\tonChange([]);\n\t\t\t\t\t\tsetIsChecked(checked);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<TitleSmall style={{ marginLeft: 8 }}>\n\t\t\t\t\tAdd custom query params\n\t\t\t\t</TitleSmall>\n\t\t\t</div>\n\n\t\t\t{isChecked &&\n\t\t\t\tparamsLocal.map((param, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div style={{ display: 'flex', gap: '8px' }} key={index}>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Key'}\n\t\t\t\t\t\t\t\tvalue={param.key}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tkey: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.key.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tplaceholder={'Value'}\n\t\t\t\t\t\t\t\tvalue={param.value}\n\t\t\t\t\t\t\t\tonChangeText={(input) => {\n\t\t\t\t\t\t\t\t\t// param.key = input;\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.map((p, i) => {\n\t\t\t\t\t\t\t\t\t\tif (i === index) {\n\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t...p,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: input,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn p;\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstate={isError && !param.value.length ? 'invalid' : 'none'}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tIcon={DeleteIcon}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tconst temp = paramsLocal.filter(\n\t\t\t\t\t\t\t\t\t\t(_, curIndex) => curIndex != index,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t{isChecked && params.length < 10 && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={'Add Params'}\n\t\t\t\t\tbuttonType={'dashRegular'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tIconComponent={() => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\twidth: '20px',\n\t\t\t\t\t\t\t\theight: '20px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst temp = [...paramsLocal, { key: '', value: '' }];\n\t\t\t\t\t\tsetParamsLocal(temp);\n\t\t\t\t\t\tonChange(temp);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</StyledQueryParamsComponent>\n\t);\n};\n\nconst StyledQueryParamsComponent = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\n\t.button-container {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 12px !important;\n\t}\n`;\n"],"names":["QueryParamsComponent","props","params","onChange","isError","variableValue","isChecked","setIsChecked","useState","paramsLocal","setParamsLocal","useEffect","StyledQueryParamsComponent","jsxs","jsx","CheckBox","checked","TitleSmall","param","index","Input","input","temp","p","i","IconButton","DeleteIcon","_","curIndex","Button","PlusIcon","COLORS","styled"],"mappings":"gjBAWaA,EAAwBC,GAK/B,CACL,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAS,cAAAC,GAAkBJ,EAC/C,CAACK,EAAWC,CAAY,EAAIC,EAAAA,SAAkBN,EAAO,OAAS,CAAC,EAC/D,CAACO,EAAaC,CAAc,EACjCF,EAAAA,SAA2CN,CAAM,EAGlDS,OAAAA,EAAAA,UAAU,IAAM,CACfD,EAAeR,CAAM,CACtB,EAAG,CAACG,CAAa,CAAC,SAGhBO,EAAA,CACA,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QACtB,SAAA,CAAAC,EAAAA,IAACC,EAAAA,SAAA,CACA,UAAAT,EACA,cAAgBU,GAAqB,CACpCN,EAAe,CAAA,CAAE,EACjBP,EAAS,CAAA,CAAE,EACXI,EAAaS,CAAO,CACrB,CAAA,CAAA,QAEAC,EAAAA,WAAA,CAAW,MAAO,CAAE,WAAY,CAAA,EAAK,SAAA,yBAAA,CAEtC,CAAA,EACD,EAECX,GACAG,EAAY,IAAI,CAACS,EAAOC,IAEtBN,EAAAA,KAAC,OAAI,MAAO,CAAE,QAAS,OAAQ,IAAK,OACnC,SAAA,CAAAC,EAAAA,IAACM,EAAAA,MAAA,CACA,YAAa,MACb,MAAOF,EAAM,IACb,aAAeG,GAAU,CAExB,MAAMC,EAAOb,EAAY,IAAI,CAACc,EAAGC,IAC5BA,IAAML,EACF,CACN,GAAGI,EACH,IAAKF,CAAA,EAGAE,CACP,EACDb,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,EACA,MAAOlB,GAAW,CAACc,EAAM,IAAI,OAAS,UAAY,MAAA,CAAA,EAEnDJ,EAAAA,IAACM,EAAAA,MAAA,CACA,YAAa,QACb,MAAOF,EAAM,MACb,aAAeG,GAAU,CAExB,MAAMC,EAAOb,EAAY,IAAI,CAACc,EAAGC,IAC5BA,IAAML,EACF,CACN,GAAGI,EACH,MAAOF,CAAA,EAGFE,CACP,EACDb,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,EACA,MAAOlB,GAAW,CAACc,EAAM,MAAM,OAAS,UAAY,MAAA,CAAA,EAErDJ,EAAAA,IAACW,EAAAA,WAAA,CACA,KAAMC,EAAAA,QACN,MAAO,GACP,OAAQ,GACR,QAAS,IAAM,CACd,MAAMJ,EAAOb,EAAY,OACxB,CAACkB,EAAGC,IAAaA,GAAYT,CAAA,EAE9BT,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CAEd,CAAA,CAAA,CACD,CAAA,EArDiDH,CAsDlD,CAED,EACDb,GAAaJ,EAAO,OAAS,IAC7BY,EAAAA,IAACe,EAAAA,OAAA,CACA,WAAY,aACZ,WAAY,cACZ,MAAO,CACN,QAAS,OACT,WAAY,SACZ,eAAgB,QAAA,EAEjB,cAAe,IACdf,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,MAAA,EAGT,SAAAA,EAAAA,IAACgB,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOC,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CAAA,EAGF,QAAS,IAAM,CACd,MAAMT,EAAO,CAAC,GAAGb,EAAa,CAAE,IAAK,GAAI,MAAO,GAAI,EACpDC,EAAeY,CAAI,EACnBnB,EAASmB,CAAI,CACd,CAAA,CAAA,CACD,EAEF,CAEF,EAEMV,EAA6BoB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}