Skip to content

Commit 5099b8d

Browse files
elisaseijaselisaseijas
committed
Merge descriptions update - surface agnostic + minor tweaks.
2 parents 72f8ede + 56c4f02 commit 5099b8d

File tree

113 files changed

+6920
-376
lines changed

Some content is hidden

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

113 files changed

+6920
-376
lines changed

Diff for: ‎packages/ui-extensions/buildTargetDts.ts

+4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ function copyComponentDefinitions({
2222
buildPath: string;
2323
surface: string;
2424
}) {
25+
if (surface === 'checkout') {
26+
// HACK: Checkout doesn't yet have `<component>.d.ts` files, so we can't process them
27+
return true;
28+
}
2529
const componentsSrcPath = join(srcPath, 'components');
2630
const componentsBuildPath = join(
2731
buildPath,

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/build-docs.sh

+12-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ fi
3232
COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated"
3333
COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
3434

35-
3635
if echo "$PWD" | grep -q '\checkout-web'; then
3736
# We are generating docs from the private package, which does not have other surfaces aside from checkout
3837
eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES
@@ -72,6 +71,7 @@ if [ $sed_exit -ne 0 ]; then
7271
fail_and_exit $sed_exit
7372
fi
7473

74+
copy_generated_docs_to_shopify_dev() {
7575
# Copy the generated docs to shopify-dev
7676
if [ -d $SHOPIFY_DEV_PATH ]; then
7777
mkdir -p $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/checkout_extensions/$API_VERSION
@@ -92,5 +92,15 @@ if [ -d $SHOPIFY_DEV_PATH ]; then
9292
echo "Docs: https://shopify-dev.myshopify.io/docs/api/checkout-ui-extensions"
9393
fi
9494
else
95-
echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH."
95+
echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH."
96+
fi
97+
}
98+
99+
if [ -d $SHOPIFY_DEV_PATH ]; then
100+
copy_generated_docs_to_shopify_dev
101+
else
102+
# We could be in the monorepo and need to go up several more directories to find shopify-dev
103+
SHOPIFY_DEV_PATH="../../../../../../shopify-dev"
104+
copy_generated_docs_to_shopify_dev
96105
fi
106+

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
CHECKOUT_API_PROPERTIES_DESCRIPTION,
66
getLinksByTag,
77
getHookExample,
8+
getExample,
89
} from '../helper.docs';
910

1011
const data: ReferenceEntityTemplateSchema = {
@@ -42,7 +43,11 @@ const data: ReferenceEntityTemplateSchema = {
4243
type: 'UseAttributeValuesGeneratedType',
4344
},
4445
],
45-
defaultExample: getHookExample('attribute-values'),
46+
defaultExample: getExample('attribute-values', ['jsx', 'js']),
47+
examples: {
48+
description: '',
49+
examples: [getExample('attributes/attribute-change', ['jsx', 'js'])],
50+
},
4651
related: getLinksByTag('apis'),
4752
};
4853

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const data: ReferenceEntityTemplateSchema = {
3838
Installs a function for intercepting and preventing progress on checkout.
3939
To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration.
4040
If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.
41+
\`useBuyerJourneyIntercept()\` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed.
4142
`,
4243
type: 'UseBuyerJourneyInterceptGeneratedType',
4344
},

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
import {
4+
getExample,
5+
getLinksByTag,
6+
STANDARD_API_PROPERTIES_DESCRIPTION,
7+
REQUIRES_PROTECTED_CUSTOMER_DATA,
8+
} from '../helper.docs';
9+
10+
const data: ReferenceEntityTemplateSchema = {
11+
name: 'Localized Fields',
12+
description: 'The API for interacting with localized fields.',
13+
isVisualComponent: false,
14+
requires: REQUIRES_PROTECTED_CUSTOMER_DATA,
15+
category: 'APIs',
16+
type: 'API',
17+
definitions: [
18+
{
19+
title: 'StandardApi',
20+
description: STANDARD_API_PROPERTIES_DESCRIPTION,
21+
type: 'Docs_Standard_LocalizedFieldsApi',
22+
},
23+
{
24+
title: 'useLocalizedFields',
25+
description:
26+
'Returns the current localized fields and re-renders your component if the values change.',
27+
type: 'UseLocalizedFieldsGeneratedType',
28+
},
29+
{
30+
title: 'useLocalizedField',
31+
description:
32+
'Returns the current localized fields and re-renders your component if the values change.',
33+
type: 'UseLocalizedFieldGeneratedType',
34+
},
35+
],
36+
defaultExample: getExample('localized-fields/default', ['jsx', 'js']),
37+
related: getLinksByTag('apis'),
38+
};
39+
40+
export default data;

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/metafields.doc.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
REQUIRES_PROTECTED_CUSTOMER_DATA,
66
STANDARD_API_PROPERTIES_DESCRIPTION,
77
CHECKOUT_API_PROPERTIES_DESCRIPTION,
8+
getExample,
89
} from '../helper.docs';
910

1011
const data: ReferenceEntityTemplateSchema = {
@@ -49,6 +50,7 @@ const data: ReferenceEntityTemplateSchema = {
4950
type: 'UseApplyMetafieldsChangeGeneratedType',
5051
},
5152
],
53+
defaultExample: getExample('metafields/default', ['jsx', 'js', 'toml']),
5254
related: getLinksByTag('apis'),
5355
};
5456

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts

-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import {
77
ORDER_STATUS_API_PROPERTIES_DESCRIPTION,
88
} from '../helper.docs';
99

10-
// added temporarily to keep a note that the order status api docs have been moved to customer accounts
11-
// can be removed from 2025-01 on
12-
interface OrderStatusApiEmpty {}
13-
1410
const data: ReferenceEntityTemplateSchema = {
1511
name: 'Order',
1612
description:

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/apis/payment-options.doc.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ const data: ReferenceEntityTemplateSchema = {
3030
},
3131
],
3232
related: getLinksByTag('apis'),
33-
defaultExample: getHookExample('payments/use-selected-payment-options'),
33+
defaultExample: getHookExample('payments/use-available-payment-options'),
3434
examples: {
3535
description: '',
36-
examples: [getHookExample('payments/use-available-payment-options')],
36+
examples: [getHookExample('payments/use-selected-payment-options')],
3737
},
3838
};
3939

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/analytics-publish.example.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {extension} from '@shopify/ui-extensions-react/checkout';
21
import {useEffect} from 'react';
32

