From 2eaed8bafe3f2cf43410c3d37eabf8ce8f2b14e8 Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <ruslan.matkovskyi@sitecore.com>
Date: Tue, 10 Dec 2024 00:45:57 +0100
Subject: [PATCH]  CHANGELOG has been changed

---
 CHANGELOG.md                                  |  4 +
 .../nextjs-sxa/src/components/Container.tsx   | 84 +++++++------------
 2 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f083d7851c..b70907331d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,10 @@ Our versioning strategy is as follows:
 
 * `[nextjs][sitecore-jss-nextjs]` Support for Component Library feature in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987))
 
+### 🐛 Bug Fixes
+
+* `[templates/nextjs-sxa]` Fixed an issue in the `Container` component where `background-image` was not rendering correctly in `pageState === 'edit'` ([#1997](https://github.com/Sitecore/jss/pull/1997))
+
 ## 22.3.0 / 22.3.1
 
 ### 🐛 Bug Fixes
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx
index d822306472..34fdfc3121 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx
@@ -4,74 +4,54 @@ import {
   Placeholder,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-import React from 'react';
+import config from 'temp/config';
+
+const MEDIA_URL_PATTERN = /mediaurl="([^"]*)"/i;
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
   params: ComponentParams;
 }
 
-const BACKGROUND_REG_EXP = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
-const MEDIA_URL_PATTERN = /mediaurl="([^"]*)"/i;
-const SITECORE_MEDIA_PREFIX = '/sitecore/shell/-/media/';
-
-const getBackgroundStyle = (
-  backgroundImage: string,
-  isEditMode: boolean
-): { [key: string]: string } => {
-  if (!backgroundImage) return {};
-
-  if (isEditMode) {
-    const processedImage = backgroundImage
-      .match(BACKGROUND_REG_EXP)
-      ?.pop()
-      ?.replace(/-/gi, '');
-    return processedImage
-      ? { backgroundImage: `url('${SITECORE_MEDIA_PREFIX}${processedImage}')` }
-      : {};
-  }
-
-  const mediaUrl = backgroundImage.match(MEDIA_URL_PATTERN)?.[1] || '';
-  return mediaUrl ? { backgroundImage: `url('${mediaUrl}')` } : {};
-};
-
-const DefaultContainer: React.FC<ComponentProps> = ({ params, rendering }): JSX.Element => {
+const DefaultContainer = (props: ComponentProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
-  const {
-    Styles: containerStyles = '',
-    GridParameters = '',
-    DynamicPlaceholderId,
-    RenderingIdentifier,
-    BackgroundImage,
-  } = params;
-
-  const styles = `${GridParameters} ${containerStyles}`.trimEnd();
-  const placeholderKey = `container-${DynamicPlaceholderId}`;
-  const backgroundStyle = getBackgroundStyle(
-    BackgroundImage as string,
-    sitecoreContext.pageState === 'edit'
-  );
+  const isEditMode = sitecoreContext.pageState === 'edit';
+  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
+  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
+  const phKey = `container-${props.params.DynamicPlaceholderId}`;
+  const id = props.params.RenderingIdentifier;
+  const backgroundImage = props.params.BackgroundImage as string;
+  let backgroundStyle: { [key: string]: string } = {};
+
+  if (backgroundImage && backgroundImage.match(MEDIA_URL_PATTERN)) {
+    const mediaUrl = backgroundImage.match(MEDIA_URL_PATTERN)?.[1] || '';
+
+    backgroundStyle = {
+      backgroundImage: `url('${isEditMode ? config.sitecoreApiHost : ''}${mediaUrl}')`,
+    };
+  }
 
   return (
-    <div className={`component container-default ${styles}`} id={RenderingIdentifier || undefined}>
+    <div className={`component container-default ${styles}`} id={id ? id : undefined}>
       <div className="component-content" style={backgroundStyle}>
         <div className="row">
-          <Placeholder name={placeholderKey} rendering={rendering} />
+          <Placeholder name={phKey} rendering={props.rendering} />
         </div>
       </div>
     </div>
   );
 };
 
-export const Default: React.FC<ComponentProps> = (props): JSX.Element => {
-  const { Styles = '' } = props.params;
-  const hasContainerStyle = Styles.split(' ').includes('container');
+export const Default = (props: ComponentProps): JSX.Element => {
+  const splitStyles = props.params?.Styles?.split(' ');
 
-  return hasContainerStyle ? (
-    <div className="container-wrapper">
-      <DefaultContainer {...props} />
-    </div>
-  ) : (
-    <DefaultContainer {...props} />
-  );
+  if (splitStyles && splitStyles.includes('container')) {
+    return (
+      <div className="container-wrapper">
+        <DefaultContainer {...props} />
+      </div>
+    );
+  }
+
+  return <DefaultContainer {...props} />;
 };