npm - @bikdotai/bik-component-library - Versions diffs - 0.0.808-beta.0 → 0.0.809-beta.0 - Mend

@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.809-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1601) hide show

package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditMediaModal.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { PickerType } from '@src/helpers';\nimport React, { useEffect, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { BikImageCropper } from '@src/components/image-cropper/BikImageCropper';\nimport { InputWithVariables } from '@src/components/input-with-vars/InputWithVariables';\nimport { PureSpinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { validateURL } from '@src/utils/validator';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport FileIcon from '../../../assets/icons/file.svg';\nimport FilePdfIcon from '../../../assets/icons/filePdf.svg';\nimport ImageIcon from '../../../assets/icons/image.svg';\nimport UploadIcon from '../../../assets/icons/upload.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { isVariable } from '../utils/validateIsUrl';\nimport type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';\n\ninterface EditMediaModalProps {\n\tsetOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;\n\topenEditMedia: boolean;\n\tmediaComponentFormat: HEADER_TYPES;\n\tvariableListForImage: VariableListInterfaceV2[];\n\tuploadMedia: (urlOrVariable?: string) => void;\n\teditIconRef: React.MutableRefObject<HTMLDivElement \| null>;\n\tfileRef: React.MutableRefObject<HTMLInputElement \| null>;\n\tuseEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;\n\tskipAddVariable?: boolean;\n}\nconst EditMediaModal: React.FC<EditMediaModalProps> = ({\n\tsetOpenEditMedia,\n\tmediaComponentFormat,\n\tvariableListForImage,\n\topenEditMedia,\n\tuploadMedia,\n\tfileRef,\n\tuseEditWhatsappTemplateMediaResponse,\n\tskipAddVariable,\n}) => {\n\tconst { pod, setHideCrossButton, setHideFooterButton } =\n\t\tuseTemplateModalContext();\n\n\tconst [errorMessage, setErrorMessage] = useState('');\n\tconst [portalElement, setPortalElement] = useState<HTMLElement \| undefined>(\n\t\tundefined,\n\t);\n\tconst [mediaError, setMediaError] = useState<boolean>(false);\n\tconst [mediaValue, setMediaValue] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tsetHideFooterButton(true);\n\t\treturn () => {\n\t\t\tsetHideFooterButton(false);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\t// grab styled modal container to show modal on the complete thing\n\t\tconst element = document.querySelector('[class*=\"ModalWrapper\"]');\n\t\tif (element) {\n\t\t\tsetPortalElement(element as HTMLElement);\n\t\t}\n\t}, [useEditWhatsappTemplateMediaResponse.loading]);\n\n\tlet mediaType: string;\n\tif (mediaComponentFormat === HEADER_TYPES.IMAGE) {\n\t\tmediaType = 'image/png, image/jpeg';\n\t} else if (mediaComponentFormat === HEADER_TYPES.VIDEO) {\n\t\tmediaType = 'video/mp4';\n\t} else {\n\t\tmediaType = 'application/pdf';\n\t}\n\n\tif (!openEditMedia) {\n\t\treturn <></>;\n\t}\n\n\tconst getButtonText = () => {\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Video'\n\t\t\t: 'Document';\n\t};\n\n\tconst getTitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn 'Upload in progress...';\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Upload an image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Upload a video'\n\t\t\t: 'Upload a document';\n\t};\n\n\tconst getSubtitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn `Your ${mediaComponentFormat.toLowerCase()} is getting loaded. This may take a couple of minutes.`;\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'JPEG/ PNG format • Max 5MB'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'MP4 format video • Max 16MB'\n\t\t\t: 'PDF format document • Max 100MB';\n\t};\n\n\tconst handlePickerToggle = (isOpen: boolean) => {\n\t\tif (isOpen) {\n\t\t\tsetHideCrossButton(true);\n\t\t} else {\n\t\t\tsetHideCrossButton(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tmarginBottom: '16px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BackIcon\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\twidth={16}\n\t\t\t\t\theight={16}\n\t\t\t\t/>\n\t\t\t\t<TitleRegular>Update Media</TitleRegular>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tpadding: 16,\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tborder: mediaError\n\t\t\t\t\t\t? `1px dashed ${DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`\n\t\t\t\t\t\t: `1px dashed ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.subdued,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tdisplay: useEditWhatsappTemplateMediaResponse.loading\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'initial',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{useEditWhatsappTemplateMediaResponse.loading ? (\n\t\t\t\t\t\t<PureSpinner\n\t\t\t\t\t\t\twidth={'40px'}\n\t\t\t\t\t\t\theight={'40px'}\n\t\t\t\t\t\t\tcolor={COLORS.content.brand}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: 64,\n\t\t\t\t\t\t\t\twidth: 64,\n\t\t\t\t\t\t\t\tborderRadius: '100%',\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\tbackgroundColor: DEFAULT_THEME.colorsV2.background.base,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{mediaComponentFormat === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t\t\t\t<ImageIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : mediaComponentFormat === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t\t\t\t<FileIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<FilePdfIcon width={40} height={40} />\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\t<TitleMedium>{getTitleText()}</TitleMedium>\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{getSubtitleText()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: '6px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\tlabelText={`${getButtonText()} URL`}\n\t\t\t\t\t\t\t\tonPickerToggle={handlePickerToggle}\n\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tportalElement={portalElement ?? document.body}\n\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\tallowMix={false}\n\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\tsetMediaValue(text.actualValue);\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\t\t\t\tprevVariable={{ actualValue: '', variableType: 'string' }}\n\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\tplaceHolder={\n\t\t\t\t\t\t\t\t\tskipAddVariable ? 'Enter URL' : 'Enter URL/Add variable'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowAddButton={\n\t\t\t\t\t\t\t\t\tpod === POD.CAMPAIGN\n\t\t\t\t\t\t\t\t\t\t? !skipAddVariable &&\n\t\t\t\t\t\t\t\t\t\t mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t\t\t\t\t\t\t\t: true\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\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: 'space-between',\n\t\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t\t\tmarginBottom: '12px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<BodyCaption>Or upload media from device</BodyCaption>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style={{ display: 'flex', width: '100%' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Upload\"\n\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\tLeadingIcon={UploadIcon}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tuploadMedia();\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\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\t{mediaError && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tbottom: -24,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<InfoIcon width={16} height={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t{`Select ${getButtonText()}`}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={`Add ${getButtonText()}`}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!mediaValue) {\n\t\t\t\t\t\t\t\tsetMediaError(true);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (!validateURL(mediaValue) && !isVariable(mediaValue)) {\n\t\t\t\t\t\t\t\tsetErrorMessage('Enter valid URL');\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tuploadMedia(mediaValue);\n\t\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\tref={fileRef}\n\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\ttype=\"file\"\n\t\t\t\tonChange={useEditWhatsappTemplateMediaResponse.handleImageUpload}\n\t\t\t\taccept={mediaType}\n\t\t\t/>\n\t\t\t{!!useEditWhatsappTemplateMediaResponse.selectedImage && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\taspectRatio={15 / 8}\n\t\t\t\t\tsrc={useEditWhatsappTemplateMediaResponse.selectedImage}\n\t\t\t\t\tonCropComplete={useEditWhatsappTemplateMediaResponse.onCropComplete}\n\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setLoading(false);\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setSelectedImage('');\n\t\t\t\t\t\tif (fileRef.current) {\n\t\t\t\t\t\t\tfileRef.current.value = '';\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</>\n\t);\n};\n\nexport default EditMediaModal;\n"],"names":["EditMediaModal","setOpenEditMedia","mediaComponentFormat","variableListForImage","openEditMedia","uploadMedia","fileRef","useEditWhatsappTemplateMediaResponse","skipAddVariable","pod","setHideCrossButton","setHideFooterButton","useTemplateModalContext","errorMessage","setErrorMessage","useState","portalElement","setPortalElement","undefined","mediaError","setMediaError","mediaValue","setMediaValue","mediaType","useEffect","element","document","querySelector","loading","HEADER_TYPES","IMAGE","VIDEO","_jsx","getButtonText","_jsxs","_Fragment","children","Object","assign","style","display","gap","alignItems","marginBottom","BackIcon","onClick","e","stopPropagation","cursor","width","height","TitleRegular","position","padding","borderRadius","border","DEFAULT_THEME","colorsV2","stroke","negative","vibrant","primary","backgroundColor","surface","subdued","justifyContent","flexDirection","PureSpinner","color","COLORS","content","brand","background","base","ImageIcon","FileIcon","FilePdfIcon","TitleMedium","BodySecondary","secondary","toLowerCase","InputWithVariables","labelText","onPickerToggle","isOpen","pickerType","PickerType","EMBEDDED","body","noMaxCharCheck","allowMix","onChange","text","actualValue","showVarHeader","varHeaderText","prevVariable","variableType","variablesList","placeHolder","showAddButton","POD","CAMPAIGN","flex","BodyCaption","Button","matchParentWidth","buttonText","buttonType","LeadingIcon","UploadIcon","size","bottom","left","InfoIcon","marginTop","validateURL","isVariable","ref","type","handleImageUpload","accept","selectedImage","BikImageCropper","aspectRatio","src","onCropComplete","onCancel","setLoading","setSelectedImage","current","value"],"mappings":"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"}
1	+ {"version":3,"file":"EditMediaModal.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditMediaModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { PickerType } from '@src/helpers';\nimport React, { useEffect, useState } from 'react';\nimport type { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { BikImageCropper } from '@src/components/image-cropper/BikImageCropper';\nimport { InputWithVariables } from '@src/components/input-with-vars/InputWithVariables';\nimport { PureSpinner } from '@src/components/spinner/Spinner';\nimport { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';\nimport { POD } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { validateURL } from '@src/utils/validator';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport FileIcon from '../../../assets/icons/file.svg';\nimport FilePdfIcon from '../../../assets/icons/filePdf.svg';\nimport ImageIcon from '../../../assets/icons/image.svg';\nimport UploadIcon from '../../../assets/icons/upload.svg';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport { isVariable } from '../utils/validateIsUrl';\nimport type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';\n\ninterface EditMediaModalProps {\n\tsetOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;\n\topenEditMedia: boolean;\n\tmediaComponentFormat: HEADER_TYPES;\n\tvariableListForImage: VariableListInterfaceV2[];\n\tuploadMedia: (urlOrVariable?: string) => void;\n\teditIconRef: React.MutableRefObject<HTMLDivElement \| null>;\n\tfileRef: React.MutableRefObject<HTMLInputElement \| null>;\n\tuseEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;\n\tskipAddVariable?: boolean;\n}\nconst EditMediaModal: React.FC<EditMediaModalProps> = ({\n\tsetOpenEditMedia,\n\tmediaComponentFormat,\n\tvariableListForImage,\n\topenEditMedia,\n\tuploadMedia,\n\tfileRef,\n\tuseEditWhatsappTemplateMediaResponse,\n\tskipAddVariable,\n}) => {\n\tconst { pod, setHideCrossButton, setHideFooterButton } =\n\t\tuseTemplateModalContext();\n\n\tconst [errorMessage, setErrorMessage] = useState('');\n\tconst [portalElement, setPortalElement] = useState<HTMLElement \| undefined>(\n\t\tundefined,\n\t);\n\tconst [mediaError, setMediaError] = useState<boolean>(false);\n\tconst [mediaValue, setMediaValue] = useState<string>('');\n\n\tuseEffect(() => {\n\t\tsetHideFooterButton(true);\n\t\treturn () => {\n\t\t\tsetHideFooterButton(false);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\t// grab styled modal container to show modal on the complete thing\n\t\tconst element = document.querySelector('[class*=\"ModalWrapper\"]');\n\t\tif (element) {\n\t\t\tsetPortalElement(element as HTMLElement);\n\t\t}\n\t}, [useEditWhatsappTemplateMediaResponse.loading]);\n\n\tlet mediaType: string;\n\tif (mediaComponentFormat === HEADER_TYPES.IMAGE) {\n\t\tmediaType = 'image/png, image/jpeg';\n\t} else if (mediaComponentFormat === HEADER_TYPES.VIDEO) {\n\t\tmediaType = 'video/mp4';\n\t} else {\n\t\tmediaType = 'application/pdf';\n\t}\n\n\tif (!openEditMedia) {\n\t\treturn <></>;\n\t}\n\n\tconst getButtonText = () => {\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Video'\n\t\t\t: 'Document';\n\t};\n\n\tconst getTitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn 'Upload in progress...';\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'Upload an image'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'Upload a video'\n\t\t\t: 'Upload a document';\n\t};\n\n\tconst getSubtitleText = () => {\n\t\tif (useEditWhatsappTemplateMediaResponse.loading) {\n\t\t\treturn `Your ${mediaComponentFormat.toLowerCase()} is getting loaded. This may take a couple of minutes.`;\n\t\t}\n\n\t\treturn mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t? 'JPEG/ PNG format • Max 5MB'\n\t\t\t: mediaComponentFormat === HEADER_TYPES.VIDEO\n\t\t\t? 'MP4 format video • Max 16MB'\n\t\t\t: 'PDF format document • Max 100MB';\n\t};\n\n\tconst handlePickerToggle = (isOpen: boolean) => {\n\t\tif (isOpen) {\n\t\t\tsetHideCrossButton(true);\n\t\t} else {\n\t\t\tsetHideCrossButton(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: '10px',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tmarginBottom: '16px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BackIcon\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\twidth={16}\n\t\t\t\t\theight={16}\n\t\t\t\t/>\n\t\t\t\t<TitleRegular>Update Media</TitleRegular>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\tpadding: 16,\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\tborder: mediaError\n\t\t\t\t\t\t? `1px dashed ${DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`\n\t\t\t\t\t\t: `1px dashed ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.subdued,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tdisplay: useEditWhatsappTemplateMediaResponse.loading\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'initial',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmarginBottom: 24,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{useEditWhatsappTemplateMediaResponse.loading ? (\n\t\t\t\t\t\t<PureSpinner\n\t\t\t\t\t\t\twidth={'40px'}\n\t\t\t\t\t\t\theight={'40px'}\n\t\t\t\t\t\t\tcolor={COLORS.content.brand}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: 64,\n\t\t\t\t\t\t\t\twidth: 64,\n\t\t\t\t\t\t\t\tborderRadius: '100%',\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\tbackgroundColor: DEFAULT_THEME.colorsV2.background.base,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{mediaComponentFormat === HEADER_TYPES.IMAGE ? (\n\t\t\t\t\t\t\t\t<ImageIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : mediaComponentFormat === HEADER_TYPES.VIDEO ? (\n\t\t\t\t\t\t\t\t<FileIcon width={40} height={40} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<FilePdfIcon width={40} height={40} />\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\t<TitleMedium>{getTitleText()}</TitleMedium>\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{getSubtitleText()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: '6px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<InputWithVariables\n\t\t\t\t\t\t\t\tlabelText={`${getButtonText()} URL`}\n\t\t\t\t\t\t\t\tonPickerToggle={handlePickerToggle}\n\t\t\t\t\t\t\t\tpickerType={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tportalElement={portalElement ?? document.body}\n\t\t\t\t\t\t\t\tnoMaxCharCheck={true}\n\t\t\t\t\t\t\t\tallowMix={false}\n\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\tsetMediaValue(text.actualValue);\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowVarHeader\n\t\t\t\t\t\t\t\tvarHeaderText=\"Select variable\"\n\t\t\t\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\t\t\t\tprevVariable={{ actualValue: '', variableType: 'string' }}\n\t\t\t\t\t\t\t\tvariablesList={variableListForImage}\n\t\t\t\t\t\t\t\tplaceHolder={\n\t\t\t\t\t\t\t\t\tskipAddVariable ? 'Enter URL' : 'Enter URL/Add variable'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowAddButton={\n\t\t\t\t\t\t\t\t\tpod === POD.CAMPAIGN\n\t\t\t\t\t\t\t\t\t\t? !skipAddVariable &&\n\t\t\t\t\t\t\t\t\t\t mediaComponentFormat === HEADER_TYPES.IMAGE\n\t\t\t\t\t\t\t\t\t\t: true\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\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: 'space-between',\n\t\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t\t\tmarginBottom: '12px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<BodyCaption>Or upload media from device</BodyCaption>\n\t\t\t\t\t\t\t<hr\n\t\t\t\t\t\t\t\tstyle={{ height: '2px', flex: 0.5, backgroundColor: 'black' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div style={{ display: 'flex', width: '100%' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tbuttonText=\"Upload\"\n\t\t\t\t\t\t\t\tbuttonType=\"dashBold\"\n\t\t\t\t\t\t\t\tLeadingIcon={UploadIcon}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tuploadMedia();\n\t\t\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\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\t{mediaError && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tbottom: -24,\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<InfoIcon width={16} height={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t{`Select ${getButtonText()}`}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{!useEditWhatsappTemplateMediaResponse.loading && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={`Add ${getButtonText()}`}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!mediaValue) {\n\t\t\t\t\t\t\t\tsetMediaError(true);\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (!validateURL(mediaValue) && !isVariable(mediaValue)) {\n\t\t\t\t\t\t\t\tsetErrorMessage('Enter valid URL');\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tuploadMedia(mediaValue);\n\t\t\t\t\t\t\tsetOpenEditMedia(false);\n\t\t\t\t\t\t\tsetErrorMessage('');\n\t\t\t\t\t\t\tsetMediaError(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<input\n\t\t\t\tref={fileRef}\n\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\ttype=\"file\"\n\t\t\t\tonChange={useEditWhatsappTemplateMediaResponse.handleImageUpload}\n\t\t\t\taccept={mediaType}\n\t\t\t/>\n\t\t\t{!!useEditWhatsappTemplateMediaResponse.selectedImage && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\taspectRatio={15 / 8}\n\t\t\t\t\tsrc={useEditWhatsappTemplateMediaResponse.selectedImage}\n\t\t\t\t\tonCropComplete={useEditWhatsappTemplateMediaResponse.onCropComplete}\n\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setLoading(false);\n\t\t\t\t\t\tuseEditWhatsappTemplateMediaResponse.setSelectedImage('');\n\t\t\t\t\t\tif (fileRef.current) {\n\t\t\t\t\t\t\tfileRef.current.value = '';\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</>\n\t);\n};\n\nexport default EditMediaModal;\n"],"names":["EditMediaModal","_ref","setOpenEditMedia","mediaComponentFormat","variableListForImage","openEditMedia","uploadMedia","fileRef","useEditWhatsappTemplateMediaResponse","skipAddVariable","pod","setHideCrossButton","setHideFooterButton","useTemplateModalContext","errorMessage","setErrorMessage","useState","portalElement","setPortalElement","undefined","mediaError","setMediaError","mediaValue","setMediaValue","mediaType","useEffect","element","document","querySelector","loading","HEADER_TYPES","IMAGE","VIDEO","_jsx","getButtonText","_jsxs","_Fragment","children","Object","assign","style","display","gap","alignItems","marginBottom","BackIcon","onClick","e","stopPropagation","cursor","width","height","TitleRegular","position","padding","borderRadius","border","DEFAULT_THEME","colorsV2","stroke","negative","vibrant","primary","backgroundColor","surface","subdued","justifyContent","flexDirection","PureSpinner","color","COLORS","content","brand","background","base","ImageIcon","FileIcon","FilePdfIcon","TitleMedium","BodySecondary","secondary","toLowerCase","InputWithVariables","labelText","onPickerToggle","isOpen","pickerType","PickerType","EMBEDDED","body","noMaxCharCheck","allowMix","onChange","text","actualValue","showVarHeader","varHeaderText","prevVariable","variableType","variablesList","placeHolder","showAddButton","POD","CAMPAIGN","flex","BodyCaption","Button","matchParentWidth","buttonText","buttonType","LeadingIcon","UploadIcon","size","bottom","left","InfoIcon","marginTop","validateURL","isVariable","ref","type","handleImageUpload","accept","selectedImage","BikImageCropper","aspectRatio","src","onCropComplete","onCancel","setLoading","setSelectedImage","current","value"],"mappings":"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"}

package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import a from"lodash/cloneDeep";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as s}from"../../input/Input.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=({template:E,onTemplateChange:j,whatsappSpecificPickerMeta:V,showVariableModal:x})=>{var L,y,w;const[I,O]=n(null),[k,B]=n(null),{variableList:R,disableEditVariable:A,originalVariableList:U,setOriginalVariableList:W}=m(),{processWebpushTemplate:F,isValidUrl:H}=u(),[D,P]=n(null),[S,G]=n(null),[N,$]=n(null);o((()=>{R&&F(E,R,U,A).then((({templateVariableMapping:e,template:i,webpushBroadcastConfig:t})=>{O(e),null==W||W(e),null==j||j(Object.assign({},i)),B(t)}))}),[R,A]);const{descriptionComponents:K,bodyVariables:q,titleVariables:z}=l((()=>{if(I&&k){const e=c(k,I);return D||P(e.iconImage),S||G(e.bannerImage),N||$(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[I,k]),{uploadMediaLink:J,uploadMediaFiles:Q,validateMimeType:X}=V,Y=r(null),Z=f({uploadMediaLink:J,uploadMediaFiles:Q,updateTemplateImageUrl:e=>ee(e,"icon"),validateMimeType:X,mediaComponent:D,fileRef:Y}),_=f({uploadMediaLink:J,uploadMediaFiles:Q,updateTemplateImageUrl:e=>ee(e,"image"),validateMimeType:X,mediaComponent:S,fileRef:Y});function ee(e,i){const t=Object.assign({},E),n=a(t);"icon"===i?(n.webpushBroadcastConfig.icon=[e],P([e])):"image"===i&&(n.webpushBroadcastConfig.image=[e],G([e])),null==j||j(Object.assign({},n))}function ie(e,i,t){var n;const o=Object.assign({},E),l=a(o),r="custom"===i&&"string"==typeof e,s=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(s&&s.length>0){s[t]=r?e:"string"!=typeof e?e.placeHolder:"";const i=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=i}null==j||j(l)}const te=Z.openEditMedia?Z:_.openEditMedia?_:null;if(te)return e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:te.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:te,setOpenEditMedia:te.setOpenEditMedia,openEditMedia:te.openEditMedia,editIconRef:te.editIconRef,fileRef:Y,skipAddVariable:!0})}));return i(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[D&&D.length?e(g,{children:e(b,{imageName:D,handleImageChange:Z.handleImageChange,mediaType:p.IMAGE,error:Z.error,isLoading:Z.loading,setOpenEditMedia:Z.setOpenEditMedia})}):null,S&&S.length?e(g,{children:e(b,{imageName:S,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,(null==q?void 0:q.length)||(null==z?void 0:z.length)?e(C,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==K?void 0:K.map(((i,t)=>e(v,{originalVariableList:I,originalList:U,channel:d.WEBPUSH,type:i.type,descriptionComponent:i.component,showVariableModal:x},t))),N&&N.length?e("div",Object.assign({style:{padding:"16px 14px"}},{children:e(s,{labelText:"Redirection Link",id:"redirection-link",value:N[0].replace("https://",""),errorMessage:H(N[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:A?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var i;const t=`https://${e}`;$([t]);const n=a(E);(null===(i=n.webpushBroadcastConfig)||void 0===i?void 0:i.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[t]),null==j||j(Object.assign({},n))}(e)}})})):e(t,{}),(null===(y=null===(L=null==I?void 0:I.buttons)||void 0===L?void 0:L.filter((e=>"URL"===e.type)))||void 0===y?void 0:y.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(w=null==I?void 0:I.buttons)||void 0===w?void 0:w.map(((i,t)=>e(T,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:i,currentVariableList:I,updateSelectedURLTemplateBtn:ie},`${t}`)))]}))};export{E as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import a from"lodash/cloneDeep";import{useState as n,useEffect as o,useMemo as l,useRef as r}from"react";import{Input as s}from"../../input/Input.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as m}from"../context/templateModalContext.js";import u from"../helpers/WebpushTemplateHelper.js";import{getAllDataFromWebpushTemplateComponent as c}from"../utils/getDataFromTemplateComponent.js";import h from"./EditMediaModal.js";import b from"./EditMediaV2.js";import{EditTemplateMediaContainer as g}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as f}from"./useEditWhtasappTemplateMedia.js";import{Container as M}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import C from"./VariableEditorHeader.js";import T from"./WhatsAppTemplateCardButtonV2.js";const E=E=>{let{template:j,onTemplateChange:V,whatsappSpecificPickerMeta:x,showVariableModal:L}=E;var y,w,I;const[O,k]=n(null),[B,R]=n(null),{variableList:A,disableEditVariable:U,originalVariableList:W,setOriginalVariableList:F}=m(),{processWebpushTemplate:H,isValidUrl:D}=u(),[P,S]=n(null),[G,N]=n(null),[$,K]=n(null);o((()=>{A&&H(j,A,W,U).then((e=>{let{templateVariableMapping:t,template:i,webpushBroadcastConfig:a}=e;k(t),null==F||F(t),null==V||V(Object.assign({},i)),R(a)}))}),[A,U]);const{descriptionComponents:q,bodyVariables:z,titleVariables:J}=l((()=>{if(O&&B){const e=c(B,O);return P||S(e.iconImage),G||N(e.bannerImage),$||K(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[O,B]),{uploadMediaLink:Q,uploadMediaFiles:X,validateMimeType:Y}=x,Z=r(null),_=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"icon"),validateMimeType:Y,mediaComponent:P,fileRef:Z}),ee=f({uploadMediaLink:Q,uploadMediaFiles:X,updateTemplateImageUrl:e=>te(e,"image"),validateMimeType:Y,mediaComponent:G,fileRef:Z});function te(e,t){const i=Object.assign({},j),n=a(i);"icon"===t?(n.webpushBroadcastConfig.icon=[e],S([e])):"image"===t&&(n.webpushBroadcastConfig.image=[e],N([e])),null==V||V(Object.assign({},n))}function ie(e,t,i){var n;const o=Object.assign({},j),l=a(o),r="custom"===t&&"string"==typeof e,s=null===(n=null==l?void 0:l.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(s&&s.length>0){s[i]=r?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=t}null==V||V(l)}const ae=_.openEditMedia?_:ee.openEditMedia?ee:null;if(ae)return e(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(h,{mediaComponentFormat:p.IMAGE,uploadMedia:ae.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:ae,setOpenEditMedia:ae.setOpenEditMedia,openEditMedia:ae.openEditMedia,editIconRef:ae.editIconRef,fileRef:Z,skipAddVariable:!0})}));return t(M,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[P&&P.length?e(g,{children:e(b,{imageName:P,handleImageChange:_.handleImageChange,mediaType:p.IMAGE,error:_.error,isLoading:_.loading,setOpenEditMedia:_.setOpenEditMedia})}):null,G&&G.length?e(g,{children:e(b,{imageName:G,handleImageChange:ee.handleImageChange,mediaType:p.IMAGE,error:ee.error,isLoading:ee.loading,setOpenEditMedia:ee.setOpenEditMedia})}):null,(null==z?void 0:z.length)||(null==J?void 0:J.length)?e(C,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==q?void 0:q.map(((t,i)=>e(v,{originalVariableList:O,originalList:W,channel:d.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:L},i))),$&&$.length?e("div",Object.assign({style:{padding:"16px 14px"}},{children:e(s,{labelText:"Redirection Link",id:"redirection-link",value:$[0].replace("https://",""),errorMessage:D($[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:U?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const i=`https://${e}`;K([i]);const n=a(j);(null===(t=n.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==V||V(Object.assign({},n))}(e)}})})):e(i,{}),(null===(w=null===(y=null==O?void 0:O.buttons)||void 0===y?void 0:y.filter((e=>"URL"===e.type)))||void 0===w?void 0:w.length)>0&&e(C,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==O?void 0:O.buttons)||void 0===I?void 0:I.map(((t,i)=>e(T,{variableListIndex:i,CTAoptions:null==x?void 0:x.CTAoptions,button:t,currentVariableList:O,updateSelectedURLTemplateBtn:ie},`${i}`)))]}))};export{E as default};
 //# sourceMappingURL=EditWebpushTemplate.js.map

package/dist/esm/components/template-context-mapper/modalElements/EditWebpushTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditWebpushTemplate.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWebpushTemplate.tsx"],"sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Input } from '@src/components/input/Input';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tButtonPlaceHolderOptions,\n\tHEADER_TYPES,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tWEB_PUSH_COMPONENT_TYPE,\n\ttype WebpushTemplateType,\n\ttype WebpushTemplateVariables,\n} from '@src/components/template-preview/models/WebpushTemplate';\nimport type { CTABtnValType } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport type { WhatsAppPickerMeta } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport useWebPushTemplate from '../helpers/WebpushTemplateHelper';\nimport { getAllDataFromWebpushTemplateComponent } from '../utils/getDataFromTemplateComponent';\nimport EditMediaModal from './EditMediaModal';\nimport EditMediaV2 from './EditMediaV2';\nimport { EditTemplateMediaContainer } from './EditMediaV2.style';\nimport { useEditWhatsappTemplateMedia } from './useEditWhtasappTemplateMedia';\nimport { Container } from './VariableConnectorsPanel';\nimport VariableConnectorWhatsApp from './VariableConnectorWhatsApp';\nimport VariableEditorHeader from './VariableEditorHeader';\nimport WhatsAppTemplateCardButtonV2, {\n\ttype URLBtnUpdateFunctionType,\n} from './WhatsAppTemplateCardButtonV2';\n\nexport interface EditWebpushTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WebpushTemplateType;\n\tonTemplateChange?: (template: WebpushTemplateType) => void;\n\tshowVariableModal?: boolean;\n}\n\nconst EditWebpushTemplate = ({\n\ttemplate,\n\tonTemplateChange,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n}: EditWebpushTemplateV2Props) => {\n\tconst [templateVariable, setTemplateVariables] =\n\t\tuseState<WebpushTemplateVariables \| null>(null);\n\tconst [webpushConfig, setWebpushConfig] = useState<\n\t\tWebpushTemplateType['webpushBroadcastConfig'] \| null\n\t>(null);\n\n\tconst {\n\t\tvariableList,\n\t\tdisableEditVariable,\n\t\toriginalVariableList,\n\t\tsetOriginalVariableList,\n\t} = useTemplateModalContext();\n\tconst { processWebpushTemplate, isValidUrl } = useWebPushTemplate();\n\tconst [iconImage, setIconImage] = useState<string[] \| null>(null);\n\tconst [bannerImage, setBannerImage] = useState<string[] \| null>(null);\n\tconst [redirectionLink, setRedirectionLink] = useState<string[] \| null>(null);\n\n\tuseEffect(() => {\n\t\tif (variableList) {\n\t\t\tprocessWebpushTemplate(\n\t\t\t\ttemplate,\n\t\t\t\tvariableList,\n\t\t\t\toriginalVariableList,\n\t\t\t\tdisableEditVariable,\n\t\t\t).then(\n\t\t\t\t({ templateVariableMapping, template, webpushBroadcastConfig }) => {\n\t\t\t\t\tsetTemplateVariables(templateVariableMapping);\n\t\t\t\t\tsetOriginalVariableList?.(templateVariableMapping);\n\t\t\t\t\tonTemplateChange?.({ ...template });\n\t\t\t\t\tsetWebpushConfig(webpushBroadcastConfig);\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t}, [variableList, disableEditVariable]);\n\n\tconst { descriptionComponents, bodyVariables, titleVariables } =\n\t\tuseMemo(() => {\n\t\t\tif (templateVariable && webpushConfig) {\n\t\t\t\tconst data = getAllDataFromWebpushTemplateComponent(\n\t\t\t\t\twebpushConfig,\n\t\t\t\t\ttemplateVariable,\n\t\t\t\t);\n\n\t\t\t\tif (!iconImage) setIconImage(data.iconImage);\n\t\t\t\tif (!bannerImage) setBannerImage(data.bannerImage);\n\t\t\t\tif (!redirectionLink) setRedirectionLink(data.redirectionLink);\n\n\t\t\t\treturn {\n\t\t\t\t\tdescriptionComponents: data.descriptionComponents,\n\t\t\t\t\tbodyVariables: data.bodyVariables,\n\t\t\t\t\ttitleVariables: data.titleVariables,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tdescriptionComponents: [],\n\t\t\t\tbodyVariables: [],\n\t\t\t\ttitleVariables: [],\n\t\t\t\ticonImage: null,\n\t\t\t\tbannerImage: null,\n\t\t\t};\n\t\t}, [templateVariable, webpushConfig]);\n\n\tconst { uploadMediaLink, uploadMediaFiles, validateMimeType } =\n\t\twhatsappSpecificPickerMeta as WhatsAppPickerMeta;\n\tconst fileRef = useRef<HTMLInputElement>(null);\n\n\tconst useEditMediaResponseForIcon = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl: (url: string) =>\n\t\t\tupdateTemplateMediaUrl(url, 'icon'),\n\t\tvalidateMimeType,\n\t\tmediaComponent: iconImage,\n\t\tfileRef,\n\t});\n\tconst useEditMediaResponseForImage = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl: (url: string) =>\n\t\t\tupdateTemplateMediaUrl(url, 'image'),\n\t\tvalidateMimeType,\n\t\tmediaComponent: bannerImage,\n\t\tfileRef,\n\t});\n\n\tfunction updateTemplateMediaUrl(url: string, mediaType: 'icon' \| 'image') {\n\t\tconst tempCopy = { ...template };\n\t\tconst localTemplate = cloneDeep(tempCopy);\n\t\tif (mediaType === 'icon') {\n\t\t\tlocalTemplate.webpushBroadcastConfig!.icon = [url];\n\t\t\tsetIconImage([url]);\n\t\t} else if (mediaType === 'image') {\n\t\t\tlocalTemplate.webpushBroadcastConfig!.image = [url];\n\t\t\tsetBannerImage([url]);\n\t\t}\n\n\t\tonTemplateChange?.({ ...localTemplate });\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 = { ...template };\n\t\tconst selectedTemplate = cloneDeep(tempCopy);\n\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\tconst btnMapping = selectedTemplate?.webpushBroadcastConfig?.buttons;\n\t\tif (btnMapping && btnMapping.length > 0) {\n\t\t\tbtnMapping[btnIndex] = isCustom\n\t\t\t\t? val\n\t\t\t\t: typeof val !== 'string'\n\t\t\t\t? val.placeHolder\n\t\t\t\t: '';\n\t\t\tconst config = {\n\t\t\t\t...selectedTemplate.webpushBroadcastConfig,\n\t\t\t\tbuttons: btnMapping,\n\t\t\t};\n\t\t\tselectedTemplate.webpushBroadcastConfig = config;\n\t\t}\n\t\tonTemplateChange?.(selectedTemplate as WebpushTemplateType);\n\t}\n\n\tconst getActiveEditMediaResponse = () => {\n\t\tif (useEditMediaResponseForIcon.openEditMedia) {\n\t\t\treturn useEditMediaResponseForIcon;\n\t\t} else if (useEditMediaResponseForImage.openEditMedia) {\n\t\t\treturn useEditMediaResponseForImage;\n\t\t}\n\t\treturn null;\n\t};\n\n\tconst activeEditMediaResponse = getActiveEditMediaResponse();\n\n\tif (activeEditMediaResponse) {\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={HEADER_TYPES.IMAGE}\n\t\t\t\t\tuploadMedia={activeEditMediaResponse.uploadMedia}\n\t\t\t\t\tvariableListForImage={[]}\n\t\t\t\t\tuseEditWhatsappTemplateMediaResponse={activeEditMediaResponse}\n\t\t\t\t\tsetOpenEditMedia={activeEditMediaResponse.setOpenEditMedia}\n\t\t\t\t\topenEditMedia={activeEditMediaResponse.openEditMedia}\n\t\t\t\t\teditIconRef={activeEditMediaResponse.editIconRef}\n\t\t\t\t\tfileRef={fileRef}\n\t\t\t\t\tskipAddVariable\n\t\t\t\t/>\n\t\t\t</Container>\n\t\t);\n\t}\n\n\tfunction updateWebpushBroadcastConfig(newValue: string) {\n\t\tconst newLink = `https://${newValue}`;\n\t\tsetRedirectionLink([newLink]);\n\t\tconst currentTemplate = cloneDeep(template) as WebpushTemplateType;\n\t\tif (currentTemplate.webpushBroadcastConfig?.redirectionLink) {\n\t\t\tcurrentTemplate.webpushBroadcastConfig!.redirectionLink = [newLink];\n\t\t}\n\t\tonTemplateChange?.({ ...currentTemplate });\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: 'auto',\n\t\t\t}}\n\t\t>\n\t\t\t{iconImage && iconImage.length ? (\n\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\timageName={iconImage}\n\t\t\t\t\t\thandleImageChange={useEditMediaResponseForIcon.handleImageChange}\n\t\t\t\t\t\tmediaType={HEADER_TYPES.IMAGE}\n\t\t\t\t\t\terror={useEditMediaResponseForIcon.error}\n\t\t\t\t\t\tisLoading={useEditMediaResponseForIcon.loading}\n\t\t\t\t\t\tsetOpenEditMedia={useEditMediaResponseForIcon.setOpenEditMedia}\n\t\t\t\t\t/>\n\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t) : null}\n\n\t\t\t{bannerImage && bannerImage.length ? (\n\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\timageName={bannerImage}\n\t\t\t\t\t\thandleImageChange={useEditMediaResponseForImage.handleImageChange}\n\t\t\t\t\t\tmediaType={HEADER_TYPES.IMAGE}\n\t\t\t\t\t\terror={useEditMediaResponseForImage.error}\n\t\t\t\t\t\tisLoading={useEditMediaResponseForImage.loading}\n\t\t\t\t\t\tsetOpenEditMedia={useEditMediaResponseForImage.setOpenEditMedia}\n\t\t\t\t\t/>\n\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t) : null}\n\n\t\t\t{bodyVariables?.length \|\| titleVariables?.length ? (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tpaddingTop: 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) : null}\n\n\t\t\t{descriptionComponents?.map((each, i) => (\n\t\t\t\t<VariableConnectorWhatsApp\n\t\t\t\t\toriginalVariableList={templateVariable as WebpushTemplateVariables}\n\t\t\t\t\toriginalList={originalVariableList}\n\t\t\t\t\tchannel={CHANNEL_TYPE.WEBPUSH}\n\t\t\t\t\ttype={each.type as WEB_PUSH_COMPONENT_TYPE}\n\t\t\t\t\tdescriptionComponent={each.component}\n\t\t\t\t\tkey={i}\n\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t{redirectionLink && redirectionLink.length ? (\n\t\t\t\t<div style={{ padding: '16px 14px' }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tlabelText={'Redirection Link'}\n\t\t\t\t\t\tid={`redirection-link`}\n\t\t\t\t\t\tvalue={redirectionLink[0].replace('https://', '')}\n\t\t\t\t\t\terrorMessage={\n\t\t\t\t\t\t\tisValidUrl(redirectionLink[0]) ? '' : 'Please enter a valid URL'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmaxCharLimit={2000}\n\t\t\t\t\t\tnoKeyDownChange={true}\n\t\t\t\t\t\tstate={disableEditVariable ? 'disabled' : 'none'}\n\t\t\t\t\t\tprefixText={'https://'}\n\t\t\t\t\t\tplaceholder={'Enter custom URL here'}\n\t\t\t\t\t\tonChangeText={(enteredVariableName) => {\n\t\t\t\t\t\t\tupdateWebpushBroadcastConfig(enteredVariableName);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{(templateVariable as WebpushTemplateVariables)?.buttons?.filter(\n\t\t\t\t(btn) => btn.type === 'URL',\n\t\t\t)?.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{(templateVariable as WebpushTemplateVariables)?.buttons?.map(\n\t\t\t\t(btn, i) => (\n\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\tCTAoptions={\n\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.CTAoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\tkey={`${i}`}\n\t\t\t\t\t\tcurrentVariableList={templateVariable as WebpushTemplateVariables}\n\t\t\t\t\t\tupdateSelectedURLTemplateBtn={\n\t\t\t\t\t\t\tupdateSelectedTemplateURLBtn as URLBtnUpdateFunctionType\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 EditWebpushTemplate;\n"],"names":["EditWebpushTemplate","template","onTemplateChange","whatsappSpecificPickerMeta","showVariableModal","templateVariable","setTemplateVariables","useState","webpushConfig","setWebpushConfig","variableList","disableEditVariable","originalVariableList","setOriginalVariableList","useTemplateModalContext","processWebpushTemplate","isValidUrl","useWebPushTemplate","iconImage","setIconImage","bannerImage","setBannerImage","redirectionLink","setRedirectionLink","useEffect","then","templateVariableMapping","webpushBroadcastConfig","Object","assign","descriptionComponents","bodyVariables","titleVariables","useMemo","data","getAllDataFromWebpushTemplateComponent","uploadMediaLink","uploadMediaFiles","validateMimeType","fileRef","useRef","useEditMediaResponseForIcon","useEditWhatsappTemplateMedia","updateTemplateImageUrl","url","updateTemplateMediaUrl","mediaComponent","useEditMediaResponseForImage","mediaType","tempCopy","localTemplate","cloneDeep","icon","image","updateSelectedTemplateURLBtn","val","mode","btnIndex","selectedTemplate","isCustom","btnMapping","_a","buttons","length","placeHolder","config","activeEditMediaResponse","openEditMedia","_jsx","Container","style","flexDirection","width","maxHeight","children","EditMediaModal","mediaComponentFormat","HEADER_TYPES","IMAGE","uploadMedia","variableListForImage","useEditWhatsappTemplateMediaResponse","setOpenEditMedia","editIconRef","skipAddVariable","_jsxs","minWidth","EditTemplateMediaContainer","EditMediaV2","imageName","handleImageChange","error","isLoading","loading","VariableEditorHeader","containerStyle","paddingTop","headerText","subText","toolTipInfo","map","each","i","VariableConnectorWhatsApp","originalList","channel","CHANNEL_TYPE","WEBPUSH","type","descriptionComponent","component","padding","Input","labelText","id","value","replace","errorMessage","maxCharLimit","noKeyDownChange","state","prefixText","placeholder","onChangeText","enteredVariableName","newValue","newLink","currentTemplate","updateWebpushBroadcastConfig","_Fragment","_b","filter","btn","_c","WhatsAppTemplateCardButtonV2","variableListIndex","CTAoptions","button","currentVariableList","updateSelectedURLTemplateBtn"],"mappings":"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"}
1	+ {"version":3,"file":"EditWebpushTemplate.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWebpushTemplate.tsx"],"sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Input } from '@src/components/input/Input';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tButtonPlaceHolderOptions,\n\tHEADER_TYPES,\n} from '@src/components/template-preview/models/TemplateMeta';\nimport {\n\tWEB_PUSH_COMPONENT_TYPE,\n\ttype WebpushTemplateType,\n\ttype WebpushTemplateVariables,\n} from '@src/components/template-preview/models/WebpushTemplate';\nimport type { CTABtnValType } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport type { WhatsAppPickerMeta } from '@src/components/template-preview/models/WhatsAppTemplate';\nimport { useTemplateModalContext } from '../context/templateModalContext';\nimport useWebPushTemplate from '../helpers/WebpushTemplateHelper';\nimport { getAllDataFromWebpushTemplateComponent } from '../utils/getDataFromTemplateComponent';\nimport EditMediaModal from './EditMediaModal';\nimport EditMediaV2 from './EditMediaV2';\nimport { EditTemplateMediaContainer } from './EditMediaV2.style';\nimport { useEditWhatsappTemplateMedia } from './useEditWhtasappTemplateMedia';\nimport { Container } from './VariableConnectorsPanel';\nimport VariableConnectorWhatsApp from './VariableConnectorWhatsApp';\nimport VariableEditorHeader from './VariableEditorHeader';\nimport WhatsAppTemplateCardButtonV2, {\n\ttype URLBtnUpdateFunctionType,\n} from './WhatsAppTemplateCardButtonV2';\n\nexport interface EditWebpushTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WebpushTemplateType;\n\tonTemplateChange?: (template: WebpushTemplateType) => void;\n\tshowVariableModal?: boolean;\n}\n\nconst EditWebpushTemplate = ({\n\ttemplate,\n\tonTemplateChange,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n}: EditWebpushTemplateV2Props) => {\n\tconst [templateVariable, setTemplateVariables] =\n\t\tuseState<WebpushTemplateVariables \| null>(null);\n\tconst [webpushConfig, setWebpushConfig] = useState<\n\t\tWebpushTemplateType['webpushBroadcastConfig'] \| null\n\t>(null);\n\n\tconst {\n\t\tvariableList,\n\t\tdisableEditVariable,\n\t\toriginalVariableList,\n\t\tsetOriginalVariableList,\n\t} = useTemplateModalContext();\n\tconst { processWebpushTemplate, isValidUrl } = useWebPushTemplate();\n\tconst [iconImage, setIconImage] = useState<string[] \| null>(null);\n\tconst [bannerImage, setBannerImage] = useState<string[] \| null>(null);\n\tconst [redirectionLink, setRedirectionLink] = useState<string[] \| null>(null);\n\n\tuseEffect(() => {\n\t\tif (variableList) {\n\t\t\tprocessWebpushTemplate(\n\t\t\t\ttemplate,\n\t\t\t\tvariableList,\n\t\t\t\toriginalVariableList,\n\t\t\t\tdisableEditVariable,\n\t\t\t).then(\n\t\t\t\t({ templateVariableMapping, template, webpushBroadcastConfig }) => {\n\t\t\t\t\tsetTemplateVariables(templateVariableMapping);\n\t\t\t\t\tsetOriginalVariableList?.(templateVariableMapping);\n\t\t\t\t\tonTemplateChange?.({ ...template });\n\t\t\t\t\tsetWebpushConfig(webpushBroadcastConfig);\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\t}, [variableList, disableEditVariable]);\n\n\tconst { descriptionComponents, bodyVariables, titleVariables } =\n\t\tuseMemo(() => {\n\t\t\tif (templateVariable && webpushConfig) {\n\t\t\t\tconst data = getAllDataFromWebpushTemplateComponent(\n\t\t\t\t\twebpushConfig,\n\t\t\t\t\ttemplateVariable,\n\t\t\t\t);\n\n\t\t\t\tif (!iconImage) setIconImage(data.iconImage);\n\t\t\t\tif (!bannerImage) setBannerImage(data.bannerImage);\n\t\t\t\tif (!redirectionLink) setRedirectionLink(data.redirectionLink);\n\n\t\t\t\treturn {\n\t\t\t\t\tdescriptionComponents: data.descriptionComponents,\n\t\t\t\t\tbodyVariables: data.bodyVariables,\n\t\t\t\t\ttitleVariables: data.titleVariables,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tdescriptionComponents: [],\n\t\t\t\tbodyVariables: [],\n\t\t\t\ttitleVariables: [],\n\t\t\t\ticonImage: null,\n\t\t\t\tbannerImage: null,\n\t\t\t};\n\t\t}, [templateVariable, webpushConfig]);\n\n\tconst { uploadMediaLink, uploadMediaFiles, validateMimeType } =\n\t\twhatsappSpecificPickerMeta as WhatsAppPickerMeta;\n\tconst fileRef = useRef<HTMLInputElement>(null);\n\n\tconst useEditMediaResponseForIcon = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl: (url: string) =>\n\t\t\tupdateTemplateMediaUrl(url, 'icon'),\n\t\tvalidateMimeType,\n\t\tmediaComponent: iconImage,\n\t\tfileRef,\n\t});\n\tconst useEditMediaResponseForImage = useEditWhatsappTemplateMedia({\n\t\tuploadMediaLink,\n\t\tuploadMediaFiles,\n\t\tupdateTemplateImageUrl: (url: string) =>\n\t\t\tupdateTemplateMediaUrl(url, 'image'),\n\t\tvalidateMimeType,\n\t\tmediaComponent: bannerImage,\n\t\tfileRef,\n\t});\n\n\tfunction updateTemplateMediaUrl(url: string, mediaType: 'icon' \| 'image') {\n\t\tconst tempCopy = { ...template };\n\t\tconst localTemplate = cloneDeep(tempCopy);\n\t\tif (mediaType === 'icon') {\n\t\t\tlocalTemplate.webpushBroadcastConfig!.icon = [url];\n\t\t\tsetIconImage([url]);\n\t\t} else if (mediaType === 'image') {\n\t\t\tlocalTemplate.webpushBroadcastConfig!.image = [url];\n\t\t\tsetBannerImage([url]);\n\t\t}\n\n\t\tonTemplateChange?.({ ...localTemplate });\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 = { ...template };\n\t\tconst selectedTemplate = cloneDeep(tempCopy);\n\t\tconst isCustom = mode === 'custom' && typeof val === 'string';\n\t\tconst btnMapping = selectedTemplate?.webpushBroadcastConfig?.buttons;\n\t\tif (btnMapping && btnMapping.length > 0) {\n\t\t\tbtnMapping[btnIndex] = isCustom\n\t\t\t\t? val\n\t\t\t\t: typeof val !== 'string'\n\t\t\t\t? val.placeHolder\n\t\t\t\t: '';\n\t\t\tconst config = {\n\t\t\t\t...selectedTemplate.webpushBroadcastConfig,\n\t\t\t\tbuttons: btnMapping,\n\t\t\t};\n\t\t\tselectedTemplate.webpushBroadcastConfig = config;\n\t\t}\n\t\tonTemplateChange?.(selectedTemplate as WebpushTemplateType);\n\t}\n\n\tconst getActiveEditMediaResponse = () => {\n\t\tif (useEditMediaResponseForIcon.openEditMedia) {\n\t\t\treturn useEditMediaResponseForIcon;\n\t\t} else if (useEditMediaResponseForImage.openEditMedia) {\n\t\t\treturn useEditMediaResponseForImage;\n\t\t}\n\t\treturn null;\n\t};\n\n\tconst activeEditMediaResponse = getActiveEditMediaResponse();\n\n\tif (activeEditMediaResponse) {\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={HEADER_TYPES.IMAGE}\n\t\t\t\t\tuploadMedia={activeEditMediaResponse.uploadMedia}\n\t\t\t\t\tvariableListForImage={[]}\n\t\t\t\t\tuseEditWhatsappTemplateMediaResponse={activeEditMediaResponse}\n\t\t\t\t\tsetOpenEditMedia={activeEditMediaResponse.setOpenEditMedia}\n\t\t\t\t\topenEditMedia={activeEditMediaResponse.openEditMedia}\n\t\t\t\t\teditIconRef={activeEditMediaResponse.editIconRef}\n\t\t\t\t\tfileRef={fileRef}\n\t\t\t\t\tskipAddVariable\n\t\t\t\t/>\n\t\t\t</Container>\n\t\t);\n\t}\n\n\tfunction updateWebpushBroadcastConfig(newValue: string) {\n\t\tconst newLink = `https://${newValue}`;\n\t\tsetRedirectionLink([newLink]);\n\t\tconst currentTemplate = cloneDeep(template) as WebpushTemplateType;\n\t\tif (currentTemplate.webpushBroadcastConfig?.redirectionLink) {\n\t\t\tcurrentTemplate.webpushBroadcastConfig!.redirectionLink = [newLink];\n\t\t}\n\t\tonTemplateChange?.({ ...currentTemplate });\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: 'auto',\n\t\t\t}}\n\t\t>\n\t\t\t{iconImage && iconImage.length ? (\n\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\timageName={iconImage}\n\t\t\t\t\t\thandleImageChange={useEditMediaResponseForIcon.handleImageChange}\n\t\t\t\t\t\tmediaType={HEADER_TYPES.IMAGE}\n\t\t\t\t\t\terror={useEditMediaResponseForIcon.error}\n\t\t\t\t\t\tisLoading={useEditMediaResponseForIcon.loading}\n\t\t\t\t\t\tsetOpenEditMedia={useEditMediaResponseForIcon.setOpenEditMedia}\n\t\t\t\t\t/>\n\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t) : null}\n\n\t\t\t{bannerImage && bannerImage.length ? (\n\t\t\t\t<EditTemplateMediaContainer>\n\t\t\t\t\t<EditMediaV2\n\t\t\t\t\t\timageName={bannerImage}\n\t\t\t\t\t\thandleImageChange={useEditMediaResponseForImage.handleImageChange}\n\t\t\t\t\t\tmediaType={HEADER_TYPES.IMAGE}\n\t\t\t\t\t\terror={useEditMediaResponseForImage.error}\n\t\t\t\t\t\tisLoading={useEditMediaResponseForImage.loading}\n\t\t\t\t\t\tsetOpenEditMedia={useEditMediaResponseForImage.setOpenEditMedia}\n\t\t\t\t\t/>\n\t\t\t\t</EditTemplateMediaContainer>\n\t\t\t) : null}\n\n\t\t\t{bodyVariables?.length \|\| titleVariables?.length ? (\n\t\t\t\t<VariableEditorHeader\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tpaddingTop: 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) : null}\n\n\t\t\t{descriptionComponents?.map((each, i) => (\n\t\t\t\t<VariableConnectorWhatsApp\n\t\t\t\t\toriginalVariableList={templateVariable as WebpushTemplateVariables}\n\t\t\t\t\toriginalList={originalVariableList}\n\t\t\t\t\tchannel={CHANNEL_TYPE.WEBPUSH}\n\t\t\t\t\ttype={each.type as WEB_PUSH_COMPONENT_TYPE}\n\t\t\t\t\tdescriptionComponent={each.component}\n\t\t\t\t\tkey={i}\n\t\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t{redirectionLink && redirectionLink.length ? (\n\t\t\t\t<div style={{ padding: '16px 14px' }}>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tlabelText={'Redirection Link'}\n\t\t\t\t\t\tid={`redirection-link`}\n\t\t\t\t\t\tvalue={redirectionLink[0].replace('https://', '')}\n\t\t\t\t\t\terrorMessage={\n\t\t\t\t\t\t\tisValidUrl(redirectionLink[0]) ? '' : 'Please enter a valid URL'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmaxCharLimit={2000}\n\t\t\t\t\t\tnoKeyDownChange={true}\n\t\t\t\t\t\tstate={disableEditVariable ? 'disabled' : 'none'}\n\t\t\t\t\t\tprefixText={'https://'}\n\t\t\t\t\t\tplaceholder={'Enter custom URL here'}\n\t\t\t\t\t\tonChangeText={(enteredVariableName) => {\n\t\t\t\t\t\t\tupdateWebpushBroadcastConfig(enteredVariableName);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{(templateVariable as WebpushTemplateVariables)?.buttons?.filter(\n\t\t\t\t(btn) => btn.type === 'URL',\n\t\t\t)?.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{(templateVariable as WebpushTemplateVariables)?.buttons?.map(\n\t\t\t\t(btn, i) => (\n\t\t\t\t\t<WhatsAppTemplateCardButtonV2\n\t\t\t\t\t\tvariableListIndex={i}\n\t\t\t\t\t\tCTAoptions={\n\t\t\t\t\t\t\twhatsappSpecificPickerMeta?.CTAoptions as ButtonPlaceHolderOptions[]\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbutton={btn}\n\t\t\t\t\t\tkey={`${i}`}\n\t\t\t\t\t\tcurrentVariableList={templateVariable as WebpushTemplateVariables}\n\t\t\t\t\t\tupdateSelectedURLTemplateBtn={\n\t\t\t\t\t\t\tupdateSelectedTemplateURLBtn as URLBtnUpdateFunctionType\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 EditWebpushTemplate;\n"],"names":["EditWebpushTemplate","_ref","template","onTemplateChange","whatsappSpecificPickerMeta","showVariableModal","templateVariable","setTemplateVariables","useState","webpushConfig","setWebpushConfig","variableList","disableEditVariable","originalVariableList","setOriginalVariableList","useTemplateModalContext","processWebpushTemplate","isValidUrl","useWebPushTemplate","iconImage","setIconImage","bannerImage","setBannerImage","redirectionLink","setRedirectionLink","useEffect","then","_ref2","templateVariableMapping","webpushBroadcastConfig","Object","assign","descriptionComponents","bodyVariables","titleVariables","useMemo","data","getAllDataFromWebpushTemplateComponent","uploadMediaLink","uploadMediaFiles","validateMimeType","fileRef","useRef","useEditMediaResponseForIcon","useEditWhatsappTemplateMedia","updateTemplateImageUrl","url","updateTemplateMediaUrl","mediaComponent","useEditMediaResponseForImage","mediaType","tempCopy","localTemplate","cloneDeep","icon","image","updateSelectedTemplateURLBtn","val","mode","btnIndex","selectedTemplate","isCustom","btnMapping","_a","buttons","length","placeHolder","config","activeEditMediaResponse","openEditMedia","_jsx","Container","style","flexDirection","width","maxHeight","children","EditMediaModal","mediaComponentFormat","HEADER_TYPES","IMAGE","uploadMedia","variableListForImage","useEditWhatsappTemplateMediaResponse","setOpenEditMedia","editIconRef","skipAddVariable","_jsxs","minWidth","EditTemplateMediaContainer","EditMediaV2","imageName","handleImageChange","error","isLoading","loading","VariableEditorHeader","containerStyle","paddingTop","headerText","subText","toolTipInfo","map","each","i","VariableConnectorWhatsApp","originalList","channel","CHANNEL_TYPE","WEBPUSH","type","descriptionComponent","component","padding","Input","labelText","id","value","replace","errorMessage","maxCharLimit","noKeyDownChange","state","prefixText","placeholder","onChangeText","enteredVariableName","newValue","newLink","currentTemplate","updateWebpushBroadcastConfig","_Fragment","_b","filter","btn","_c","WhatsAppTemplateCardButtonV2","variableListIndex","CTAoptions","button","currentVariableList","updateSelectedURLTemplateBtn"],"mappings":"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"}

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as l,Fragment as t}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import n from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import d from"../../../assets/icons/PlusIcon.js";import a from"lodash/cloneDeep";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import{isRCSChannel as b}from"../../template-preview/helpers/templateMiscHelper.js";import{POD as x}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as C,TitleRegular as j,BodySecondary as I,BodyCaption as k}from"../../TypographyStyle.js";import{COLORS as O}from"../../../constants/Theme.js";const w=({template:w,whatsappSpecificPickerMeta:P,showVariableModal:T,variableListForImage:S,discountCode:B,setDiscountCode:E})=>{var L,D,F,M,R,V,$,q;const{selectedCarouselIndex:A,setTemplate:N,pickerConf:W,isProductCarouselType:_,pod:z,cardCount:G,carouselProducts:H,setCarouselProducts:K,isError:J,cardImages:Q,disableEditVariable:U,onDeleteSelectedProducts:X,setSelectedCarouselIndex:Y,setVariableCallback:Z,setShowVariablePicker:ee,sliderRef:le,setCarouselBodyError:te}=g(),[oe,ne]=s(b(null==w?void 0:w.channel)?"Carousel Cards":-1==A?"First Message (Step 1/2)":_?"Product Carousel "+((null===(D=null===(L=null==w?void 0:w.mapping)||void 0===L?void 0:L.body)||void 0===D?void 0:D.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(M=null===(F=null==w?void 0:w.mapping)||void 0===F?void 0:F.body)||void 0===M?void 0:M.length)?"(Step 2/2)":"")),[ie,re]=s(!1),[de,ae]=s(!1),se=A===(null!=G?G:-1)-1,ce=(null!=A?A:-1)<1;c((()=>{var e,l,t,o;ne(b(null==w?void 0:w.channel)?"Carousel Cards":-1==A?"First Message (Step 1/2)":_?"Product Carousel "+((null===(l=null===(e=null==w?void 0:w.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(t=null==w?void 0:w.mapping)||void 0===t?void 0:t.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[A]),c((()=>{ee(!1)}),[A]);const ue=e=>{null==K||K([{name:"variable",productName:e.actualValue}])};return c((()=>{-1===A&&b(null==w?void 0:w.channel)&&(null==Y||Y(0))}),[A,null==w?void 0:w.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!b(null==w?void 0:w.channel)&&null!=A&&A>=0&&!!(null===(V=null===(R=null==w?void 0:w.mapping)||void 0===R?void 0:R.body)||void 0===V?void 0:V.length)&&l(p,{Icon:n,onClick:()=>{null==Y||Y(-1)}}),l(C,Object.assign({style:{marginLeft:10}},{children:oe}))]})),_&&(null!==($=null==H?void 0:H.length)&&void 0!==$?$:0)>0&&null!=A&&A>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[l(y,{editItem:()=>{1===(null==H?void 0:H.length)&&"variable"===H[0].name?(Z((()=>ue)),ee(!0)):re(!ie)},cardBody:1===(null==H?void 0:H.length)&&"variable"===H[0].name?`${H[0].productName}`:`${null==H?void 0:H.length} Products Selected`,hideIcon:1===(null==H?void 0:H.length)&&"variable"===H[0].name,deleteItem:()=>{var e;if(1===(null==H?void 0:H.length)&&"variable"===H[0].name)return void(null==K||K([]));const l=a(Object.assign({},w));l&&(Q&&Q.length>0?null==Q||Q.forEach(((e,t)=>{var o;l.components[1].cards[t].components[0].example.header_handle=[null!==(o=Q[t])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==l?void 0:l.components[1].cards)||void 0===e||e.forEach(((e,t)=>{l.components[1].cards[t].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==N||N(l)),null==K||K([]),null==te||te(""),null==X||X()}}),H&&(null==H?void 0:H.length)>0&&"variable"!=H[0].name&&l(u,{disabled:(null!==(q=null==H?void 0:H.length)&&void 0!==q?q:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{ae(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!U&&_&&0===(null==H?void 0:H.length)&&null!=A&&A>=0&&e(t,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[l(j,{children:"Product(s)"}),l(I,{children:`Select ${null!=G?G:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:J?16:12,marginRight:J?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:J?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:J?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:l(d,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{re(!0)}}),z===x.CHATBOT&&e(t,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8,flex:1}}),l(k,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8,flex:1}})]})),l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:J?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:J?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex"}},{children:l(d,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{Z((()=>ue)),ee(!0)}})]})]})),J&&l("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:l(h,{padding:"8px",errorText:"Please add products"})}))]}),!_&&(null!=A?A:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:O.surface.hovered,alignItems:"center"}},{children:[l(p,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickPrev(),(null!=A?A:-1)<1||null==Y||Y((e=>e-1))}}),l(j,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:O.content.secondary},{children:`Card ${(null!=A?A:0)+1}/${G}`})),l(p,{Icon:r,width:8,height:14,disabled:se,svgStyle:se?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickNext(),(null!=A?A:-1)>=(null!=G?G:-1)-1||null==Y||Y((e=>e+1))}})]})),l(f,{whatsappSpecificPickerMeta:P,template:w,onTemplateChange:e=>{null==N||N(e)},showVariableModal:T,variableListForImage:S,discountCode:B,setDiscountCode:E}),ie&&W&&l(m,{zIndex:200,startupScreen:de?v.RearrangeProducts:v.Collections,rearrangeEnabled:!0,storeId:W.storeId,selectedItems:(e=>{if(e.length>0){const l={};for(const t of e){const e=null==t?void 0:t.collectionId,o=t.productId,n=t.variantId;e in l||(l[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in l[e].products||(l[e].products[o]={variants:{},name:(null==t?void 0:t.productName)||"",image:(null==t?void 0:t.productImage)||""}),l[e].products[o].variants[n]={name:(null==t?void 0:t.name)||"",price:"",image:(null==t?void 0:t.image)||"",quantity:t.quantity||0,displayOrder:t.displayOrder}}return l}return{}})(null!=H?H:[]),collectionFetcher:W.fetchCollections,productFetcher:W.fetchProducts,onAdd:(e,l)=>{var t,o,n,i,r,d,s,c;ae(!1);const u=[];delete e.isCustom;for(const l of Object.keys(e)){const a=e[l].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const p=a[e].variants;if(void 0!==p&&Object.keys(p).length)for(const m of Object.keys(p)){const{name:v,image:h,quantity:g,displayOrder:f}=p[m],y={name:v,image:null!==(o=null!=h?h:null===(t=a[e])||void 0===t?void 0:t.image)&&void 0!==o?o:"",quantity:g,variantId:m,productId:e,displayOrder:f,collectionId:l,productName:null!==(i=null===(n=a[e])||void 0===n?void 0:n.name)&&void 0!==i?i:"",productImage:null!==(d=null===(r=a[e])||void 0===r?void 0:r.image)&&void 0!==d?d:"",productDescription:null!==(c=null===(s=a[e])||void 0===s?void 0:s.description)&&void 0!==c?c:""};u.push(y)}}}const p=u.sort(((e,l)=>e.displayOrder-l.displayOrder)),m=u.map((e=>e.image)),v=a(Object.assign({},w));v&&(m.forEach(((e,l)=>{var t;v.components[1].cards[l].components[0].example.header_handle=e?[e]:[null!==(t=null==Q?void 0:Q[l])&&void 0!==t?t:""]})),null==N||N(v)),null==K||K(p),null==te||te(""),re(!1)},searchInCollectionFetcher:W.searchInCollection,searchFetcher:W.searchProducts,visible:ie,onClose:()=>{re(!1)},exactLimit:null!=G?G:1,appType:W.appType||o.BIK})]}))};export{w as default};
+import{jsxs as e,jsx as l,Fragment as t}from"react/jsx-runtime";import{ApplicationType as o}from"@bikdotai/bik-models/growth/models/bik-store";import n from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import r from"../../../assets/icons/chevronRight.svg.js";import d from"../../../assets/icons/PlusIcon.js";import a from"lodash/cloneDeep";import{useState as s,useEffect as c}from"react";import{Button as u}from"../../button/Button.js";import{IconButton as p}from"../../icon-button/IconButton.js";import{ProductPickerModal as m}from"../../product-picker-v2/modal.js";import{ScreenName as v}from"../../product-picker-v2/type.js";import{Badge as h}from"../Badge/index.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./EditWhatsAppTemplateV2.js";import{ProductBox as y}from"./ProductBox.js";import{isRCSChannel as b}from"../../template-preview/helpers/templateMiscHelper.js";import{POD as x}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleMedium as C,TitleRegular as j,BodySecondary as I,BodyCaption as k}from"../../TypographyStyle.js";import{COLORS as O}from"../../../constants/Theme.js";const w=w=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:B,discountCode:E,setDiscountCode:L}=w;var D,F,M,R,V,$,q,A;const{selectedCarouselIndex:N,setTemplate:W,pickerConf:_,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:le,sliderRef:te,setCarouselBodyError:oe}=g(),[ne,ie]=s(b(null==P?void 0:P.channel)?"Carousel Cards":-1==N?"First Message (Step 1/2)":z?"Product Carousel "+((null===(F=null===(D=null==P?void 0:P.mapping)||void 0===D?void 0:D.body)||void 0===F?void 0:F.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(R=null===(M=null==P?void 0:P.mapping)||void 0===M?void 0:M.body)||void 0===R?void 0:R.length)?"(Step 2/2)":"")),[re,de]=s(!1),[ae,se]=s(!1),ce=N===(null!=H?H:-1)-1,ue=(null!=N?N:-1)<1;c((()=>{var e,l,t,o;ie(b(null==P?void 0:P.channel)?"Carousel Cards":-1==N?"First Message (Step 1/2)":z?"Product Carousel "+((null===(l=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(t=null==P?void 0:P.mapping)||void 0===t?void 0:t.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[N]),c((()=>{le(!1)}),[N]);const pe=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return c((()=>{-1===N&&b(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[N,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!b(null==P?void 0:P.channel)&&null!=N&&N>=0&&!!(null===($=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===$?void 0:$.length)&&l(p,{Icon:n,onClick:()=>{null==Z||Z(-1)}}),l(C,Object.assign({style:{marginLeft:10}},{children:ne}))]})),z&&(null!==(q=null==K?void 0:K.length)&&void 0!==q?q:0)>0&&null!=N&&N>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[l(y,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>pe)),le(!0)):de(!re)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const l=a(Object.assign({},P));l&&(U&&U.length>0?null==U||U.forEach(((e,t)=>{var o;l.components[1].cards[t].components[0].example.header_handle=[null!==(o=U[t])&&void 0!==o?o:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==l?void 0:l.components[1].cards)||void 0===e||e.forEach(((e,t)=>{l.components[1].cards[t].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==W||W(l)),null==J||J([]),null==oe||oe(""),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&l(u,{disabled:(null!==(A=null==K?void 0:K.length)&&void 0!==A?A:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{se(!0),de(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=N&&N>=0&&e(t,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[l(j,{children:"Product(s)"}),l(I,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:l(d,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{de(!0)}}),G===x.CHATBOT&&e(t,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8,flex:1}}),l(k,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),l("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8,flex:1}})]})),l(u,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${O.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>l("div",Object.assign({style:{display:"flex"}},{children:l(d,{width:18,height:18,color:O.content.secondary})})),onClick:e=>{ee((()=>pe)),le(!0)}})]})]})),Q&&l("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:l(h,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=N?N:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:O.surface.hovered,alignItems:"center"}},{children:[l(p,{Icon:i,disabled:ue,width:8,height:14,svgStyle:ue?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==te?void 0:te.current)||void 0===e||e.slickPrev(),(null!=N?N:-1)<1||null==Z||Z((e=>e-1))}}),l(j,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:O.content.secondary},{children:`Card ${(null!=N?N:0)+1}/${H}`})),l(p,{Icon:r,width:8,height:14,disabled:ce,svgStyle:ce?{}:{color:O.content.secondary},onClick:()=>{var e;null===(e=null==te?void 0:te.current)||void 0===e||e.slickNext(),(null!=N?N:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),l(f,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==W||W(e)},showVariableModal:S,variableListForImage:B,discountCode:E,setDiscountCode:L}),re&&_&&l(m,{zIndex:200,startupScreen:ae?v.RearrangeProducts:v.Collections,rearrangeEnabled:!0,storeId:_.storeId,selectedItems:(e=>{if(e.length>0){const l={};for(const t of e){const e=null==t?void 0:t.collectionId,o=t.productId,n=t.variantId;e in l||(l[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in l[e].products||(l[e].products[o]={variants:{},name:(null==t?void 0:t.productName)||"",image:(null==t?void 0:t.productImage)||""}),l[e].products[o].variants[n]={name:(null==t?void 0:t.name)||"",price:"",image:(null==t?void 0:t.image)||"",quantity:t.quantity||0,displayOrder:t.displayOrder}}return l}return{}})(null!=K?K:[]),collectionFetcher:_.fetchCollections,productFetcher:_.fetchProducts,onAdd:(e,l)=>{var t,o,n,i,r,d,s,c;se(!1);const u=[];delete e.isCustom;for(const l of Object.keys(e)){const a=e[l].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const p=a[e].variants;if(void 0!==p&&Object.keys(p).length)for(const m of Object.keys(p)){const{name:v,image:h,quantity:g,displayOrder:f}=p[m],y={name:v,image:null!==(o=null!=h?h:null===(t=a[e])||void 0===t?void 0:t.image)&&void 0!==o?o:"",quantity:g,variantId:m,productId:e,displayOrder:f,collectionId:l,productName:null!==(i=null===(n=a[e])||void 0===n?void 0:n.name)&&void 0!==i?i:"",productImage:null!==(d=null===(r=a[e])||void 0===r?void 0:r.image)&&void 0!==d?d:"",productDescription:null!==(c=null===(s=a[e])||void 0===s?void 0:s.description)&&void 0!==c?c:""};u.push(y)}}}const p=u.sort(((e,l)=>e.displayOrder-l.displayOrder)),m=u.map((e=>e.image)),v=a(Object.assign({},P));v&&(m.forEach(((e,l)=>{var t;v.components[1].cards[l].components[0].example.header_handle=e?[e]:[null!==(t=null==U?void 0:U[l])&&void 0!==t?t:""]})),null==W||W(v)),null==J||J(p),null==oe||oe(""),de(!1)},searchInCollectionFetcher:_.searchInCollection,searchFetcher:_.searchProducts,visible:re,onClose:()=>{de(!1)},exactLimit:null!=H?H:1,appType:_.appType||o.BIK})]}))};export{w as default};
 //# sourceMappingURL=EditWhatsAppCarouselTemplateV2.js.map

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditWhatsAppCarouselTemplateV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.tsx"],"sourcesContent":["import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport BackIcon from '@src/assets/icons/arrow_back.svg';\nimport LeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport RightIcon from '@src/assets/icons/chevronRight.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useState } from 'react';\nimport type {\n\tVariable,\n\tVariableListInterfaceV2,\n} from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { ProductPickerModal } from '@src/components/product-picker-v2/modal';\nimport type { SelectedItems } from '@src/components/product-picker-v2/type';\nimport { ScreenName } from '@src/components/product-picker-v2/type';\nimport { Badge } from '@src/components/template-context-mapper/Badge';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport EditWhatsAppTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2';\nimport { ProductBox } from '@src/components/template-context-mapper/modalElements/ProductBox';\nimport { isRCSChannel } 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 type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\tPOD,\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { CarouselProduct } from './modal';\n\nexport interface EditWhatsAppCarouselTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WhatsAppCarouselTemplate;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}\n\nconst EditWhatsAppCarouselTemplateV2 = ({\n\ttemplate,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n\tvariableListForImage,\n\tdiscountCode,\n\tsetDiscountCode,\n}: EditWhatsAppCarouselTemplateV2Props) => {\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tsetTemplate,\n\t\tpickerConf,\n\t\tisProductCarouselType,\n\t\tpod,\n\t\tcardCount,\n\t\tcarouselProducts,\n\t\tsetCarouselProducts,\n\t\tisError,\n\t\tcardImages,\n\t\tdisableEditVariable,\n\t\tonDeleteSelectedProducts,\n\t\tsetSelectedCarouselIndex,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t\tsliderRef,\n\t\tsetCarouselBodyError,\n\t} = useTemplateModalContext();\n\tconst [titleText, setTitleText] = useState<string>(\n\t\tisRCSChannel(template?.channel)\n\t\t\t? 'Carousel Cards'\n\t\t\t: selectedCarouselIndex == -1\n\t\t\t? 'First Message (Step 1/2)'\n\t\t\t: isProductCarouselType\n\t\t\t? `Product Carousel ${\n\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t }`\n\t\t\t: `Carousel Cards ${template?.mapping?.body?.length ? '(Step 2/2)' : ''}`,\n\t);\n\tconst [showProductPicker, setShowProductPicker] = useState<boolean>(false);\n\tconst [rearrangeProducts, setRearrangeProducts] = useState<boolean>(false);\n\n\tconst shouldHideRightArrow = selectedCarouselIndex === (cardCount ?? -1) - 1;\n\tconst shouldHideLeftArrow = (selectedCarouselIndex ?? -1) < 1;\n\n\tuseEffect(() => {\n\t\tsetTitleText(\n\t\t\tisRCSChannel(template?.channel)\n\t\t\t\t? 'Carousel Cards'\n\t\t\t\t: selectedCarouselIndex == -1\n\t\t\t\t? 'First Message (Step 1/2)'\n\t\t\t\t: isProductCarouselType\n\t\t\t\t? `Product Carousel ${\n\t\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t\t }`\n\t\t\t\t: `Carousel Cards ${\n\t\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t\t }`,\n\t\t);\n\t}, [selectedCarouselIndex]);\n\n\tuseEffect(() => {\n\t\tsetShowVariablePicker(false);\n\t}, [selectedCarouselIndex]);\n\n\tconst onItemsPicked = (items: SelectedItems, total: number) => {\n\t\tsetRearrangeProducts(false);\n\t\tconst selectedList: any[] = [];\n\t\tdelete items['isCustom'];\n\t\tfor (const key of Object.keys(items)) {\n\t\t\tconst products = items[key].products;\n\t\t\tif (typeof products === 'undefined') continue;\n\t\t\tif (!Object.keys(products).length) continue;\n\t\t\tfor (const productId of Object.keys(products)) {\n\t\t\t\tconst variants = products[productId].variants;\n\t\t\t\tif (typeof variants === 'undefined') continue;\n\t\t\t\tif (!Object.keys(variants).length) continue;\n\t\t\t\tfor (const variantId of Object.keys(variants)) {\n\t\t\t\t\tconst { name, image, quantity, displayOrder } = variants[variantId];\n\t\t\t\t\tconst obj = {\n\t\t\t\t\t\tname,\n\t\t\t\t\t\timage: image ?? products[productId]?.image ?? '',\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tvariantId,\n\t\t\t\t\t\tproductId,\n\t\t\t\t\t\tdisplayOrder,\n\t\t\t\t\t\tcollectionId: key,\n\t\t\t\t\t\tproductName: products[productId]?.name ?? '',\n\t\t\t\t\t\tproductImage: products[productId]?.image ?? '',\n\t\t\t\t\t\tproductDescription: products[productId]?.description ?? '',\n\t\t\t\t\t};\n\t\t\t\t\tselectedList.push(obj);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst sortedSelectedList = selectedList.sort(\n\t\t\t(a: any, b: any) => a.displayOrder - b.displayOrder,\n\t\t);\n\t\tconst selectedImages = selectedList.map((product) => product.image);\n\n\t\tconst selectedTemplate = cloneDeep({ ...template });\n\t\tif (selectedTemplate) {\n\t\t\tselectedImages.forEach((image, index) => {\n\t\t\t\tif (image) {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [image];\n\t\t\t\t} else {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [cardImages?.[index] ?? ''];\n\t\t\t\t}\n\t\t\t});\n\t\t\tsetTemplate?.(selectedTemplate as WhatsAppCarouselTemplate);\n\t\t}\n\t\tsetCarouselProducts?.(sortedSelectedList);\n\t\tsetCarouselBodyError?.('');\n\t\tsetShowProductPicker(false);\n\t};\n\n\tconst generatePickerData = (selectedList: CarouselProduct[]) => {\n\t\tif (selectedList.length > 0) {\n\t\t\tconst obj = {};\n\t\t\tfor (const item of selectedList) {\n\t\t\t\tconst collectionId = item?.collectionId;\n\t\t\t\tconst productId = item.productId;\n\t\t\t\tconst variantId = item.variantId;\n\t\t\t\tif (!(collectionId in obj)) {\n\t\t\t\t\tobj[collectionId] = {\n\t\t\t\t\t\tproducts: {},\n\t\t\t\t\t\tname: '',\n\t\t\t\t\t\timage: '',\n\t\t\t\t\t\tisSmartCollection: false,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tif (!(productId in obj[collectionId].products!)) {\n\t\t\t\t\tobj[collectionId].products![productId] = {\n\t\t\t\t\t\tvariants: {},\n\t\t\t\t\t\tname: item?.productName \|\| '',\n\t\t\t\t\t\timage: item?.productImage \|\| '',\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tobj[collectionId].products![productId].variants![variantId] = {\n\t\t\t\t\tname: item?.name \|\| '',\n\t\t\t\t\tprice: '',\n\t\t\t\t\timage: item?.image \|\| '',\n\t\t\t\t\tquantity: item.quantity \|\| 0,\n\t\t\t\t\tdisplayOrder: item.displayOrder,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn obj;\n\t\t}\n\t\treturn {};\n\t};\n\n\tconst deleteItem = () => {\n\t\tif (\n\t\t\tcarouselProducts?.length === 1 &&\n\t\t\tcarouselProducts[0].name === 'variable'\n\t\t) {\n\t\t\tsetCarouselProducts?.([]);\n\t\t\treturn;\n\t\t}\n\t\tconst selectedTemplate = cloneDeep({ ...template });\n\t\tif (selectedTemplate) {\n\t\t\tif (cardImages && cardImages.length > 0) {\n\t\t\t\tcardImages?.forEach((image, index) => {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [\n\t\t\t\t\t\tcardImages[index] ??\n\t\t\t\t\t\t\t'https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png',\n\t\t\t\t\t];\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tselectedTemplate?.components![1].cards?.forEach((image, index) => {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [\n\t\t\t\t\t\t'https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png',\n\t\t\t\t\t];\n\t\t\t\t});\n\t\t\t}\n\t\t\tsetTemplate?.(selectedTemplate as WhatsAppCarouselTemplate);\n\t\t}\n\t\tsetCarouselProducts?.([]);\n\t\tsetCarouselBodyError?.('');\n\t\tonDeleteSelectedProducts?.();\n\t};\n\n\tconst handleVariableCallback = (variable: Variable) => {\n\t\tsetCarouselProducts?.([\n\t\t\t{\n\t\t\t\tname: 'variable',\n\t\t\t\tproductName: variable.actualValue,\n\t\t\t} as any,\n\t\t]);\n\t};\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselIndex === -1 && isRCSChannel(template?.channel)) {\n\t\t\tsetSelectedCarouselIndex?.(0);\n\t\t}\n\t}, [selectedCarouselIndex, template?.channel]);\n\n\treturn (\n\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\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{!isRCSChannel(template?.channel) &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex >= 0 &&\n\t\t\t\t\t!!template?.mapping?.body?.length && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetSelectedCarouselIndex?.(-1);\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<TitleMedium style={{ marginLeft: 10 }}>{titleText}</TitleMedium>\n\t\t\t</div>\n\t\t\t{isProductCarouselType &&\n\t\t\t\t(carouselProducts?.length ?? 0) > 0 &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\trowGap: 8,\n\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\t\tmarginRight: 10,\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ProductBox\n\t\t\t\t\t\t\teditItem={() => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetShowProductPicker(!showProductPicker);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcardBody={\n\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t\t\t? `${carouselProducts[0].productName}`\n\t\t\t\t\t\t\t\t\t: `${carouselProducts?.length} Products Selected`\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thideIcon={\n\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdeleteItem={deleteItem}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{carouselProducts &&\n\t\t\t\t\t\t\tcarouselProducts?.length > 0 &&\n\t\t\t\t\t\t\tcarouselProducts[0].name != 'variable' && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={(carouselProducts?.length ?? 0) <= 1}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-end',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetRearrangeProducts(true);\n\t\t\t\t\t\t\t\t\t\tsetShowProductPicker(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tbuttonText=\"Rearrange Products\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"tertiary\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t{!disableEditVariable &&\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tcarouselProducts?.length === 0 &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= 0 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div style={{ marginLeft: 12 }}>\n\t\t\t\t\t\t\t<TitleRegular>Product(s)</TitleRegular>\n\t\t\t\t\t\t\t<BodySecondary>{`Select ${\n\t\t\t\t\t\t\t\tcardCount ?? 1\n\t\t\t\t\t\t\t} products`}</BodySecondary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 16,\n\t\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t\t\tmarginLeft: isError ? 16 : 12,\n\t\t\t\t\t\t\t\tmarginRight: isError ? 16 : 12,\n\t\t\t\t\t\t\t\tflexDirection: 'column',\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}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\tmarginBottom: 12,\n\t\t\t\t\t\t\t\t\tborder: isError\n\t\t\t\t\t\t\t\t\t\t? `2px dashed ${COLORS.content.negative}`\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\tbuttonText={'Add Product(s)'}\n\t\t\t\t\t\t\t\tbuttonType={isError ? 'tertiaryGray' : 'dashBold'}\n\t\t\t\t\t\t\t\tLeadingIcon={() => (\n\t\t\t\t\t\t\t\t\t<div style={{ display: 'flex', width: 18, height: 18 }}>\n\t\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tsetShowProductPicker(true);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{pod === POD.CHATBOT && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\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\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#E0E0E0',\n\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: 1,\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\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#616161', overflow: 'unset' }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tOR\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#E0E0E0',\n\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: 1,\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</div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 12,\n\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\tborder: isError\n\t\t\t\t\t\t\t\t\t\t\t\t? `2px dashed ${COLORS.content.negative}`\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\tbuttonText={'Add Product(s) Variable'}\n\t\t\t\t\t\t\t\t\t\tbuttonType={isError ? 'tertiaryGray' : 'dashBold'}\n\t\t\t\t\t\t\t\t\t\tLeadingIcon={() => (\n\t\t\t\t\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\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</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\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)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isError && (\n\t\t\t\t\t\t\t<div style={{ marginLeft: 10, marginBottom: 16 }}>\n\t\t\t\t\t\t\t\t<Badge padding={'8px'} errorText={'Please add products'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t{!isProductCarouselType && (selectedCarouselIndex ?? -1) > -1 && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tbackground: COLORS.surface.hovered,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={LeftIcon}\n\t\t\t\t\t\tdisabled={shouldHideLeftArrow}\n\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\theight={14}\n\t\t\t\t\t\tsvgStyle={\n\t\t\t\t\t\t\t!shouldHideLeftArrow ? { color: COLORS.content.secondary } : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t\t\tsliderRef?.current?.slickPrev();\n\t\t\t\t\t\t\tif ((selectedCarouselIndex ?? -1) < 1) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetSelectedCarouselIndex?.((prev) => prev - 1);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tstyle={{ flex: 1, display: 'flex', justifyContent: 'center' }}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>{`Card ${\n\t\t\t\t\t\t(selectedCarouselIndex ?? 0) + 1\n\t\t\t\t\t}/${cardCount}`}</TitleRegular>\n\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={RightIcon}\n\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\theight={14}\n\t\t\t\t\t\tdisabled={shouldHideRightArrow}\n\t\t\t\t\t\tsvgStyle={\n\t\t\t\t\t\t\t!shouldHideRightArrow ? { color: COLORS.content.secondary } : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t\t\tsliderRef?.current?.slickNext();\n\t\t\t\t\t\t\tif ((selectedCarouselIndex ?? -1) >= (cardCount ?? -1) - 1) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetSelectedCarouselIndex?.((prev) => prev + 1);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\tonTemplateChange={(\n\t\t\t\t\ttemplate:\n\t\t\t\t\t\t\| WhatsAppTemplate\n\t\t\t\t\t\t\| EmailTemplateType\n\t\t\t\t\t\t\| SMSTemplateType\n\t\t\t\t\t\t\| WhatsAppCarouselTemplate,\n\t\t\t\t) => {\n\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t}}\n\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\tdiscountCode={discountCode}\n\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t/>\n\t\t\t{showProductPicker && pickerConf && (\n\t\t\t\t<ProductPickerModal\n\t\t\t\t\tzIndex={200}\n\t\t\t\t\tstartupScreen={\n\t\t\t\t\t\trearrangeProducts\n\t\t\t\t\t\t\t? ScreenName.RearrangeProducts\n\t\t\t\t\t\t\t: ScreenName.Collections\n\t\t\t\t\t}\n\t\t\t\t\trearrangeEnabled={true}\n\t\t\t\t\tstoreId={pickerConf.storeId}\n\t\t\t\t\tselectedItems={generatePickerData(carouselProducts ?? [])}\n\t\t\t\t\tcollectionFetcher={pickerConf.fetchCollections}\n\t\t\t\t\tproductFetcher={pickerConf.fetchProducts}\n\t\t\t\t\tonAdd={onItemsPicked}\n\t\t\t\t\tsearchInCollectionFetcher={pickerConf.searchInCollection}\n\t\t\t\t\tsearchFetcher={pickerConf.searchProducts}\n\t\t\t\t\tvisible={showProductPicker}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowProductPicker(false);\n\t\t\t\t\t}}\n\t\t\t\t\texactLimit={cardCount ?? 1}\n\t\t\t\t\tappType={pickerConf.appType \|\| ApplicationType.BIK}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default EditWhatsAppCarouselTemplateV2;\n"],"names":["EditWhatsAppCarouselTemplateV2","template","whatsappSpecificPickerMeta","showVariableModal","variableListForImage","discountCode","setDiscountCode","selectedCarouselIndex","setTemplate","pickerConf","isProductCarouselType","pod","cardCount","carouselProducts","setCarouselProducts","isError","cardImages","disableEditVariable","onDeleteSelectedProducts","setSelectedCarouselIndex","setVariableCallback","setShowVariablePicker","sliderRef","setCarouselBodyError","useTemplateModalContext","titleText","setTitleText","useState","isRCSChannel","channel","_b","_a","mapping","body","length","_d","_c","showProductPicker","setShowProductPicker","rearrangeProducts","setRearrangeProducts","shouldHideRightArrow","shouldHideLeftArrow","useEffect","handleVariableCallback","variable","name","productName","actualValue","_jsxs","style","display","flexDirection","gap","children","Object","assign","alignItems","undefined","_f","_e","_jsx","IconButton","Icon","BackIcon","onClick","TitleMedium","marginLeft","_g","rowGap","marginBottom","marginRight","ProductBox","editItem","cardBody","hideIcon","deleteItem","selectedTemplate","cloneDeep","forEach","image","index","components","cards","example","header_handle","Button","disabled","_h","alignSelf","buttonText","buttonType","TitleRegular","BodySecondary","marginTop","matchParentWidth","flex","width","border","COLORS","content","negative","size","LeadingIcon","height","PlusIcon","color","secondary","e","POD","CHATBOT","_Fragment","justifyContent","backgroundColor","BodyCaption","overflow","Badge","padding","errorText","background","surface","hovered","LeftIcon","svgStyle","current","slickPrev","prev","RightIcon","slickNext","EditWhatsAppTemplateV2","onTemplateChange","ProductPickerModal","zIndex","startupScreen","ScreenName","RearrangeProducts","Collections","rearrangeEnabled","storeId","selectedItems","selectedList","obj","item","collectionId","productId","variantId","products","isSmartCollection","variants","productImage","price","quantity","displayOrder","generatePickerData","collectionFetcher","fetchCollections","productFetcher","fetchProducts","onAdd","onItemsPicked","items","total","key","keys","productDescription","description","push","sortedSelectedList","sort","a","b","selectedImages","map","product","searchInCollectionFetcher","searchInCollection","searchFetcher","searchProducts","visible","onClose","exactLimit","appType","ApplicationType","BIK"],"mappings":"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"}
1	+ {"version":3,"file":"EditWhatsAppCarouselTemplateV2.js","sources":["../../../../../src/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.tsx"],"sourcesContent":["import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport BackIcon from '@src/assets/icons/arrow_back.svg';\nimport LeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport RightIcon from '@src/assets/icons/chevronRight.svg';\nimport PlusIcon from '@src/assets/icons/PlusIcon';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { useEffect, useState } from 'react';\nimport type {\n\tVariable,\n\tVariableListInterfaceV2,\n} from '@src/components/add-variableV2/AddVariableV2';\nimport { Button } from '@src/components/button/Button';\nimport { IconButton } from '@src/components/icon-button/IconButton';\nimport { ProductPickerModal } from '@src/components/product-picker-v2/modal';\nimport type { SelectedItems } from '@src/components/product-picker-v2/type';\nimport { ScreenName } from '@src/components/product-picker-v2/type';\nimport { Badge } from '@src/components/template-context-mapper/Badge';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport EditWhatsAppTemplateV2 from '@src/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2';\nimport { ProductBox } from '@src/components/template-context-mapper/modalElements/ProductBox';\nimport { isRCSChannel } 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 type { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport {\n\tPOD,\n\ttype WhatsAppPickerMeta,\n\ttype WhatsAppTemplate,\n} from '@src/components/template-preview/models/WhatsAppTemplate';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { CarouselProduct } from './modal';\n\nexport interface EditWhatsAppCarouselTemplateV2Props {\n\twhatsappSpecificPickerMeta?: WhatsAppPickerMeta;\n\ttemplate: WhatsAppCarouselTemplate;\n\tshowVariableModal?: boolean;\n\tvariableListForImage?: VariableListInterfaceV2[];\n\tdiscountCode?: string;\n\tsetDiscountCode?: (code: string) => void;\n}\n\nconst EditWhatsAppCarouselTemplateV2 = ({\n\ttemplate,\n\twhatsappSpecificPickerMeta,\n\tshowVariableModal,\n\tvariableListForImage,\n\tdiscountCode,\n\tsetDiscountCode,\n}: EditWhatsAppCarouselTemplateV2Props) => {\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tsetTemplate,\n\t\tpickerConf,\n\t\tisProductCarouselType,\n\t\tpod,\n\t\tcardCount,\n\t\tcarouselProducts,\n\t\tsetCarouselProducts,\n\t\tisError,\n\t\tcardImages,\n\t\tdisableEditVariable,\n\t\tonDeleteSelectedProducts,\n\t\tsetSelectedCarouselIndex,\n\t\tsetVariableCallback,\n\t\tsetShowVariablePicker,\n\t\tsliderRef,\n\t\tsetCarouselBodyError,\n\t} = useTemplateModalContext();\n\tconst [titleText, setTitleText] = useState<string>(\n\t\tisRCSChannel(template?.channel)\n\t\t\t? 'Carousel Cards'\n\t\t\t: selectedCarouselIndex == -1\n\t\t\t? 'First Message (Step 1/2)'\n\t\t\t: isProductCarouselType\n\t\t\t? `Product Carousel ${\n\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t }`\n\t\t\t: `Carousel Cards ${template?.mapping?.body?.length ? '(Step 2/2)' : ''}`,\n\t);\n\tconst [showProductPicker, setShowProductPicker] = useState<boolean>(false);\n\tconst [rearrangeProducts, setRearrangeProducts] = useState<boolean>(false);\n\n\tconst shouldHideRightArrow = selectedCarouselIndex === (cardCount ?? -1) - 1;\n\tconst shouldHideLeftArrow = (selectedCarouselIndex ?? -1) < 1;\n\n\tuseEffect(() => {\n\t\tsetTitleText(\n\t\t\tisRCSChannel(template?.channel)\n\t\t\t\t? 'Carousel Cards'\n\t\t\t\t: selectedCarouselIndex == -1\n\t\t\t\t? 'First Message (Step 1/2)'\n\t\t\t\t: isProductCarouselType\n\t\t\t\t? `Product Carousel ${\n\t\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t\t }`\n\t\t\t\t: `Carousel Cards ${\n\t\t\t\t\t\ttemplate?.mapping?.body?.length ? '(Step 2/2)' : ''\n\t\t\t\t }`,\n\t\t);\n\t}, [selectedCarouselIndex]);\n\n\tuseEffect(() => {\n\t\tsetShowVariablePicker(false);\n\t}, [selectedCarouselIndex]);\n\n\tconst onItemsPicked = (items: SelectedItems, total: number) => {\n\t\tsetRearrangeProducts(false);\n\t\tconst selectedList: any[] = [];\n\t\tdelete items['isCustom'];\n\t\tfor (const key of Object.keys(items)) {\n\t\t\tconst products = items[key].products;\n\t\t\tif (typeof products === 'undefined') continue;\n\t\t\tif (!Object.keys(products).length) continue;\n\t\t\tfor (const productId of Object.keys(products)) {\n\t\t\t\tconst variants = products[productId].variants;\n\t\t\t\tif (typeof variants === 'undefined') continue;\n\t\t\t\tif (!Object.keys(variants).length) continue;\n\t\t\t\tfor (const variantId of Object.keys(variants)) {\n\t\t\t\t\tconst { name, image, quantity, displayOrder } = variants[variantId];\n\t\t\t\t\tconst obj = {\n\t\t\t\t\t\tname,\n\t\t\t\t\t\timage: image ?? products[productId]?.image ?? '',\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tvariantId,\n\t\t\t\t\t\tproductId,\n\t\t\t\t\t\tdisplayOrder,\n\t\t\t\t\t\tcollectionId: key,\n\t\t\t\t\t\tproductName: products[productId]?.name ?? '',\n\t\t\t\t\t\tproductImage: products[productId]?.image ?? '',\n\t\t\t\t\t\tproductDescription: products[productId]?.description ?? '',\n\t\t\t\t\t};\n\t\t\t\t\tselectedList.push(obj);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst sortedSelectedList = selectedList.sort(\n\t\t\t(a: any, b: any) => a.displayOrder - b.displayOrder,\n\t\t);\n\t\tconst selectedImages = selectedList.map((product) => product.image);\n\n\t\tconst selectedTemplate = cloneDeep({ ...template });\n\t\tif (selectedTemplate) {\n\t\t\tselectedImages.forEach((image, index) => {\n\t\t\t\tif (image) {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [image];\n\t\t\t\t} else {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [cardImages?.[index] ?? ''];\n\t\t\t\t}\n\t\t\t});\n\t\t\tsetTemplate?.(selectedTemplate as WhatsAppCarouselTemplate);\n\t\t}\n\t\tsetCarouselProducts?.(sortedSelectedList);\n\t\tsetCarouselBodyError?.('');\n\t\tsetShowProductPicker(false);\n\t};\n\n\tconst generatePickerData = (selectedList: CarouselProduct[]) => {\n\t\tif (selectedList.length > 0) {\n\t\t\tconst obj = {};\n\t\t\tfor (const item of selectedList) {\n\t\t\t\tconst collectionId = item?.collectionId;\n\t\t\t\tconst productId = item.productId;\n\t\t\t\tconst variantId = item.variantId;\n\t\t\t\tif (!(collectionId in obj)) {\n\t\t\t\t\tobj[collectionId] = {\n\t\t\t\t\t\tproducts: {},\n\t\t\t\t\t\tname: '',\n\t\t\t\t\t\timage: '',\n\t\t\t\t\t\tisSmartCollection: false,\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tif (!(productId in obj[collectionId].products!)) {\n\t\t\t\t\tobj[collectionId].products![productId] = {\n\t\t\t\t\t\tvariants: {},\n\t\t\t\t\t\tname: item?.productName \|\| '',\n\t\t\t\t\t\timage: item?.productImage \|\| '',\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tobj[collectionId].products![productId].variants![variantId] = {\n\t\t\t\t\tname: item?.name \|\| '',\n\t\t\t\t\tprice: '',\n\t\t\t\t\timage: item?.image \|\| '',\n\t\t\t\t\tquantity: item.quantity \|\| 0,\n\t\t\t\t\tdisplayOrder: item.displayOrder,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn obj;\n\t\t}\n\t\treturn {};\n\t};\n\n\tconst deleteItem = () => {\n\t\tif (\n\t\t\tcarouselProducts?.length === 1 &&\n\t\t\tcarouselProducts[0].name === 'variable'\n\t\t) {\n\t\t\tsetCarouselProducts?.([]);\n\t\t\treturn;\n\t\t}\n\t\tconst selectedTemplate = cloneDeep({ ...template });\n\t\tif (selectedTemplate) {\n\t\t\tif (cardImages && cardImages.length > 0) {\n\t\t\t\tcardImages?.forEach((image, index) => {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [\n\t\t\t\t\t\tcardImages[index] ??\n\t\t\t\t\t\t\t'https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png',\n\t\t\t\t\t];\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tselectedTemplate?.components![1].cards?.forEach((image, index) => {\n\t\t\t\t\tselectedTemplate.components![1].cards![\n\t\t\t\t\t\tindex\n\t\t\t\t\t].components[0].example!.header_handle = [\n\t\t\t\t\t\t'https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png',\n\t\t\t\t\t];\n\t\t\t\t});\n\t\t\t}\n\t\t\tsetTemplate?.(selectedTemplate as WhatsAppCarouselTemplate);\n\t\t}\n\t\tsetCarouselProducts?.([]);\n\t\tsetCarouselBodyError?.('');\n\t\tonDeleteSelectedProducts?.();\n\t};\n\n\tconst handleVariableCallback = (variable: Variable) => {\n\t\tsetCarouselProducts?.([\n\t\t\t{\n\t\t\t\tname: 'variable',\n\t\t\t\tproductName: variable.actualValue,\n\t\t\t} as any,\n\t\t]);\n\t};\n\n\tuseEffect(() => {\n\t\tif (selectedCarouselIndex === -1 && isRCSChannel(template?.channel)) {\n\t\t\tsetSelectedCarouselIndex?.(0);\n\t\t}\n\t}, [selectedCarouselIndex, template?.channel]);\n\n\treturn (\n\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\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{!isRCSChannel(template?.channel) &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex >= 0 &&\n\t\t\t\t\t!!template?.mapping?.body?.length && (\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetSelectedCarouselIndex?.(-1);\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<TitleMedium style={{ marginLeft: 10 }}>{titleText}</TitleMedium>\n\t\t\t</div>\n\t\t\t{isProductCarouselType &&\n\t\t\t\t(carouselProducts?.length ?? 0) > 0 &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\trowGap: 8,\n\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t\tmarginLeft: 10,\n\t\t\t\t\t\t\tmarginRight: 10,\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ProductBox\n\t\t\t\t\t\t\teditItem={() => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetShowProductPicker(!showProductPicker);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcardBody={\n\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t\t\t? `${carouselProducts[0].productName}`\n\t\t\t\t\t\t\t\t\t: `${carouselProducts?.length} Products Selected`\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thideIcon={\n\t\t\t\t\t\t\t\tcarouselProducts?.length === 1 &&\n\t\t\t\t\t\t\t\tcarouselProducts[0].name === 'variable'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdeleteItem={deleteItem}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{carouselProducts &&\n\t\t\t\t\t\t\tcarouselProducts?.length > 0 &&\n\t\t\t\t\t\t\tcarouselProducts[0].name != 'variable' && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={(carouselProducts?.length ?? 0) <= 1}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-end',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetRearrangeProducts(true);\n\t\t\t\t\t\t\t\t\t\tsetShowProductPicker(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tbuttonText=\"Rearrange Products\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"tertiary\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t{!disableEditVariable &&\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tcarouselProducts?.length === 0 &&\n\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\tselectedCarouselIndex >= 0 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div style={{ marginLeft: 12 }}>\n\t\t\t\t\t\t\t<TitleRegular>Product(s)</TitleRegular>\n\t\t\t\t\t\t\t<BodySecondary>{`Select ${\n\t\t\t\t\t\t\t\tcardCount ?? 1\n\t\t\t\t\t\t\t} products`}</BodySecondary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 16,\n\t\t\t\t\t\t\t\tmarginBottom: 16,\n\t\t\t\t\t\t\t\tmarginLeft: isError ? 16 : 12,\n\t\t\t\t\t\t\t\tmarginRight: isError ? 16 : 12,\n\t\t\t\t\t\t\t\tflexDirection: 'column',\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}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\tmarginBottom: 12,\n\t\t\t\t\t\t\t\t\tborder: isError\n\t\t\t\t\t\t\t\t\t\t? `2px dashed ${COLORS.content.negative}`\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\tbuttonText={'Add Product(s)'}\n\t\t\t\t\t\t\t\tbuttonType={isError ? 'tertiaryGray' : 'dashBold'}\n\t\t\t\t\t\t\t\tLeadingIcon={() => (\n\t\t\t\t\t\t\t\t\t<div style={{ display: 'flex', width: 18, height: 18 }}>\n\t\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tsetShowProductPicker(true);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{pod === POD.CHATBOT && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\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\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#E0E0E0',\n\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: 8,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: 1,\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\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#616161', overflow: 'unset' }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tOR\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#E0E0E0',\n\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: 1,\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</div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 12,\n\t\t\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\t\t\tborder: isError\n\t\t\t\t\t\t\t\t\t\t\t\t? `2px dashed ${COLORS.content.negative}`\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\tbuttonText={'Add Product(s) Variable'}\n\t\t\t\t\t\t\t\t\t\tbuttonType={isError ? 'tertiaryGray' : 'dashBold'}\n\t\t\t\t\t\t\t\t\t\tLeadingIcon={() => (\n\t\t\t\t\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\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</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tsetVariableCallback(() => handleVariableCallback);\n\t\t\t\t\t\t\t\t\t\t\tsetShowVariablePicker(true);\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)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{isError && (\n\t\t\t\t\t\t\t<div style={{ marginLeft: 10, marginBottom: 16 }}>\n\t\t\t\t\t\t\t\t<Badge padding={'8px'} errorText={'Please add products'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t{!isProductCarouselType && (selectedCarouselIndex ?? -1) > -1 && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tbackground: COLORS.surface.hovered,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={LeftIcon}\n\t\t\t\t\t\tdisabled={shouldHideLeftArrow}\n\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\theight={14}\n\t\t\t\t\t\tsvgStyle={\n\t\t\t\t\t\t\t!shouldHideLeftArrow ? { color: COLORS.content.secondary } : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t\t\tsliderRef?.current?.slickPrev();\n\t\t\t\t\t\t\tif ((selectedCarouselIndex ?? -1) < 1) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetSelectedCarouselIndex?.((prev) => prev - 1);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tstyle={{ flex: 1, display: 'flex', justifyContent: 'center' }}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>{`Card ${\n\t\t\t\t\t\t(selectedCarouselIndex ?? 0) + 1\n\t\t\t\t\t}/${cardCount}`}</TitleRegular>\n\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={RightIcon}\n\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\theight={14}\n\t\t\t\t\t\tdisabled={shouldHideRightArrow}\n\t\t\t\t\t\tsvgStyle={\n\t\t\t\t\t\t\t!shouldHideRightArrow ? { color: COLORS.content.secondary } : {}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t\t\tsliderRef?.current?.slickNext();\n\t\t\t\t\t\t\tif ((selectedCarouselIndex ?? -1) >= (cardCount ?? -1) - 1) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetSelectedCarouselIndex?.((prev) => prev + 1);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<EditWhatsAppTemplateV2\n\t\t\t\twhatsappSpecificPickerMeta={whatsappSpecificPickerMeta}\n\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\tonTemplateChange={(\n\t\t\t\t\ttemplate:\n\t\t\t\t\t\t\| WhatsAppTemplate\n\t\t\t\t\t\t\| EmailTemplateType\n\t\t\t\t\t\t\| SMSTemplateType\n\t\t\t\t\t\t\| WhatsAppCarouselTemplate,\n\t\t\t\t) => {\n\t\t\t\t\tsetTemplate?.(template);\n\t\t\t\t}}\n\t\t\t\tshowVariableModal={showVariableModal}\n\t\t\t\tvariableListForImage={variableListForImage}\n\t\t\t\tdiscountCode={discountCode}\n\t\t\t\tsetDiscountCode={setDiscountCode}\n\t\t\t/>\n\t\t\t{showProductPicker && pickerConf && (\n\t\t\t\t<ProductPickerModal\n\t\t\t\t\tzIndex={200}\n\t\t\t\t\tstartupScreen={\n\t\t\t\t\t\trearrangeProducts\n\t\t\t\t\t\t\t? ScreenName.RearrangeProducts\n\t\t\t\t\t\t\t: ScreenName.Collections\n\t\t\t\t\t}\n\t\t\t\t\trearrangeEnabled={true}\n\t\t\t\t\tstoreId={pickerConf.storeId}\n\t\t\t\t\tselectedItems={generatePickerData(carouselProducts ?? [])}\n\t\t\t\t\tcollectionFetcher={pickerConf.fetchCollections}\n\t\t\t\t\tproductFetcher={pickerConf.fetchProducts}\n\t\t\t\t\tonAdd={onItemsPicked}\n\t\t\t\t\tsearchInCollectionFetcher={pickerConf.searchInCollection}\n\t\t\t\t\tsearchFetcher={pickerConf.searchProducts}\n\t\t\t\t\tvisible={showProductPicker}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowProductPicker(false);\n\t\t\t\t\t}}\n\t\t\t\t\texactLimit={cardCount ?? 1}\n\t\t\t\t\tappType={pickerConf.appType \|\| ApplicationType.BIK}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default EditWhatsAppCarouselTemplateV2;\n"],"names":["EditWhatsAppCarouselTemplateV2","_ref","template","whatsappSpecificPickerMeta","showVariableModal","variableListForImage","discountCode","setDiscountCode","selectedCarouselIndex","setTemplate","pickerConf","isProductCarouselType","pod","cardCount","carouselProducts","setCarouselProducts","isError","cardImages","disableEditVariable","onDeleteSelectedProducts","setSelectedCarouselIndex","setVariableCallback","setShowVariablePicker","sliderRef","setCarouselBodyError","useTemplateModalContext","titleText","setTitleText","useState","isRCSChannel","channel","_b","_a","mapping","body","length","_d","_c","showProductPicker","setShowProductPicker","rearrangeProducts","setRearrangeProducts","shouldHideRightArrow","shouldHideLeftArrow","useEffect","handleVariableCallback","variable","name","productName","actualValue","_jsxs","style","display","flexDirection","gap","children","Object","assign","alignItems","undefined","_f","_e","_jsx","IconButton","Icon","BackIcon","onClick","TitleMedium","marginLeft","_g","rowGap","marginBottom","marginRight","ProductBox","editItem","cardBody","hideIcon","deleteItem","selectedTemplate","cloneDeep","forEach","image","index","components","cards","example","header_handle","Button","disabled","_h","alignSelf","buttonText","buttonType","TitleRegular","BodySecondary","marginTop","matchParentWidth","flex","width","border","COLORS","content","negative","size","LeadingIcon","height","PlusIcon","color","secondary","e","POD","CHATBOT","_Fragment","justifyContent","backgroundColor","BodyCaption","overflow","Badge","padding","errorText","background","surface","hovered","LeftIcon","svgStyle","current","slickPrev","prev","RightIcon","slickNext","EditWhatsAppTemplateV2","onTemplateChange","ProductPickerModal","zIndex","startupScreen","ScreenName","RearrangeProducts","Collections","rearrangeEnabled","storeId","selectedItems","selectedList","obj","item","collectionId","productId","variantId","products","isSmartCollection","variants","productImage","price","quantity","displayOrder","generatePickerData","collectionFetcher","fetchCollections","productFetcher","fetchProducts","onAdd","onItemsPicked","items","total","key","keys","productDescription","description","push","sortedSelectedList","sort","a","b","selectedImages","map","product","searchInCollectionFetcher","searchInCollection","searchFetcher","searchProducts","visible","onClose","exactLimit","appType","ApplicationType","BIK"],"mappings":"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"}

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import i from"lodash/cloneDeep";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as O}from"../utils/validateName.js";import{BackTrackComponent as T}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=({template:d,onTemplateChange:R,whatsappSpecificPickerMeta:P,showVariableModal:D,variableListForImage:H,setDiscountCode:N,fileName:A,setFileName:_})=>{var F,q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Oe,Te,xe,ye,Ve;const Ee=d.isCarouselType,{originalVariableList:Be,pod:Me,extras:ke,selectedCarouselIndex:Ie,isProductCarouselType:we,disableCopyCode:Le,isError:Re,cardIndex:Ue}=b(),{descriptionComponents:Pe,urlBtns:De,qrbBtns:He,imageComponent:Ne,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}=f(d),qe=l(null),[Qe,Se]=a(!1),[Ye,Ke]=a(-1===Ie?{descriptionComponents:Pe,urlBtns:De,qrbBtns:He,imageComponent:Ne,bodyVariables:Ae,headerVariables:_e,titleVariables:Fe}:{}),{uploadMediaLink:We,uploadMediaFiles:$e,validateMimeType:Ge}=P,Xe=B({uploadMediaLink:We,uploadMediaFiles:$e,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,r,p,u;let c;c=null!=Ie&&Ie>-1?{components:null===(t=null===(n=d.components[Ue])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie].components,mapping:null===(a=null===(l=null==d?void 0:d.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Ie]}:Object.assign({},d);const v=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==v&&v>-1&&(null==c?void 0:c.components[v])){const n=Object.assign(Object.assign({},c.components[v]),{format:o,example:{header_handle:[e]}}),t=[...c.components];t[v]=n,c=Object.assign(Object.assign({},c),{components:t})}c.mapping&&(c.mapping=Object.assign(Object.assign({},c.mapping),{header:void 0}));if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=c.components,(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards)&&(null===(p=null==e?void 0:e.mapping)||void 0===p?void 0:p.cards.length)>0&&(e.mapping.cards[Ie]=null!==(u=c.mapping)&&void 0!==u?u:{}),null==R||R(Object.assign({},e)),Je(!0)}else null==R||R(Object.assign({},c))},validateMimeType:Ge,mediaComponent:Ee?Ye.imageComponent:Ne,fileRef:qe}),[ze,Je]=a(!1),[Ze,eo]=a(A),[oo,no]=a();function to(e,o,n){var t,l,a,s,r,p,u,v,m,b;const g=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d),h=i(g),f="custom"===o&&"string"==typeof e,j=f?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map((e=>{var o;return c(e.type)?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[j]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),t=null===(s=null===(a=Object.assign({},d).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map(((o,t)=>t===n?f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o))})})),l=i(d);return l.components=o,l.mapping.cards=t,void(null==R||R(Object.assign({},l)))}const C=null==h?void 0:h.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==C&&C>-1){const t=null===(r=null==h?void 0:h.components[C].buttons)||void 0===r?void 0:r.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(v=null===(u=null===(p=h.components)||void 0===p?void 0:p[C])||void 0===u?void 0:u.buttons)&&void 0!==v?v:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},h.components[C]),{buttons:s}),r=null===(m=h.mapping)||void 0===m?void 0:m.buttons;r&&r.length>0&&(r[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const c=Object.assign(Object.assign({},h.mapping),{buttons:r});h.mapping=c;const b=[...h.components];b[C]=d,h.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(b=e.placeHolder)||void 0===b?void 0:b.slice(2,-2))?Se(!0):(Se(!1),null==N||N(""))}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=h.components,e.mapping.cards[Ie]=h.mapping,null==R||R(Object.assign({},e))}else null==R||R(h)}function io(e,o,n){var t,l,a,s,r,p,u;const v=null!=Ie&&Ie>-1?{components:null===(t=Object.assign({},d).components[Ue].cards)||void 0===t?void 0:t[Ie].components,mapping:null===(l=Object.assign({},d).mapping.cards)||void 0===l?void 0:l[Ie]}:Object.assign({},d);if(null!=Ie&&Ie>-1&&we){const o=Object.assign({},d).components.map((o=>{var t;return c(o.type)?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==o?void 0:o.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),t=i(d);return t.components=o,void(null==R||R(Object.assign({},t)))}const m=null==v?void 0:v.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==m&&m>-1){const o=null===(s=null===(a=null==v?void 0:v.components[m])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(u=null===(p=null===(r=v.components)||void 0===r?void 0:r[m])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},v.components[m]),{buttons:i}),a=[...v.components];a[m]=l,v.components=a}}if(null!=Ie&&Ie>-1){const e=i(d);e.components[Ue].cards[Ie].components=v.components,null==R||R(Object.assign({},e))}else null==R||R(v)}s((()=>{var e,o;if(null===(e=d.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Se(!0);else{Se(!1);const e=null===(o=null==ke?void 0:ke.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[d]),s((()=>{var e,o,n,t;if(null!=Ie&&Ie>-1){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c})}else if(null!=Ie&&-1===Ie){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(d);Ke({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}}),[Ie]),s((()=>{var e,o,n,t;if(null!=Ie&&Ie>-1&&ze){const i={components:null===(o=null===(e=d.components[Ue])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[Ie].components,mapping:null===(t=null===(n=null==d?void 0:d.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[Ie]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}=f(i);Ke({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:r,bodyVariables:p,headerVariables:u,titleVariables:c}),Je(!1)}}),[ze]);s((()=>{Re&&Me===m.CHATBOT&&(()=>{if(!A)return void no("PDF name is Required");const e=O(A);null==_||_(null!=A?A:""),no(e?"Please enter a valid PDF name":void 0)})()}),[Re]);const lo=Ee?Ye.imageComponent:Ne;return Xe.openEditMedia?e(k,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(y,{mediaComponentFormat:null!==(F=lo.format)&&void 0!==F?F:v.IMAGE,uploadMedia:Xe.uploadMedia,variableListForImage:H||[],useEditWhatsappTemplateMediaResponse:Xe,setOpenEditMedia:Xe.setOpenEditMedia,openEditMedia:Xe.openEditMedia,editIconRef:Xe.editIconRef,fileRef:qe})})):o(k,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:we?"420px":"auto"}},{children:[!!Ye.imageComponent&&!we&&!u(null==d?void 0:d.channel)&&o(E,{children:[e(V,{imageName:null!==(Q=null===(q=null==lo?void 0:lo.example)||void 0===q?void 0:q.header_handle)&&void 0!==Q?Q:[],handleImageChange:Xe.handleImageChange,mediaType:null==lo?void 0:lo.format,error:Xe.error,isLoading:Xe.loading,setOpenEditMedia:Xe.setOpenEditMedia,selectedVariable:j(null!==(K=null===(Y=null===(S=null==lo?void 0:lo.example)||void 0===S?void 0:S.header_handle)||void 0===Y?void 0:Y[0])&&void 0!==K?K:"")?null===($=null===(W=null==lo?void 0:lo.example)||void 0===W?void 0:W.header_handle)||void 0===$?void 0:$[0]:(null===(X=null===(G=null==d?void 0:d.mapping)||void 0===G?void 0:G.header)||void 0===X?void 0:X[0])?null===(J=null===(z=null==d?void 0:d.mapping)||void 0===z?void 0:z.header)||void 0===J?void 0:J[0]:Xe.selectedVariable}),(null==Ne?void 0:Ne.format)==v.DOCUMENT?e(U,{children:Me===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:oo||void 0,onChange:e=>{var o;no(""),null==_||_(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=A?A:"",variableType:"string"},variablesList:H,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:Ze,errorMessage:oo||void 0,onBlur:()=>{if(!Ze)return null==_||_(""),void no("PDF name is Required");const e=C(Ze);null==_||_(Ze),no(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{no(""),eo(e)}})}):e(n,{})]}),(null===(Z=Ye.bodyVariables)||void 0===Z?void 0:Z.length)>0&&e(w,{containerStyle:{paddingTop:Ye.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(ee=Ye.descriptionComponents)||void 0===ee?void 0:ee.map(((o,n)=>e(I,{originalVariableList:null!=Ie&&Ie>-1?Be.cards[Ie]:Be,type:o.type,descriptionComponent:o.component,showVariableModal:D},n))),(null===(te=null===(ne=null!=Ie&&Ie>-1?null===(oe=Be.cards[Ie])||void 0===oe?void 0:oe.buttons:null==Be?void 0:Be.buttons)||void 0===ne?void 0:ne.filter((e=>"URL"===e.type)))||void 0===te?void 0:te.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(ae=null===(le=null!=Ie&&Ie>-1?null===(ie=Be.cards[Ie])||void 0===ie?void 0:ie.buttons:null==Be?void 0:Be.buttons)||void 0===le?void 0:le.filter((e=>Me===m.CHATBOT||"URL"===e.type)))||void 0===ae?void 0:ae.map(((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==P?void 0:P.CTAoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedURLTemplateBtn:to},`${n}_${Ie}`)})),Me===m.CHATBOT&&(null===(de=null===(se=He[0])||void 0===se?void 0:se.component)||void 0===de?void 0:de.buttons)&&(null===(ue=null===(pe=null===(re=He[0])||void 0===re?void 0:re.component)||void 0===pe?void 0:pe.buttons)||void 0===ue?void 0:ue.length)>0&&e(T,{backTrackMessage:null===(ce=null==ke?void 0:ke.backTrackExtra)||void 0===ce?void 0:ce[0],setBackTrackMessage:null===(ve=null==ke?void 0:ke.backTrackExtra)||void 0===ve?void 0:ve[1]}),!u(null==d?void 0:d.channel)&&(null===(ge=null===(be=null!=Ie&&Ie>-1?null===(me=Be.cards[Ie])||void 0===me?void 0:me.buttons:null==Be?void 0:Be.buttons)||void 0===be?void 0:be.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ge?void 0:ge.length)>0&&(Me!==m.CHATBOT?e(w,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(T,{backTrackMessage:null===(he=null==ke?void 0:ke.backTrackExtra)||void 0===he?void 0:he[0],setBackTrackMessage:null===(fe=null==ke?void 0:ke.backTrackExtra)||void 0===fe?void 0:fe[1]})),!u(null==d?void 0:d.channel)&&(null===(Oe=null===(Ce=null!=Ie&&Ie>-1?null===(je=Be.cards[Ie])||void 0===je?void 0:je.buttons:null==Be?void 0:Be.buttons)||void 0===Ce?void 0:Ce.filter((e=>"QUICK_REPLY"===e.type)))||void 0===Oe?void 0:Oe.map(((o,n)=>{if("QUICK_REPLY"===o.type&&Me!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==P?void 0:P.QRBoptions,button:o,currentVariableList:null!=Ie&&Ie>-1?Object.assign({},Be.cards[Ie]):Object.assign({},Be),updateSelectedQRBTemplateBtn:io},`${n}_${Ie}`)}))),Me===m.CHATBOT&&Qe&&e(x,{discountCode:null===(Te=null==ke?void 0:ke.discountCodeExtra)||void 0===Te?void 0:Te[0],setDiscountCode:null===(xe=null==ke?void 0:ke.discountCodeExtra)||void 0===xe?void 0:xe[1]}),null===(Ve=null!=Ie&&Ie>-1?null===(ye=Be.cards[Ie])||void 0===ye?void 0:ye.buttons:null==Be?void 0:Be.buttons)||void 0===Ve?void 0:Ve.map(((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Le?e("div",Object.assign({style:{marginBottom:20,borderRadius:4,padding:"8px 10px"}},{children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})})):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})}))]}))},U=d.div`
+import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import"../../curtain/CurtainHelper.js";import{PickerType as t}from"../../variable-picker-v3/model.js";import i from"lodash/cloneDeep";import{useRef as l,useState as a,useEffect as s}from"react";import d from"styled-components";import{Input as r}from"../../input/Input.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{isRCSChannel as u,isCarouselComponent as c}from"../../template-preview/helpers/templateMiscHelper.js";import{HEADER_TYPES as v}from"../../template-preview/models/TemplateMeta.js";import{POD as m}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{STATIC_URL_VARIABLE_NAME as g,UNSUBSCRIBE_URL_VARIABLE as h}from"../utils/constants.js";import{getAllDataFromTemplateComponent as f}from"../utils/getDataFromTemplateComponent.js";import{isVariable as j}from"../utils/validateIsUrl.js";import{validateInputName as C,validateInputNameChatbot as O}from"../utils/validateName.js";import{BackTrackComponent as T}from"./BackTrackComponent.js";import{DiscountCodeComponent as x}from"./DiscountCodeComponent.js";import y from"./EditMediaModal.js";import V from"./EditMediaV2.js";import{EditTemplateMediaContainer as E}from"./EditMediaV2.style.js";import{useEditWhatsappTemplateMedia as B}from"./useEditWhtasappTemplateMedia.js";import M from"./VariableConnector.js";import{Container as k}from"./VariableConnectorsPanel.js";import I from"./VariableConnectorWhatsApp.js";import w from"./VariableEditorHeader.js";import L from"./WhatsAppTemplateCardButtonV2.js";const R=d=>{let{template:R,onTemplateChange:P,whatsappSpecificPickerMeta:D,showVariableModal:H,variableListForImage:N,setDiscountCode:A,fileName:_,setFileName:F}=d;var q,Q,S,Y,K,W,$,G,X,z,J,Z,ee,oe,ne,te,ie,le,ae,se,de,re,pe,ue,ce,ve,me,be,ge,he,fe,je,Ce,Oe,Te,xe,ye,Ve,Ee;const Be=R.isCarouselType,{originalVariableList:Me,pod:ke,extras:Ie,selectedCarouselIndex:we,isProductCarouselType:Le,disableCopyCode:Re,isError:Ue,cardIndex:Pe}=b(),{descriptionComponents:De,urlBtns:He,qrbBtns:Ne,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}=f(R),Qe=l(null),[Se,Ye]=a(!1),[Ke,We]=a(-1===we?{descriptionComponents:De,urlBtns:He,qrbBtns:Ne,imageComponent:Ae,bodyVariables:_e,headerVariables:Fe,titleVariables:qe}:{}),{uploadMediaLink:$e,uploadMediaFiles:Ge,validateMimeType:Xe}=D,ze=B({uploadMediaLink:$e,uploadMediaFiles:Ge,updateTemplateImageUrl:function(e,o){var n,t,l,a,s,d,r,p;let u;u=null!=we&&we>-1?{components:null===(t=null===(n=R.components[Pe])||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we].components,mapping:null===(a=null===(l=null==R?void 0:R.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[we]}:Object.assign({},R);const c=null===(s=null==u?void 0:u.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==u?void 0:u.components[c])){const n=Object.assign(Object.assign({},u.components[c]),{format:o,example:{header_handle:[e]}}),t=[...u.components];t[c]=n,u=Object.assign(Object.assign({},u),{components:t})}u.mapping&&(u.mapping=Object.assign(Object.assign({},u.mapping),{header:void 0}));if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=u.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[we]=null!==(p=u.mapping)&&void 0!==p?p:{}),null==P||P(Object.assign({},e)),Ze(!0)}else null==P||P(Object.assign({},u))},validateMimeType:Xe,mediaComponent:Be?Ke.imageComponent:Ae,fileRef:Qe}),[Je,Ze]=a(!1),[eo,oo]=a(_),[no,to]=a();function io(e,o,n){var t,l,a,s,d,r,p,u,v,m;const b=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R),g=i(b),h="custom"===o&&"string"==typeof e,f=h?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((e=>{var o;return c(e.type)?Object.assign(Object.assign({},e),{cards:null===(o=e.cards)||void 0===o?void 0:o.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var o,t,i;if("BUTTONS"===e.type){const l=null===(o=e.buttons)||void 0===o?void 0:o.filter((e=>"URL"===e.type));let a=null!==(t=null==l?void 0:l[n])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),t=null===(s=null===(a=Object.assign({},R).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map(((o,t)=>t===n?h?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"":o))})})),l=i(R);return l.components=o,l.mapping.cards=t,void(null==P||P(Object.assign({},l)))}const j=null==g?void 0:g.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const t=null===(d=null==g?void 0:g.components[j].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof e,l=i?e:"string"!=typeof e&&e.defaultValue?e.defaultValue:"https://d.bik.ai/";let a=t[n];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(u=null===(p=null===(r=g.components)||void 0===r?void 0:r[j])||void 0===p?void 0:p.buttons)&&void 0!==u?u:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},g.components[j]),{buttons:s}),c=null===(v=g.mapping)||void 0===v?void 0:v.buttons;c&&c.length>0&&(c[n]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},g.mapping),{buttons:c});g.mapping=m;const b=[...g.components];b[j]=d,g.components=b}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?Ye(!0):(Ye(!1),null==A||A(""))}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=g.components,e.mapping.cards[we]=g.mapping,null==P||P(Object.assign({},e))}else null==P||P(g)}function lo(e,o,n){var t,l,a,s,d,r,p;const u=null!=we&&we>-1?{components:null===(t=Object.assign({},R).components[Pe].cards)||void 0===t?void 0:t[we].components,mapping:null===(l=Object.assign({},R).mapping.cards)||void 0===l?void 0:l[we]}:Object.assign({},R);if(null!=we&&we>-1&&Le){const o=Object.assign({},R).components.map((o=>{var t;return c(o.type)?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const a=null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[n])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==o?void 0:o.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),t=i(R);return t.components=o,void(null==P||P(Object.assign({},t)))}const v=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==v&&v>-1){const o=null===(s=null===(a=null==u?void 0:u.components[v])||void 0===a?void 0:a.buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(o){let t=o[n];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(p=null===(r=null===(d=u.components)||void 0===d?void 0:d[v])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[v]),{buttons:i}),a=[...u.components];a[v]=l,u.components=a}}if(null!=we&&we>-1){const e=i(R);e.components[Pe].cards[we].components=u.components,null==P||P(Object.assign({},e))}else null==P||P(u)}s((()=>{var e,o;if(null===(e=R.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Ye(!0);else{Ye(!1);const e=null===(o=null==Ie?void 0:Ie.discountCodeExtra)||void 0===o?void 0:o[1];null==e||e("")}}),[R]),s((()=>{var e,o,n,t;if(null!=we&&we>-1){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u})}else if(null!=we&&-1===we){const{descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a}=f(R);We({descriptionComponents:e,urlBtns:o,qrbBtns:n,imageComponent:t,bodyVariables:i,headerVariables:l,titleVariables:a})}}),[we]),s((()=>{var e,o,n,t;if(null!=we&&we>-1&&Je){const i={components:null===(o=null===(e=R.components[Pe])||void 0===e?void 0:e.cards)||void 0===o?void 0:o[we].components,mapping:null===(t=null===(n=null==R?void 0:R.mapping)||void 0===n?void 0:n.cards)||void 0===t?void 0:t[we]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}=f(i);We({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p,titleVariables:u}),Ze(!1)}}),[Je]);s((()=>{Ue&&ke===m.CHATBOT&&(()=>{if(!_)return void to("PDF name is Required");const e=O(_);null==F||F(null!=_?_:""),to(e?"Please enter a valid PDF name":void 0)})()}),[Ue]);const ao=Be?Ke.imageComponent:Ae;return ze.openEditMedia?e(k,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e(y,{mediaComponentFormat:null!==(q=ao.format)&&void 0!==q?q:v.IMAGE,uploadMedia:ze.uploadMedia,variableListForImage:N||[],useEditWhatsappTemplateMediaResponse:ze,setOpenEditMedia:ze.setOpenEditMedia,openEditMedia:ze.openEditMedia,editIconRef:ze.editIconRef,fileRef:Qe})})):o(k,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:Le?"420px":"auto"}},{children:[!!Ke.imageComponent&&!Le&&!u(null==R?void 0:R.channel)&&o(E,{children:[e(V,{imageName:null!==(S=null===(Q=null==ao?void 0:ao.example)||void 0===Q?void 0:Q.header_handle)&&void 0!==S?S:[],handleImageChange:ze.handleImageChange,mediaType:null==ao?void 0:ao.format,error:ze.error,isLoading:ze.loading,setOpenEditMedia:ze.setOpenEditMedia,selectedVariable:j(null!==(W=null===(K=null===(Y=null==ao?void 0:ao.example)||void 0===Y?void 0:Y.header_handle)||void 0===K?void 0:K[0])&&void 0!==W?W:"")?null===(G=null===($=null==ao?void 0:ao.example)||void 0===$?void 0:$.header_handle)||void 0===G?void 0:G[0]:(null===(z=null===(X=null==R?void 0:R.mapping)||void 0===X?void 0:X.header)||void 0===z?void 0:z[0])?null===(Z=null===(J=null==R?void 0:R.mapping)||void 0===J?void 0:J.header)||void 0===Z?void 0:Z[0]:ze.selectedVariable}),(null==Ae?void 0:Ae.format)==v.DOCUMENT?e(U,{children:ke===m.CHATBOT?e(p,{labelText:"PDF Name",placeHolder:"Enter the name",errorMessage:no||void 0,onChange:e=>{var o;to(""),null==F||F(null!==(o=null==e?void 0:e.actualValue)&&void 0!==o?o:"")},pickerType:t.EMBEDDED,noMaxCharCheck:!0,allowMix:!0,showVarHeader:!0,varHeaderText:"Select variable",prevVariable:{actualValue:null!=_?_:"",variableType:"string"},variablesList:N,showAddButton:!0}):e(r,{labelText:"PDF Name",placeholder:"Enter the name",value:eo,errorMessage:no||void 0,onBlur:()=>{if(!eo)return null==F||F(""),void to("PDF name is Required");const e=C(eo);null==F||F(eo),to(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{to(""),oo(e)}})}):e(n,{})]}),(null===(ee=Ke.bodyVariables)||void 0===ee?void 0:ee.length)>0&&e(w,{containerStyle:{paddingTop:Ke.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(oe=Ke.descriptionComponents)||void 0===oe?void 0:oe.map(((o,n)=>e(I,{originalVariableList:null!=we&&we>-1?Me.cards[we]:Me,type:o.type,descriptionComponent:o.component,showVariableModal:H},n))),(null===(ie=null===(te=null!=we&&we>-1?null===(ne=Me.cards[we])||void 0===ne?void 0:ne.buttons:null==Me?void 0:Me.buttons)||void 0===te?void 0:te.filter((e=>"URL"===e.type)))||void 0===ie?void 0:ie.length)>0&&e(w,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(se=null===(ae=null!=we&&we>-1?null===(le=Me.cards[we])||void 0===le?void 0:le.buttons:null==Me?void 0:Me.buttons)||void 0===ae?void 0:ae.filter((e=>ke===m.CHATBOT||"URL"===e.type)))||void 0===se?void 0:se.map(((o,n)=>{const t=o.buttonVariable===g,i=o.buttonVariable===h;if("URL"===o.type)return e(L,{variableListIndex:n,disableEdit:t||i,CTAoptions:null==D?void 0:D.CTAoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedURLTemplateBtn:io},`${n}_${we}`)})),ke===m.CHATBOT&&(null===(re=null===(de=Ne[0])||void 0===de?void 0:de.component)||void 0===re?void 0:re.buttons)&&(null===(ce=null===(ue=null===(pe=Ne[0])||void 0===pe?void 0:pe.component)||void 0===ue?void 0:ue.buttons)||void 0===ce?void 0:ce.length)>0&&e(T,{backTrackMessage:null===(ve=null==Ie?void 0:Ie.backTrackExtra)||void 0===ve?void 0:ve[0],setBackTrackMessage:null===(me=null==Ie?void 0:Ie.backTrackExtra)||void 0===me?void 0:me[1]}),!u(null==R?void 0:R.channel)&&(null===(he=null===(ge=null!=we&&we>-1?null===(be=Me.cards[we])||void 0===be?void 0:be.buttons:null==Me?void 0:Me.buttons)||void 0===ge?void 0:ge.filter((e=>"QUICK_REPLY"===e.type)))||void 0===he?void 0:he.length)>0&&(ke!==m.CHATBOT?e(w,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e(T,{backTrackMessage:null===(fe=null==Ie?void 0:Ie.backTrackExtra)||void 0===fe?void 0:fe[0],setBackTrackMessage:null===(je=null==Ie?void 0:Ie.backTrackExtra)||void 0===je?void 0:je[1]})),!u(null==R?void 0:R.channel)&&(null===(Te=null===(Oe=null!=we&&we>-1?null===(Ce=Me.cards[we])||void 0===Ce?void 0:Ce.buttons:null==Me?void 0:Me.buttons)||void 0===Oe?void 0:Oe.filter((e=>"QUICK_REPLY"===e.type)))||void 0===Te?void 0:Te.map(((o,n)=>{if("QUICK_REPLY"===o.type&&ke!==m.CHATBOT)return e(L,{variableListIndex:n,QRBoptions:null==D?void 0:D.QRBoptions,button:o,currentVariableList:null!=we&&we>-1?Object.assign({},Me.cards[we]):Object.assign({},Me),updateSelectedQRBTemplateBtn:lo},`${n}_${we}`)}))),ke===m.CHATBOT&&Se&&e(x,{discountCode:null===(xe=null==Ie?void 0:Ie.discountCodeExtra)||void 0===xe?void 0:xe[0],setDiscountCode:null===(ye=null==Ie?void 0:Ie.discountCodeExtra)||void 0===ye?void 0:ye[1]}),null===(Ee=null!=we&&we>-1?null===(Ve=Me.cards[we])||void 0===Ve?void 0:Ve.buttons:null==Me?void 0:Me.buttons)||void 0===Ee?void 0:Ee.map(((o,t)=>{var i,l,a,s,d;if("COPY_CODE"===o.type)return e(n,{children:Re?e("div",Object.assign({style:{marginBottom:20,borderRadius:4,padding:"8px 10px"}},{children:e(r,{state:"disabled",labelText:null!==(i=o.text)&&void 0!==i?i:"Copy Code",value:null!==(l=o.buttonVariable)&&void 0!==l?l:"",onChangeText:()=>{}})})):e(M,{index:t,variable:{variableName:null!==(a=o.text)&&void 0!==a?a:"Copy Code",updatedValue:null!==(s=o.buttonVariable)&&void 0!==s?s:"",type:"string",isEditableVariable:!0,index:null!==(d=o.index)&&void 0!==d?d:0},showVariableModal:!0,componentType:"BUTTONS",buttonType:o.type},t)})}))]}))},U=d.div`
 	padding-top: 24px;
 	padding-left: 10px;
 	padding-right: 10px;