3+
import {extension} from '@shopify/ui-extensions/checkout';
4+
45
export default extension(
56
'purchase.checkout.block.render',
67
(root, {analytics}) => {

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/attribute-values.example.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
extension,
3+
Text,
4+
} from '@shopify/ui-extensions/checkout';
5+
6+
export default extension(
7+
'purchase.checkout.block.render',
8+
(root, {attributes}) => {
9+
attributes.subscribe(() => {
10+
renderUI();
11+
});
12+
13+
function renderUI() {
14+
const buyerSelectedFreeTShirt =
15+
attributes.current?.find(
16+
(attr) =>
17+
attr.key ===
18+
'buyerSelectedFreeTShirt',
19+
)?.value;
20+
21+
const tshirtSize = attributes.current?.find(
22+
(attr) => attr.key === 'tshirtSize',
23+
)?.value;
24+
25+
if (
26+
Boolean(buyerSelectedFreeTShirt) === true
27+
) {
28+
root.replaceChildren(
29+
root.createComponent(
30+
Text,
31+
undefined,
32+
`You selected a free t-shirt, size: ${tshirtSize}`,
33+
),
34+
);
35+
} else {
36+
root.replaceChildren();
37+
}
38+
}
39+
40+
renderUI();
41+
},
42+
);

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/attributes/attribute-change.example.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {
2+
extension,
3+
BlockStack,
4+
Button,
5+
Text,
6+
} from '@shopify/ui-extensions/checkout';
7+
8+
export default extension(
9+
'purchase.checkout.block.render',
10+
(
11+
root,
12+
{
13+
attributes,
14+
instructions,
15+
applyAttributeChange,
16+
},
17+
) => {
18+
let giftWrap = false;
19+
const text = root.createComponent(Text);
20+
const button = root.createComponent(Button, {
21+
onPress: async () => {
22+
const result = giftWrap
23+
? await applyAttributeChange({
24+
type: 'removeAttribute',
25+
key: 'giftWrap',
26+
})
27+
: await applyAttributeChange({
28+
type: 'updateAttribute',
29+
key: 'giftWrap',
30+
value: 'true',
31+
});
32+
if (result.type === 'error') {
33+
console.error(result.message);
34+
}
35+
},
36+
});
37+
const blockStack = root.createComponent(
38+
BlockStack,
39+
{
40+
spacing: 'tight',
41+
},
42+
[text, button],
43+
);
44+
45+
attributes.subscribe(updateUI);
46+
instructions.subscribe(updateUI);
47+
48+
function updateUI() {
49+
giftWrap = Boolean(
50+
attributes.current?.find(
51+
(attr) => attr.key === 'giftWrap',
52+
)?.value,
53+
);
54+
55+
text.replaceChildren(
56+
`Gift wrapping: ${giftWrap ? 'Added' : 'Not set'}`,
57+
);
58+
button.updateProps({
59+
disabled:
60+
!instructions.current?.attributes
61+
?.canUpdateAttributes,
62+
});
63+
button.replaceChildren(
64+
giftWrap
65+
? 'Remove gift wrap'
66+
: 'Add gift wrap',
67+
);
68+
}
69+
updateUI();
70+
71+
root.append(blockstack);
72+
},
73+
);

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/attributes/attribute-change.example.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
reactExtension,
3+
BlockStack,
4+
Button,
5+
Text,
6+
useAttributeValues,
7+
useApplyAttributeChange,
8+
useInstructions,
9+
} from '@shopify/ui-extensions-react/checkout';
10+
11+
export default reactExtension(
12+
'purchase.checkout.block.render',
13+
() => <Extension />,
14+
);
15+
16+
function Extension() {
17+
const [giftWrapValue] = useAttributeValues([
18+
'giftWrap',
19+
]);
20+
const giftWrap = Boolean(giftWrapValue);
21+
const applyAttributeChange =
22+
useApplyAttributeChange();
23+
const instructions = useInstructions();
24+
25+
async function toggleGiftWrap() {
26+
const result = giftWrap
27+
? await applyAttributeChange({
28+
type: 'removeAttribute',
29+
key: 'giftWrap',
30+
})
31+
: await applyAttributeChange({
32+
type: 'updateAttribute',
33+
key: 'giftWrap',
34+
value: 'true',
35+
});
36+
if (result.type === 'error') {
37+
console.error(result.message);
38+
}
39+
}
40+
41+
return (
42+
<BlockStack spacing="tight">
43+
<Text>
44+
Gift wrapping:{' '}
45+
{giftWrap ? 'Added' : 'Not set'}
46+
</Text>
47+
<Button
48+
onPress={toggleGiftWrap}
49+
disabled={
50+
!instructions.attributes
51+
.canUpdateAttributes
52+
}
53+
>
54+
{giftWrap
55+
? 'Remove gift wrap'
56+
: 'Add gift wrap'}
57+
</Button>
58+
</BlockStack>
59+
);
60+
}

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/cart-instructions/attributes.example.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function Extension() {
2121
) {
2222
return (
2323
<Button
24-
onPress={() =>
24+
onClick={() =>
2525
applyAttributeChange({
2626
type: 'updateAttribute',
2727
key: 'loyaltyPoints',
@@ -34,7 +34,7 @@ function Extension() {
3434
);
3535
} else {
3636
return (
37-
<Banner status="warning">
37+
<Banner tone="warning">
3838
Loyalty points are unavailable
3939
</Banner>
4040
);

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/cart-instructions/cart-lines-add.example.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function Extension() {
1919
if (instructions.lines.canAddCartLine) {
2020
return (
2121
<Button
22-
onPress={() =>
22+
onClick={() =>
2323
applyCartLinesChange({
2424
type: 'addCartLine',
2525
merchandiseId:
@@ -33,7 +33,7 @@ function Extension() {
3333
);
3434
} else {
3535
return (
36-
<Banner status="warning">
36+
<Banner tone="warning">
3737
The products in your cart cannot be
3838
modified
3939
</Banner>

Diff for: ‎packages/ui-extensions/docs/surfaces/checkout/reference/examples/cart-instructions/delivery.example.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function Extension() {
2121
) {
2222
return (
2323
<Button
24-
onPress={() =>
24+
onClick={() =>
2525
applyShippingAddressChange({
2626
type: 'updateShippingAddress',
2727
address: {
@@ -35,7 +35,7 @@ function Extension() {
3535
);
3636
} else {
3737
return (
38-
<Banner status="warning">
38+
<Banner tone="warning">
3939
Shipping address cannot be modified
4040
</Banner>
4141
);

0 commit comments

Comments
 (0)