-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Introduces InternalCustomerSegmentTemplate component
- Loading branch information
1 parent
402776a
commit f537b08
Showing
10 changed files
with
187 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@shopify/ui-extensions': patch | ||
| '@shopify/ui-extensions-react': patch | ||
| --- | ||
|
|
||
| Introduces InternalCustomerSegmentTemplate component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
...faces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import {InternalCustomerSegmentTemplate as BaseInternalCustomerSegmentTemplate} from '@shopify/ui-extensions/admin'; | ||
| import {createRemoteReactComponent} from '@remote-ui/react'; | ||
|
|
||
| export const InternalCustomerSegmentTemplate = createRemoteReactComponent( | ||
| BaseInternalCustomerSegmentTemplate, | ||
| ); | ||
| export type {InternalCustomerSegmentTemplateProps} from '@shopify/ui-extensions/admin'; |
38 changes: 38 additions & 0 deletions
38
...ents/InternalCustomerSegmentTemplate/examples/InternalCustomerSegmentTemplate.example.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react'; | ||
| import { | ||
| reactExtension, | ||
| InternalCustomerSegmentTemplate, | ||
| } from '@shopify/ui-extensions-react/admin'; | ||
|
|
||
| function App({i18n, enabledFeatures}) { | ||
| const productsPurchasedOnTagsEnabled = enabledFeatures.includes('productsPurchasedByTags'); | ||
| const query = productsPurchasedOnTagsEnabled | ||
| ? 'products_purchased(tag: (product_tag)) = true' | ||
| : 'products_purchased(id: (product_id)) = true'; | ||
| const queryToInsert = productsPurchasedOnTagsEnabled | ||
| ? 'products_purchased(tag:' | ||
| : 'products_purchased(id:'; | ||
|
|
||
| return ( | ||
| <> | ||
| <InternalCustomerSegmentTemplate | ||
| title={i18n.translate('product.title')} | ||
| description={i18n.translate('product.description')} | ||
| icon='productsMajor' | ||
| query={query} | ||
| queryToInsert={queryToInsert} | ||
| createdOn={new Date('2023-01-15').toISOString()} | ||
| category="reEngageCustomers" | ||
| /> | ||
| <InternalCustomerSegmentTemplate | ||
| title={i18n.translate('location.title')} | ||
| description={[i18n.translate('location.firstParagraph'), i18n.translate('location.secondParagraph')]} | ||
| icon='locationMajor' | ||
| query="customer_cities CONTAINS 'US-NY-NewYorkCity'" | ||
| category='location' | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| reactExtension('admin.customers.segmentation-templates.render', ({i18n, __enabledFeatures}) => <App i18n={i18n} enabledFeatures={__enabledFeatures} />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
87 changes: 87 additions & 0 deletions
87
...faces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import {createRemoteComponent} from '@remote-ui/core'; | ||
|
|
||
| export const customerSegmentTemplateIcons = [ | ||
| 'categoriesMajor', | ||
| 'firstVisitMajor', | ||
| 'heartMajor', | ||
| 'marketingMajor', | ||
| 'checkoutMajor', | ||
| 'ordersMajor', | ||
| 'locationMajor', | ||
| 'emailNewsletterMajor', | ||
| 'firstOrderMajor', | ||
| 'billingStatementDollarMajor', | ||
| 'diamondAlertMajor', | ||
| 'abandonedCartMajor', | ||
| 'calendarMajor', | ||
| 'productsMajor', | ||
| 'globeMajor', | ||
| 'flagMajor', | ||
| 'uploadMajor', | ||
| 'buyButtonMajor', | ||
| 'followUpEmailMajor', | ||
| 'confettiMajor', | ||
| 'viewMajor', | ||
| 'buyButtonMajor', | ||
| ] as const; | ||
|
|
||
| export type CustomerSegmentTemplateIcon = | ||
| typeof customerSegmentTemplateIcons[number]; | ||
|
|
||
| export const customerSegmentTemplateCategories = [ | ||
| 'firstTimeBuyers', | ||
| 'highValueCustomers', | ||
| 'reEngageCustomers', | ||
| 'abandonedCheckout', | ||
| 'purchaseBehaviour', | ||
| 'location', | ||
| ] as const; | ||
|
|
||
| export type CustomerSegmentTemplateCategory = | ||
| typeof customerSegmentTemplateCategories[number]; | ||
|
|
||
| /** | ||
| * Reserved namespace and key for the customer standard metafield used in the template's query. | ||
| * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard | ||
| */ | ||
| type CustomerStandardMetafieldDependency = 'facts.birth_date'; | ||
|
|
||
| export interface InternalCustomerSegmentTemplateProps { | ||
| /* Localized title of the template. */ | ||
| title: string; | ||
| /* 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?: CustomerSegmentTemplateIcon; | ||
| /* DEPRECATED - Code snippet to render in the template with syntax highlighting. */ | ||
| templateQuery?: string; | ||
| /* Code snippet to render in the template with syntax highlighting. */ | ||
| query: string; | ||
| /* DEPRECATED - Code snippet to insert in the segment editor. If missing, `templateQuery` will be used. */ | ||
| templateQueryToInsert?: string; | ||
| /* Code snippet to insert in the segment editor. If missing, `templateQuery` will be used. */ | ||
| queryToInsert?: string; | ||
| /* DEPRECATED - List of customer standard metafield used in the template's query. */ | ||
| standardMetafieldDependencies?: CustomerStandardMetafieldDependency[]; | ||
| /* List of customer standard metafields or custom metafields used in the template's query. */ | ||
| dependencies?: { | ||
| standardMetafields?: CustomerStandardMetafieldDependency[]; | ||
| customMetafields?: string[]; | ||
| }; | ||
| /* DEPRECATED - ISO 8601-encoded date and time string. A "New" badge will be rendered for recently introduced templates. */ | ||
| dateAdded?: string; | ||
| /* ISO 8601-encoded date and time string. A "New" badge will be rendered for recently introduced templates. */ | ||
| createdOn?: string; | ||
| /* The category in which the template will be visible. | ||
| When provided, the template will show in its respective category and aggregate sections. | ||
| When missing, the template will show in the aggregate sections only */ | ||
| category?: CustomerSegmentTemplateCategory; | ||
| } | ||
|
|
||
| /** | ||
| * Customer segment templates are used to give merchants a starting point to create segments. | ||
| */ | ||
| export const InternalCustomerSegmentTemplate = createRemoteComponent< | ||
| 'InternalCustomerSegmentTemplate', | ||
| InternalCustomerSegmentTemplateProps | ||
| >('InternalCustomerSegmentTemplate'); |
37 changes: 37 additions & 0 deletions
37
...nents/InternalCustomerSegmentTemplate/examples/InternalCustomerSegmentTemplate.example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { | ||
| extension, | ||
| InternalCustomerSegmentTemplate, | ||
| } from '@shopify/ui-extensions/admin'; | ||
|
|
||
| export default extension( | ||
| 'admin.customers.segmentation-templates.render', | ||
| (root, {i18n, __enabledFeatures}) => { | ||
| const productsPurchasedOnTagsEnabled = __enabledFeatures.includes('productsPurchasedByTags'); | ||
| const productTemplate = root.createComponent(InternalCustomerSegmentTemplate, { | ||
| title: i18n.translate('product.title'), | ||
| description: i18n.translate('product.description'), | ||
| icon: 'productsMajor', | ||
| query: productsPurchasedOnTagsEnabled | ||
| ? 'products_purchased(tag: (product_tag)) = true' | ||
| : 'products_purchased(id: (product_id)) = true', | ||
| queryToInsert: productsPurchasedOnTagsEnabled | ||
| ? 'products_purchased(tag:' | ||
| : 'products_purchased(id:', | ||
| dateAdded: new Date('2023-01-15').toISOString(), | ||
| category: 'reEngageCustomers', | ||
| }); | ||
|
|
||
| const locationTemplate = root.createComponent(InternalCustomerSegmentTemplate, { | ||
| title: i18n.translate('location.title'), | ||
| description: [i18n.translate('location.firstParagraph'), i18n.translate('location.secondParagraph')], | ||
| icon: 'locationMajor', | ||
| query: "customer_cities CONTAINS 'US-NY-NewYorkCity'", | ||
| category: 'location', | ||
| }); | ||
|
|
||
| root.appendChild(productTemplate); | ||
| root.appendChild(locationTemplate); | ||
|
|
||
| root.mount(); | ||
| }, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters