From 53f5630c28c7036c79fc69de2109c5a9b1760bc9 Mon Sep 17 00:00:00 2001
From: Daniel Fulop <daniel.fulop@frontify.com>
Date: Thu, 5 Dec 2024 15:18:26 +0100
Subject: [PATCH] fix(CalloutBlock): unregister assets on switch off (#974)

* fix(CalloutBlock): unregister assets on switch off

* fix review
---
 packages/callout-block/src/CalloutBlock.tsx        | 14 ++++++++++++--
 .../callout-block/src/components/CalloutIcon.tsx   | 12 ++++++------
 .../src/components/CustomCalloutIcon.tsx           | 12 +++---------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/callout-block/src/CalloutBlock.tsx b/packages/callout-block/src/CalloutBlock.tsx
index 7040cdc29..b84f055ca 100644
--- a/packages/callout-block/src/CalloutBlock.tsx
+++ b/packages/callout-block/src/CalloutBlock.tsx
@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { useBlockSettings, useEditorState } from '@frontify/app-bridge';
+import { useBlockAssets, useBlockSettings, useEditorState } from '@frontify/app-bridge';
 
 import {
     BlockProps,
@@ -20,6 +20,7 @@ import { Appearance, BlockSettings, Icon, Width, alignmentMap, outerWidthMap, pa
 import '@frontify/fondue/style';
 import '@frontify/guideline-blocks-settings/styles';
 import 'tailwindcss/tailwind.css';
+import { ICON_ASSET_ID } from './settings';
 
 export const CalloutBlock = ({ appBridge }: BlockProps): ReactElement => {
     const [backgroundColor, setBackgroundColor] = useState<string>('');
@@ -28,6 +29,15 @@ export const CalloutBlock = ({ appBridge }: BlockProps): ReactElement => {
     const { type, appearance } = blockSettings;
     const isEditing = useEditorState(appBridge);
 
+    const { blockAssets, deleteAssetIdsFromKey } = useBlockAssets(appBridge);
+    const customIcon = blockAssets?.[ICON_ASSET_ID]?.[0];
+
+    useEffect(() => {
+        if (!blockSettings.iconSwitch && customIcon && isEditing) {
+            deleteAssetIdsFromKey(ICON_ASSET_ID, [customIcon.id]);
+        }
+    }, [blockSettings.iconSwitch, customIcon, deleteAssetIdsFromKey, isEditing]);
+
     useEffect(() => {
         const updateStyles = () => {
             const { backgroundColor, textColor } = computeStyles(type, appearance);
@@ -116,9 +126,9 @@ export const CalloutBlock = ({ appBridge }: BlockProps): ReactElement => {
                 <div data-test-id="callout-content" className={textDivClassNames}>
                     {iconType !== Icon.None && (
                         <CalloutIcon
-                            appBridge={appBridge}
                             isActive={hasRichTextValue(blockSettings.textValue)}
                             iconType={iconType}
+                            customIcon={customIcon}
                             color={textColor}
                             type={type}
                         />
diff --git a/packages/callout-block/src/components/CalloutIcon.tsx b/packages/callout-block/src/components/CalloutIcon.tsx
index c17ce5a6c..28b7acafd 100644
--- a/packages/callout-block/src/components/CalloutIcon.tsx
+++ b/packages/callout-block/src/components/CalloutIcon.tsx
@@ -4,19 +4,19 @@ import { joinClassNames } from '@frontify/guideline-blocks-settings';
 import type { ReactNode } from 'react';
 
 import { Icon, Type } from '../types';
-import { AppBridgeBlock } from '@frontify/app-bridge';
+import { Asset } from '@frontify/app-bridge';
 import { CustomCalloutIcon } from './CustomCalloutIcon';
 import { IconInfo, IconLightbulb, IconMegaphone } from './icons/';
 
 type CalloutIconProps = {
     iconType: Icon;
     isActive: boolean;
-    appBridge: AppBridgeBlock;
+    customIcon: Asset | undefined;
     color?: string;
     type: Type;
 };
-export const CalloutIcon = ({ iconType, isActive, appBridge, color, type }: CalloutIconProps) => {
-    const icon = calloutIconMap(appBridge, type)[iconType];
+export const CalloutIcon = ({ iconType, isActive, customIcon, color, type }: CalloutIconProps) => {
+    const icon = calloutIconMap(customIcon, type)[iconType];
 
     return (
         <div
@@ -34,10 +34,10 @@ export const CalloutIcon = ({ iconType, isActive, appBridge, color, type }: Call
     );
 };
 
-const calloutIconMap = (appBridge: AppBridgeBlock, type: Type): Record<Icon, ReactNode> => ({
+const calloutIconMap = (customIcon: Asset | undefined, type: Type): Record<Icon, ReactNode> => ({
     none: null,
     info: <IconInfo title={type} />,
     lightbulb: <IconLightbulb title={type} />,
     megaphone: <IconMegaphone title={type} />,
-    custom: <CustomCalloutIcon appBridge={appBridge} type={type} />,
+    custom: <CustomCalloutIcon customIcon={customIcon} type={type} />,
 });
diff --git a/packages/callout-block/src/components/CustomCalloutIcon.tsx b/packages/callout-block/src/components/CustomCalloutIcon.tsx
index f7d87b595..0886d6ff0 100644
--- a/packages/callout-block/src/components/CustomCalloutIcon.tsx
+++ b/packages/callout-block/src/components/CustomCalloutIcon.tsx
@@ -1,17 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { AppBridgeBlock, useBlockAssets } from '@frontify/app-bridge';
-
-import { ICON_ASSET_ID } from '../settings';
+import { Asset } from '@frontify/app-bridge';
 import { Type } from '../types';
 
-export const CustomCalloutIcon = ({ appBridge, type }: { appBridge: AppBridgeBlock; type: Type }) => {
-    const { blockAssets } = useBlockAssets(appBridge);
-
-    const icon = blockAssets?.[ICON_ASSET_ID]?.[0];
-
+export const CustomCalloutIcon = ({ customIcon, type }: { customIcon: Asset | undefined; type: Type }) => {
     const devicePixelRatio = Math.max(window.devicePixelRatio, 1);
-    const iconUrl = icon?.genericUrl.replace('{width}', (20 * devicePixelRatio).toString());
+    const iconUrl = customIcon?.genericUrl.replace('{width}', (20 * devicePixelRatio).toString());
 
     return iconUrl ? (
         <img data-test-id="callout-icon-custom" src={iconUrl} alt={type} className="tw-w-5 tw-h-5 tw-object-contain" />