change description prop type

Shopify · Mar 7, 2023 · feaab61 · feaab61
1 parent f5e0be4
commit feaab61
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/tasty-avocados-sparkle.md b/.changeset/tasty-avocados-sparkle.md
@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': minor
+'@shopify/ui-extensions-react': minor
+---
+
+Changes typing of `description` prop of `<CustomerSegmentationTemplate/>` from `string` to `string | string[]`
diff --git a/...components/CustomerSegmentationTemplate/examples/CustomerSegmentationTemplate.example.tsx b/...components/CustomerSegmentationTemplate/examples/CustomerSegmentationTemplate.example.tsx
@@ -13,7 +13,7 @@ function App({i18n, enabledFeatures, category}) {
     const templateQueryToInsert = productsPurchasedOnTagsEnabled
       ? 'products_purchased(tag:'
       : 'products_purchased(id:';
-  
+
     return (
       <CustomerSegmentationTemplate
         title={i18n.translate('product.title')}
@@ -25,12 +25,12 @@ function App({i18n, enabledFeatures, category}) {
       />
     );
   }
-  
+
   if (category == 'location') {
     return (
       <CustomerSegmentationTemplate
         title={i18n.translate('location.title')}
-        description={i18n.translate('location.description')}
+        description={[i18n.translate('location.firstParagraph'), i18n.translate('location.secondParagraph')]}
         icon='locationMajor'
         templateQuery="customer_cities CONTAINS 'US-NY-NewYorkCity'"
       />

diff --git a/...rc/surfaces/admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.ts b/...rc/surfaces/admin/components/CustomerSegmentationTemplate/CustomerSegmentationTemplate.ts
@@ -30,9 +30,9 @@ type CustomerStandardMetafieldDependency = 'facts.birth_date';
 export interface CustomerSegmentationTemplateProps {
   /* Localized title of the template. */
   title: string;
-  /* Localized description of the template. */
-  description: string;
-  /* Icon identifier for the template. This property is ignored for non-1P Segmentation templates as we fallback to the app icon. */
+  /* Localized description(s) of the template. */
+  description: string | string[];
+  /* Icon identifier for the template. This property is ignored for non-1P Segmentation templates as we fallback to the app icon */
   icon?: Source;
   /* ShopifyQL code snippet to render in the template with syntax highlighting. */
   templateQuery: string;

diff --git a/.../components/CustomerSegmentationTemplate/examples/CustomerSegmentationTemplate.example.ts b/.../components/CustomerSegmentationTemplate/examples/CustomerSegmentationTemplate.example.ts
@@ -27,7 +27,7 @@ export default extension(
     if (__category === 'location') {
       const locationTemplate = root.createComponent(CustomerSegmentationTemplate, {
         title: i18n.translate('location.title'),
-        description: i18n.translate('location.description'),
+        description: [i18n.translate('location.firstParagraph'), i18n.translate('location.secondParagraph')],
         icon: 'locationMajor',
         templateQuery: "customer_cities CONTAINS 'US-NY-NewYorkCity'",
       });