Update product-configuration template

[siddhantbajaj]

Background

(Provide a link to any relevant issues AND provide a TLDR of the issue in this pull request)

Solution

Before:

After:

Checklist

• I have 🎩'd these changes
• I have squashed my commits into chunks of work with meaningful commit messages

[carrotderek]

Great start to this. Mainly question around whether we can simplify the markup by using the ResourceList to render the bundle components.

[carrotderek]

Do we need to comment this out?

[kmdavis]

linter might complain about unused variables?

[kmdavis]

hmm... if we leave this commented out, we ALSO need to comment out 2 lines below (the non-typescript version)

[siddhantbajaj]

Yes, I missed commenting that out.

[carrotderek]

Can we use <ResourceList /> and <ResourceItem /> components? It would simplify the markup here and I think they are available in the ui-extensions-react library.

[kmdavis]

yeah, they are available, and are what we actually have in the standard card.

[siddhantbajaj]

Doesn't look like it exists there - https://shopify.slack.com/archives/C04K7BZDH3N/p1702483564729509?thread_ts=1702483485.885719&cid=C04K7BZDH3N

[kmdavis]

linter might complain about unused variables?

[kmdavis]

yeah, they are available, and are what we actually have in the standard card.

[kmdavis]

instead of using flatMap (which works :D) it is more common to use map with a Fragment

Suggested change

	{bundleComponents.flatMap((component, index) => [
	<InlineStack gap key={component}>
	<Box padding="none" inlineSize="10%">
	<Icon name="ImageMajor" size="fill" />
	</Box>
	<Box padding="large none">
	<BlockStack gap="none" padding="none">
	<Text fontWeight="bold-200">
	{component}
	</Text>
	</BlockStack>
	</Box>
	</InlineStack>,
	index < bundleComponents.length - 1 && <Divider key={`divider-${index}`} />
	])}
	{bundleComponents.map((component, index) =>
	<React.Fragment key={component}>
	<InlineStack gap>
	<Box padding="none" inlineSize="10%">
	<Icon name="ImageMajor" size="fill" />
	</Box>
	<Box padding="large none">
	<BlockStack gap="none" padding="none">
	<Text fontWeight="bold-200">
	{component}
	</Text>
	</BlockStack>
	</Box>
	</InlineStack>
	{index < bundleComponents.length - 1 && <Divider />}
	</React.Fragment>
	)}

[siddhantbajaj]

Updated. I also had to add an import for react:

import React = require('react');

Let me know If I'm doing something wrong.

[kmdavis]

hmm... if we leave this commented out, we ALSO need to comment out 2 lines below (the non-typescript version)

[carrotderek]

Looks like we're going to have to without ResourceList then 😆 - thanks for tracking that down.

Just need to fix the import statement for React and we should be good.

[carrotderek]

ES modules is the standard when working within the browser.

Suggested change

	import React = require('react');
	import React from 'react';