Initial commit of Salesforce Commerce Cloud app. #3633

jsdalton · 2023-06-01T14:17:58Z

Note: Reopens #3620 to workaround permission issue.

Purpose

This app provides an integration with Salesforce Commerce Cloud storefronts to pick products and categories within the Contentful UI.

Approach

Created a new Salesforce Commerce Cloud app via npx create-contentful-app in the apps directory of the repository.
App uses components for Field, Configuration, and Dialog locations
Created an Sfcc utility to facilitate interaction with Salesforce Commerce Cloud apis.

Dependencies and/or References

https://developer.salesforce.com/docs/commerce/commerce-api/overview

Deployment

App is currently hosted on Contentful.

rusticpenguin · 2023-06-01T15:22:19Z

apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx

+  );
+};
+
+const CategorySearchResult = (props: SearchResultProps) => {


CategorySearchResult could be broken out into it's own file just to keep this file a bit more focused

rusticpenguin · 2023-06-01T15:23:23Z

apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx

+  headerHeight,
+} from './SearchPicker';
+
+const CategorySearchResults = (props: SearchResultsProps) => {


I feel it would be good to destructure the props here for consistency

rusticpenguin · 2023-06-01T15:23:52Z

apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx

+  headerHeight,
+} from './SearchPicker';
+
+const CategorySearchResults = (props: SearchResultsProps) => {


I feel it would be good to destructure the props here for consistency

rusticpenguin · 2023-06-01T15:32:16Z

apps/salesforce-commerce-cloud/src/components/dialog/ProductPreview.tsx

+  let description = 'Description';
+  if (product.shortDescription.default) {
+    description =
+      product.shortDescription.default.markup.length > descriptionLength
+        ? `${product.shortDescription.default.markup.substring(0, descriptionLength)}...`
+        : product.shortDescription.default.markup;
+  }


Suggested change

let description = 'Description';

if (product.shortDescription.default) {

description =

product.shortDescription.default.markup.length > descriptionLength

? `${product.shortDescription.default.markup.substring(0, descriptionLength)}...`

: product.shortDescription.default.markup;

}

const formatShortDescription = (productMarkup?: string) => {

if (!productMarkup) {

return '';

}

if (productMarkup.length > descriptionLength) {

return `${productMarkup.substring(0, descriptionLength)}...`;

}

return productMarkup;

}

const description = formatShortDescription(product.shortDescription.default?.markup) || 'Description';

Changing this over to a const and using a function with a return value could help make this section a little faster to read

rusticpenguin · 2023-06-01T15:33:34Z

apps/salesforce-commerce-cloud/src/components/dialog/ProductSearchResults.tsx

+  );
+};
+
+const ProductSearchResult = (props: SearchResultProps) => {


Same comment as before, I feel this would be nicer to move into it's own file for separation of concerns

rusticpenguin · 2023-06-01T15:34:35Z

apps/salesforce-commerce-cloud/src/components/dialog/ProductSearchResults.tsx

+  stickyHeaderBreakpoint,
+} from './SearchPicker';
+
+const ProductSearchResults = (props: SearchResultsProps) => {


I feel it would be good to destructure the props here for consistency

rusticpenguin · 2023-06-01T15:36:11Z

apps/salesforce-commerce-cloud/src/components/dialog/ProductSearchResults.tsx

+
+  return (
+    <Flex css={productWrapperStyles}>
+      <div


instead of divs, could we use <box> and move a lot of the styling into the component?

rusticpenguin · 2023-06-01T15:36:35Z

apps/salesforce-commerce-cloud/src/components/dialog/SearchBar.tsx

+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};


love the declared noop

rusticpenguin · 2023-06-01T15:37:10Z

apps/salesforce-commerce-cloud/src/components/dialog/SearchBar.tsx

+    }
+  `;
+
+  const controlProps = { ...props, fieldType };


beautifully written!

rusticpenguin · 2023-06-01T15:39:44Z

apps/salesforce-commerce-cloud/src/components/dialog/SearchBar.tsx

@@ -0,0 +1,292 @@
+import React, { useState } from 'react';


Could we create a SearchBar folder, and break these out into separate files? This one is a big one!

Also similar comments as earlier with consistently destructing props when you're using them in the component (eg. SearchBar doesn't need to because it's just passing props, but the subcomponents who are using them would make it easier to read the file)

rusticpenguin · 2023-06-01T15:47:12Z

apps/salesforce-commerce-cloud/src/App.tsx

+  const Component = useMemo(() => {
+    for (const [location, component] of Object.entries(ComponentLocationSettings)) {
+      if (sdk.location.is(location)) {
+        return component;
+      }
+    }
+  }, [sdk.location]);


This looks like this may be better suited for a useEffect, since we want this hooked into the react lifecycle. (You may need to tweak the typing on useState)

Suggested change

const Component = useMemo(() => {

for (const [location, component] of Object.entries(ComponentLocationSettings)) {

if (sdk.location.is(location)) {

return component;

}

}

}, [sdk.location]);

const [Component, setComponent] = useState<ReactElement>();

useEffect(() => {

for (const [location, component] of Object.entries(ComponentLocationSettings)) {

if (sdk.location.is(location)) {

setComponent(component)

}

}

}, [sdk.location]);

rusticpenguin · 2023-06-01T15:47:57Z

apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx

+  headerHeight,
+} from './SearchPicker';
+
+const CategorySearchResults = (props: SearchResultsProps) => {


I feel it would be good to destructure the props here for consistency

rusticpenguin · 2023-06-01T15:50:28Z

apps/salesforce-commerce-cloud/src/components/dialog/SearchPicker.tsx

+      }
+    }, 500);
+    return () => clearTimeout(timeOutId);
+  }, [fieldType, query, installParameters]);


I saw we setup the ReactQuery provider in the App.tsx, could we use the queryClient here instead?

rusticpenguin · 2023-06-01T15:51:48Z

apps/salesforce-commerce-cloud/src/components/field/SelectItemAction.tsx

+  margin-right: ${tokens.spacingM};
+`;
+
+const SelectItemAction = (props: { fieldValue?: string | string[] }) => {


I feel it would be good to destructure the props here for consistency, also creating an interface for the component

rusticpenguin · 2023-06-01T15:52:49Z

apps/salesforce-commerce-cloud/src/components/field/ItemCard.tsx

@@ -0,0 +1,173 @@
+import React from 'react';


This file could be broken up into it's own folder

rusticpenguin · 2023-06-01T15:55:27Z

apps/salesforce-commerce-cloud/src/locations/Field.tsx

+    };
+
+    return sdk.field.onValueChanged(valueChangeHandler);
+  }, [sdk.field]);


I just learned this the other day! Check out: useResourceValue! This takes care of line 21 - 29

rusticpenguin

Overall looks amazing! All my comments are structure/code readability related. The actual logic is solid

rusticpenguin · 2023-06-01T16:12:47Z

apps/salesforce-commerce-cloud/src/components/field/SelectItemAction.tsx

+  const queryArray: string[] = [];
+  if (props.fieldValue) {
+    props.fieldValue instanceof Array
+      ? queryArray.push(...props.fieldValue)
+      : queryArray.push(props.fieldValue);
+  }
+
+  const client = new SfccClient(installParameters);
+  const currentItemQueries = useQueries({
+    queries: queryArray.map((id: string) => {
+      const [itemId, catalogId] = id.split(':');
+      return {
+        queryKey: ['itemInfo', itemId],
+        queryFn:
+          fieldType === 'product'
+            ? () => client.fetchProduct(itemId)
+            : () => client.fetchCategory(itemId, catalogId),
+      };
+    }),
+  });
+
+  const queriesComplete = currentItemQueries.every((query) => query.isSuccess || query.isError);
+
+  useEffect(() => {
+    if (queriesComplete) {
+      const updatedData: any[] = [];
+      for (const query of currentItemQueries) {
+        if (query.isSuccess) {
+          updatedData.push(query.data);
+        }
+      }
+
+      if (updatedData.length) {
+        setCurrentData(updatedData);
+      }
+    }
+  }, [queriesComplete]);


I feel moving lines 32 - 68 into a hook would make this file easier to digest

rusticpenguin

Created a ticket for feedback

rusticpenguin

Created a ticket for feedback

jsdalton requested a review from matthew-gordon June 1, 2023 14:18

jgrahamdev and others added 2 commits June 1, 2023 07:22

Initial commit of Salesforce Commerce Cloud app.

cddb1b4

Fix prettier code format issues

02f5e0e

jsdalton force-pushed the jgrahamdev/salesforce-app branch from cdd32a5 to 02f5e0e Compare June 1, 2023 14:22

jsdalton requested a review from a team June 1, 2023 14:23

rusticpenguin reviewed Jun 1, 2023

View reviewed changes

rusticpenguin requested changes Jun 1, 2023

View reviewed changes

rusticpenguin reviewed Jun 1, 2023

View reviewed changes

rusticpenguin approved these changes Jun 1, 2023

View reviewed changes

jsdalton merged commit 359da57 into master Jun 1, 2023

jsdalton deleted the jgrahamdev/salesforce-app branch June 1, 2023 17:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial commit of Salesforce Commerce Cloud app. #3633

Initial commit of Salesforce Commerce Cloud app. #3633

jsdalton commented Jun 1, 2023

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin left a comment •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin left a comment

rusticpenguin left a comment

-  let description = 'Description';
-  if (product.shortDescription.default) {
-    description =
-      product.shortDescription.default.markup.length > descriptionLength
-        ? `${product.shortDescription.default.markup.substring(0, descriptionLength)}...`
-        : product.shortDescription.default.markup;
-  }
+  const formatShortDescription = (productMarkup?: string) => {
+    if (!productMarkup) {
+      return '';
+    }
+    if (productMarkup.length > descriptionLength) {
+      return `${productMarkup.substring(0, descriptionLength)}...`;
+    }
+    return productMarkup;
+  }
+  const description = formatShortDescription(product.shortDescription.default?.markup) || 'Description';

Initial commit of Salesforce Commerce Cloud app. #3633

Initial commit of Salesforce Commerce Cloud app. #3633

Conversation

jsdalton commented Jun 1, 2023

Purpose

Approach

Dependencies and/or References

Deployment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

rusticpenguin left a comment • edited Loading

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

rusticpenguin left a comment

Choose a reason for hiding this comment

rusticpenguin left a comment

Choose a reason for hiding this comment

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading

rusticpenguin left a comment •

edited

Loading

rusticpenguin Jun 1, 2023 •

edited

Loading