Skip to content

Commit a89823d

Browse files
vividvioletvividviolet
authored
Merge pull request #2478 from Shopify/internal-2023-11-update
Internal November 2023 update
2 parents 94609d5 + fcca18d commit a89823d

File tree

60 files changed

+1487
-52
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1487
-52
lines changed

Diff for: ‎.changeset/fuzzy-trainers-work.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/ui-extensions-react': minor
3+
'@shopify/ui-extensions': minor
4+
---
5+
6+
Release a new Chat component, chat.render targets and preloads.chat configuration

Diff for: ‎.changeset/hot-shirts-clean.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/ui-extensions': patch
3+
---
4+
5+
Make POS UI Ext PrintAPI async

Diff for: ‎.changeset/hot-years-relate.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/ui-extensions': patch
3+
---
4+
5+
POS UI Ext PrintAPI src non-optional

Diff for: ‎.changeset/shiny-dingos-battle.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/ui-extensions-react': patch
3+
'@shopify/ui-extensions': patch
4+
---
5+
6+
Fix RenderExtension interface to support synchronous renders and make the clean up function optional

Diff for: ‎packages/ui-extensions-react/src/surfaces/checkout/components/Chat/examples/basic-chat.example.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {
2+
reactExtension,
3+
Chat,
4+
} from '@shopify/ui-extensions-react/checkout';
5+
6+
export default reactExtension(
7+
'purchase.checkout.chat.render',
8+
() => <Extension />,
9+
);
10+
11+
// This component requires the configuration of the `extensions.targeting.preloads.chat` in the extensions configuration file.
12+
// Its value will be used as the `src` attribute of the Chat component.
13+
14+
function Extension() {
15+
return <Chat inlineSize={100} blockSize={50} />;
16+
}

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.chat.render/default.example.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {
2+
Chat,
3+
extension,
4+
} from '@shopify/ui-extensions/checkout';
5+
6+
// 1. Choose an extension target
7+
export default extension(
8+
'purchase.checkout.chat.render',
9+
(root) => {
10+
// 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
11+
root.appendChild(
12+
root.createComponent(Chat, {
13+
inlineSize: 100,
14+
blockSize: 50,
15+
}),
16+
);
17+
},
18+
);

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.checkout.chat.render/default.example.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {
2+
Chat,
3+
reactExtension,
4+
} from '@shopify/ui-extensions-react/checkout';
5+
6+
// 1. Choose an extension target
7+
export default reactExtension(
8+
'purchase.checkout.chat.render',
9+
() => <Extension />,
10+
);
11+
12+
function Extension() {
13+
// 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
14+
return <Chat inlineSize={100} blockSize={50} />;
15+
}

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.chat.render/default.example.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {
2+
Chat,
3+
extension,
4+
} from '@shopify/ui-extensions/checkout';
5+
6+
// 1. Choose an extension target
7+
export default extension(
8+
'purchase.thank-you.chat.render',
9+
(root) => {
10+
// 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
11+
root.appendChild(
12+
root.createComponent(Chat, {
13+
inlineSize: 100,
14+
blockSize: 50,
15+
}),
16+
);
17+
},
18+
);

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/purchase.thank-you.chat.render/default.example.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {
2+
Chat,
3+
reactExtension,
4+
} from '@shopify/ui-extensions-react/checkout';
5+
6+
// 1. Choose an extension target
7+
export default reactExtension(
8+
'purchase.thank-you.chat.render',
9+
() => <Extension />,
10+
);
11+
12+
function Extension() {
13+
// 2. Render a Chat UI. This target only accepts the Chat component. Any other components will not render.
14+
return <Chat inlineSize={100} blockSize={50} />;
15+
}

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts

