From 811c78a97ca9087dafefb3c84851fa114fbdc701 Mon Sep 17 00:00:00 2001
From: illiakovalenko <illia.kovalenko@sitecore.com>
Date: Mon, 4 Dec 2023 15:33:51 +0200
Subject: [PATCH] [sitecore-jss-react] Use ComponentDataOverride instead of
 ComponentProps for BYOCComponent

---
 .../src/components/BYOCComponent.test.tsx          | 14 +++++++-------
 .../src/components/BYOCComponent.tsx               | 10 +++++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx
index 489487f6eb..5cc0c79bc6 100644
--- a/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx
+++ b/packages/sitecore-jss-react/src/components/BYOCComponent.test.tsx
@@ -6,11 +6,11 @@ import { BYOCComponent } from './BYOCComponent';
 import { MissingComponent, MissingComponentProps } from './MissingComponent';
 
 describe('BYOCComponent', () => {
-  it('should render with props when ComponentProps is provided', () => {
+  it('should render with props when ComponentDataOverride is provided', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentProps: JSON.stringify({ prop1: 'value1' }),
+        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
       },
       fetchedData: {},
     };
@@ -38,7 +38,7 @@ describe('BYOCComponent', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentProps: JSON.stringify({ prop1: 'value1' }),
+        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
       },
       fetchedData,
     };
@@ -67,7 +67,7 @@ describe('BYOCComponent', () => {
     const mockProps = {
       params: {
         ComponentName: 'Foo',
-        ComponentProps: JSON.stringify({ prop1: 'value1' }),
+        ComponentDataOverride: JSON.stringify({ prop1: 'value1' }),
       },
     };
     const Foo = () => <p id="foo-content">Test</p>;
@@ -93,7 +93,7 @@ describe('Error handling', () => {
     const props = {
       params: {
         ComponentName: 'ExampleComponent',
-        ComponentProps: 'invalid-json',
+        ComponentDataOverride: 'invalid-json',
       },
       fetchedData: {},
     };
@@ -108,7 +108,7 @@ describe('Error handling', () => {
       errorComponent: customErrorComponent,
       params: {
         ComponentName: 'ExampleComponent',
-        ComponentProps: 'invalid-json',
+        ComponentDataOverride: 'invalid-json',
       },
       fetchedData: {},
     };
@@ -122,7 +122,7 @@ describe('Error handling', () => {
     const props = {
       params: {
         ComponentName: '',
-        ComponentProps: JSON.stringify({ text: 'this is a BYOC component' }),
+        ComponentDataOverride: JSON.stringify({ text: 'this is a BYOC component' }),
       },
     };
     const wrapper = mount(<BYOCComponent {...props} />);
diff --git a/packages/sitecore-jss-react/src/components/BYOCComponent.tsx b/packages/sitecore-jss-react/src/components/BYOCComponent.tsx
index 4abe18488e..4101bfad48 100644
--- a/packages/sitecore-jss-react/src/components/BYOCComponent.tsx
+++ b/packages/sitecore-jss-react/src/components/BYOCComponent.tsx
@@ -27,7 +27,7 @@ export type BYOCComponentParams = {
   /**
    * JSON props to pass into rendered component
    */
-  ComponentProps?: string;
+  ComponentDataOverride?: string;
   /**
    * A string with classes that can be used to apply themes, via SXA functionality
    */
@@ -133,9 +133,9 @@ export class BYOCComponent extends React.Component<BYOCComponentProps> {
 
     let componentProps: { [key: string]: any } = null;
 
-    if (props.params?.ComponentProps) {
+    if (props.params?.ComponentDataOverride) {
       try {
-        componentProps = JSON.parse(props.params.ComponentProps) ?? {};
+        componentProps = JSON.parse(props.params.ComponentDataOverride) ?? {};
       } catch (e) {
         console.error(
           `Parsing props for ${componentName} component from rendering params failed. Error: ${e}`
@@ -169,8 +169,8 @@ export class BYOCComponent extends React.Component<BYOCComponentProps> {
 export async function fetchBYOCComponentServerProps(
   params: BYOCComponentParams
 ): Promise<BYOCComponentProps> {
-  const fetchDataOptions: FEAAS.DataOptions = params.ComponentProps
-    ? JSON.parse(params.ComponentProps)
+  const fetchDataOptions: FEAAS.DataOptions = params.ComponentDataOverride
+    ? JSON.parse(params.ComponentDataOverride)
     : {};
 
   const fetchedData: FEAAS.DataScopes = await FEAAS.DataSettings.fetch(fetchDataOptions || {});