From 5a265af7320314fcc322df14b98b08a287e33893 Mon Sep 17 00:00:00 2001
From: juniusfree <8164667+juniusfree@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:13:27 +0800
Subject: [PATCH] Fix banner condition

---
 .../Settings/CustomizeBanners/index.tsx       | 75 ++++++++++---------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/wondrous-bot-admin/src/components/Settings/CustomizeBanners/index.tsx b/wondrous-bot-admin/src/components/Settings/CustomizeBanners/index.tsx
index 47ea04f06..e15e0cd90 100644
--- a/wondrous-bot-admin/src/components/Settings/CustomizeBanners/index.tsx
+++ b/wondrous-bot-admin/src/components/Settings/CustomizeBanners/index.tsx
@@ -163,7 +163,7 @@ const CommandBanner = ({
   const bannerImageInputField = useRef(null);
   const topImageInputField = useRef(null);
 
-  const customBannerImage = customBanner?.find((customBanner) => customBanner.purpose === banner.purpose);
+  const customBannerImage = customBanner?.find((customBanner) => customBanner.purpose === banner?.purpose);
   const customTopImage = customBanner?.find((customBanner) => customBanner.purpose === thumbnail?.purpose);
   const customBannerImageUrl = customBannerImage?.publicUrl;
   const customTopImageUrl = customTopImage?.publicUrl;
@@ -254,39 +254,46 @@ const CommandBanner = ({
         </StyledInformationTooltip>
       </HeaderContainer>
       <CommandBannerUploadContainer>
-        <BannerUploadContainer>
-          <BannerUploadHeader>Banner</BannerUploadHeader>
-          <BannerUploadImageContainer>
-            {customBannerImageUrl ? (
-              <SafeImage
-                src={customBannerImageUrl}
-                alt={`${title} banner`}
-                style={{
-                  height: "auto",
-                  objectFit: "cover",
-                  width: "100%",
-                  maxHeight: "100%",
-                }}
-              />
-            ) : (
-              <img src={banner.image} alt={`${title} banner`} />
-            )}
-          </BannerUploadImageContainer>
-          <BannerUploadTextButtonContainer>
-            <BannerUploadText>Optimal size: 640 x 140px</BannerUploadText>
-            <BannerUploadButtonContainer>
-              <ButtonIconWrapper onClick={handleSetBannerImageAvatarProps}>
-                <ReplaceIcon />
-              </ButtonIconWrapper>
-              <ButtonInputContainer>
-                <input type="file" accept="image/*" ref={bannerImageInputField} onChange={handleBannerImageOnChange} />
-              </ButtonInputContainer>
-              <ButtonIconWrapper onClick={handleDeleteBannerImage}>
-                <DeleteIcon />
-              </ButtonIconWrapper>
-            </BannerUploadButtonContainer>
-          </BannerUploadTextButtonContainer>
-        </BannerUploadContainer>
+        {banner !== undefined && (
+          <BannerUploadContainer>
+            <BannerUploadHeader>Banner</BannerUploadHeader>
+            <BannerUploadImageContainer>
+              {customBannerImageUrl ? (
+                <SafeImage
+                  src={customBannerImageUrl}
+                  alt={`${title} banner`}
+                  style={{
+                    height: "auto",
+                    objectFit: "cover",
+                    width: "100%",
+                    maxHeight: "100%",
+                  }}
+                />
+              ) : (
+                <img src={banner.image} alt={`${title} banner`} />
+              )}
+            </BannerUploadImageContainer>
+            <BannerUploadTextButtonContainer>
+              <BannerUploadText>Optimal size: 640 x 140px</BannerUploadText>
+              <BannerUploadButtonContainer>
+                <ButtonIconWrapper onClick={handleSetBannerImageAvatarProps}>
+                  <ReplaceIcon />
+                </ButtonIconWrapper>
+                <ButtonInputContainer>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    ref={bannerImageInputField}
+                    onChange={handleBannerImageOnChange}
+                  />
+                </ButtonInputContainer>
+                <ButtonIconWrapper onClick={handleDeleteBannerImage}>
+                  <DeleteIcon />
+                </ButtonIconWrapper>
+              </BannerUploadButtonContainer>
+            </BannerUploadTextButtonContainer>
+          </BannerUploadContainer>
+        )}
         <SectionDivider />
         {thumbnail !== undefined && (
           <TopImageSectionContainer>