+2
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,8 @@ export function getExamples(
145145
...createExample('purchase.checkout.footer.render-after/default'),
146146
...createExample('purchase.thank-you.header.render-after/default'),
147147
...createExample('purchase.thank-you.footer.render-after/default'),
148+
...createExample('purchase.checkout.chat.render/default'),
149+
...createExample('purchase.thank-you.chat.render/default'),
148150
'analytics-publish': {
149151
description:
150152
'You can publish analytics events to the Shopify analytics frameworks and they will be propagated to all web pixels on the page.',

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.chat.render.doc.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs';
4+
5+
const data: ReferenceEntityTemplateSchema = {
6+
name: 'purchase.checkout.chat.render',
7+
description: `
8+
A static extension target that floats above the checkout in the bottom right corner of the screen.
9+
10+
> Note: This target only accepts the [Chat](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/chat) component. Any other components will not render.
11+
`,
12+
defaultExample: getExample('purchase.checkout.chat.render/default', [
13+
'jsx',
14+
'js',
15+
]),
16+
subCategory: 'Overlays',
17+
related: getLinksByTag('targets'),
18+
...CHECKOUT_API,
19+
};
20+
21+
export default data;

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.chat.render.doc.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
import {THANK_YOU_API, getExample, getLinksByTag} from '../helper.docs';
4+
5+
const data: ReferenceEntityTemplateSchema = {
6+
name: 'purchase.thank-you.chat.render',
7+
description: `
8+
A static extension target that floats above the Thank you page in the bottom right corner of the screen.
9+
10+
> Note: This target only accepts the [Chat](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/chat) component. Any other components will not render.
11+
`,
12+
defaultExample: getExample('purchase.thank-you.chat.render/default', [
13+
'jsx',
14+
'js',
15+
]),
16+
subCategory: 'Overlays',
17+
related: getLinksByTag('targets'),
18+
...THANK_YOU_API,
19+
};
20+
21+
export default data;

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-iframe-clipping.png

45.8 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-maximized.png

30.5 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-minimized.png

18.6 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-thumbnail.png

16.8 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/supported-locations-chat-thank-you.png

72.7 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/screenshots/supported-locations-chat.png

60.3 KB
Loading

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/staticPages/configuration.doc.ts

+28
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,34 @@ You retrieve these metafields in your extension by reading [\`appMetafields\`](/
463463
],
464464
},
465465
},
466+
{
467+
type: 'Generic',
468+
anchorLink: 'preloads-definition',
469+
title: 'Preloads definition',
470+
sectionContent: `
471+
For specific targets, you must provide the URL of assets or pages loaded by UI components within its extension. This allows Shopify to preload them as early as possible and ensure a performant experience for buyers.
472+
Currently, the only supported component is \`chat\`.
473+
The URL for the iframe used in this extension target. The URL can be absolute or relative. Relative URLs are resolved against the app URL.
474+
For example,
475+
* if the app URL is \`https://example.com\` and \`chat = "/my-chat-application"\`, the resolved URL will be \`https://example.com/my-chat-application\`.
476+
* if \`chat = "https://my-chat-application.com"\`, the resolved URL will be \`https://my-chat-application.com\`.
477+
`,
478+
codeblock: {
479+
title: 'Extension target preloads',
480+
tabs: [
481+
{
482+
title: 'shopify.extension.toml',
483+
code: './examples/configuration/preloads.example.toml',
484+
language: 'toml',
485+
},
486+
{
487+
title: 'Block.jsx',
488+
code: './examples/configuration/preloads.example.tsx',
489+
language: 'jsx',
490+
},
491+
],
492+
},
493+
},
466494
],
467495
};
468496

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/configuration/preloads.example.toml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# ...
2+
3+
[[extensions.targeting]]
4+
target = "purchase.checkout.chat.render"
5+
module = "./Block.jsx"
6+
7+
[extensions.targeting.preloads]
8+
chat = "https://my-chat-application.com"
9+
10+
# ...

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/configuration/preloads.example.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// ...
2+
3+
export default reactExtension(
4+
'purchase.checkout.chat.render',
5+
<Extension />,
6+
);
7+
8+
function Extension() {
9+
// ...
10+
}

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/staticPages/extension-overview.doc.ts

+26-8
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ You register for targets in your [configuration file](/docs/api/checkout-ui-exte
2828
description: `
2929
This is the first step in the checkout process where the buyer enters contact information and a delivery address.
3030
31-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
31+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
3232
`,
3333
image: 'supported-locations-information.png',
3434
},
@@ -37,7 +37,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
3737
description: `
3838
Point in checkout where the buyer selects a shipping method.
3939
40-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
40+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
4141
`,
4242
image: 'supported-locations-shipping.png',
4343
},
@@ -46,7 +46,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
4646
description: `
4747
Point in checkout where the buyer enters their payment information.
4848
49-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
49+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
5050
`,
5151
image: 'supported-locations-payment.png',
5252
},
@@ -55,7 +55,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
5555
description: `
5656
Summary of the cart contents, discounts, and order totals.
5757
58-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
58+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
5959
`,
6060
image: 'supported-locations-order-summary.png',
6161
},
@@ -64,7 +64,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
6464
description: `
6565
Accelerated checkout where Shopify pre-fills buyer information using their Shop Pay account.
6666
67-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
67+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
6868
`,
6969
image: 'supported-locations-shop-pay.png',
7070
},
@@ -73,7 +73,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
7373
description: `
7474
When multiple shipments are expected, a checkout will render split shipping options.
7575
76-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
76+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
7777
`,
7878
image: 'supported-locations-split-shipping.png',
7979
},
@@ -82,7 +82,7 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
8282
description: `
8383
Point in checkout where the buyer can select a store location to pick up their purchase.
8484
85-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
85+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
8686
`,
8787
image: 'supported-locations-local-pickup.png',
8888
},
@@ -91,10 +91,19 @@ See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
9191
description: `
9292
Point in checkout where the buyer can select a pickup point to have their purchase delivered to.
9393
94-
See [all extensions targets](/docs/api/checkout-ui-extensions/targets).
94+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
9595
`,
9696
image: 'supported-locations-pickup-points.png',
9797
},
98+
{
99+
title: 'Overlays',
100+
description: `
101+
Static extension targets that floats above the checkout.
102+
103+
Review [all extensions targets](/docs/api/checkout-ui-extensions/targets).
104+
`,
105+
image: 'supported-locations-chat.png',
106+
},
98107
{
99108
title: 'One-page checkout',
100109
description: `
@@ -131,6 +140,15 @@ Review [all **Thank you** page extensions targets](/docs/api/checkout-ui-extensi
131140
`,
132141
image: 'supported-locations-order-summary-thank-you.png',
133142
},
143+
{
144+
title: 'Overlays',
145+
description: `
146+
Static extension targets that floats above the Thank you page.
147+
148+
Review [all **Thank you** page extensions targets](/docs/api/checkout-ui-extensions/targets).
149+
`,
150+
image: 'supported-locations-chat-thank-you.png',
151+
},
134152
],
135153
},
136154
{

Diff for: ‎packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/locale-api.doc.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const generateCodeBlockForLocaleApi = (title: string, fileName: string) =>
77
const data: ReferenceEntityTemplateSchema = {
88
name: 'Locale API',
99
description:
10-
'The Locale API allows the extension to retreive the merchants locale.',
10+
"The Locale API allows the extension to retrieve the merchant's locale.",
1111
isVisualComponent: false,
1212
type: 'APIs',
1313
definitions: [

0 commit comments

Comments
 (0)