[Checkout UI] useAppMetafields returns stringified booleans

[masonmcelvain]

Please list the package(s) involved in the issue, and include the version you are using

@shopify/[email protected]

Describe the bug

useAppMetafields returns the values "true" and "false" for boolean metafields instead of true and false. This is surprising because AppMetafield.value's type definition includes boolean.

ui-extensions/packages/ui-extensions/src/surfaces/checkout/api/standard/standard.ts

Lines 178 to 196 in c22cbda

	/**
	* Represents a custom metadata attached to a resource.
	*/
	export interface AppMetafield {
	/** The key name of a metafield. */
	key: string;
	/** The namespace for a metafield. */
	namespace: string;
	/** The value of a metafield. */
	value: string | number | boolean;
	/** The metafield’s information type. */
	valueType: 'boolean' | 'float' | 'integer' | 'json_string' | 'string';
	/** The metafield's type name. */
	type: string;
	}

Steps to reproduce the behavior:

1. The metafield can have a definition or be unstructured. I tested with a product variant metafield. It's type must be boolean.
2. Add a value of true or false to a variant's metafield.
3. console.log(useAppMetafields({ id: yourMetafieldId })) produces a value similar to the screenshot below.

Expected behavior

AppMetafield.value should be a boolean if the type of the metafield is boolean, not "true" or "false".

Screenshots

Additional context

Similar to #971

[dnagoda]

Thanks for the report. I was able to reproduce the issue. Adding to our backlog.

[masonmcelvain]

Reposted in the community forum https://community.shopify.dev/t/checkout-ui-useappmetafields-returns-stringified-booleans/4345