Skip to content

Commit fd91756

Browse files
lsitlsit
authored
Migrate Customer account target examples to Preact (#3252)
1 parent 68650e1 commit fd91756

File tree

38 files changed

+445
-460
lines changed

38 files changed

+445
-460
lines changed

‎.changeset/flat-cows-count.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/ui-extensions': patch
3+
---
4+
5+
Migrate customer account target examples to Preact

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.footer.render-after/default.example.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
import {
2-
BlockStack,
3-
reactExtension,
4-
Text,
5-
useApi,
6-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
73

8-
// 1. Choose an extension target
9-
export default reactExtension(
10-
'customer-account.footer.render-after',
11-
() => <Extension />,
12-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
137

148
function Extension() {
15-
// 2. Use the extension API to gather context from extension
16-
const {extension} = useApi();
17-
18-
// 3. Render a UI
199
return (
20-
<BlockStack>
21-
<Text>target: {extension.target}</Text>
22-
</BlockStack>
10+
<s-stack direction="block">
11+
<s-text>
12+
target: {shopify.extension.target}
13+
</s-text>
14+
</s-stack>
2315
);
2416
}

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-index.block.render/default.example.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import {
2-
reactExtension,
3-
Text,
4-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
53

6-
export default reactExtension(
7-
'customer-account.order-index.block.render',
8-
() => <Extension />,
9-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
107

118
function Extension() {
12-
return <Text>I am a block extension that renders in the Orders section</Text>;
9+
return (
10+
<s-text>
11+
I am a block extension that renders in the
12+
Orders section
13+
</s-text>
14+
);
1315
}

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.block.render/default.example.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
useOrder,
5-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
63

7-
export default reactExtension(
8-
'customer-account.order-status.block.render',
9-
() => <Extension />,
10-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
117

128
function Extension() {
13-
const order = useOrder();
9+
const order = shopify.order.value;
1410

1511
if (order) {
1612
return (
17-
<Banner>
13+
<s-banner>
1814
Please include your order ID ({order.id})
1915
in support requests
20-
</Banner>
16+
</s-banner>
2117
);
2218
}
2319

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.cart-line-item.render-after/default.example.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import {
2-
reactExtension,
3-
Text,
4-
useTarget,
5-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
63

7-
export default reactExtension(
8-
'customer-account.order-status.cart-line-item.render-after',
9-
() => <Extension />,
10-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
117

128
function Extension() {
139
const {
1410
merchandise: {title},
15-
} = useTarget();
16-
return <Text>Line item title: {title}</Text>;
11+
} = shopify.target.value;
12+
13+
return (
14+
<s-text>Line item title: {title}</s-text>
15+
);
1716
}

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.cart-line-list.render-after/default.example.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
useOrder,
5-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
63

7-
export default reactExtension(
8-
'customer-account.order-status.cart-line-list.render-after',
9-
() => <Extension />,
10-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
117

128
function Extension() {
13-
const order = useOrder();
9+
const order = shopify.order.value;
1410

1511
if (order) {
1612
return (
17-
<Banner>
13+
<s-banner>
1814
Please include your order ID ({order.id})
1915
in support requests
20-
</Banner>
16+
</s-banner>
2117
);
2218
}
2319

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.customer-information.render-after/default.example.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
useOrder,
5-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
63

7-
export default reactExtension(
8-
'customer-account.order-status.customer-information.render-after',
9-
() => <Extension />,
10-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
117

128
function Extension() {
13-
const order = useOrder();
9+
const order = shopify.order.value;
1410

1511
if (order) {
1612
return (
17-
<Banner>
13+
<s-banner>
1814
Please include your order ID ({order.id})
1915
in support requests
20-
</Banner>
16+
</s-banner>
2117
);
2218
}
2319

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.fulfillment-details.render-after/default.example.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
53

6-
export default reactExtension(
7-
'customer-account.order-status.fulfillment-details.render-after',
8-
() => <Extension />,
9-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
107

118
function Extension() {
12-
return <Banner>Note that tracking info update is subject to the courier who delivers your order</Banner>;
9+
return (
10+
<s-banner>
11+
Note that tracking info update is subject to
12+
the courier who delivers your order
13+
</s-banner>
14+
);
1315
}

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.payment-details.render-after/default.example.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
53

6-
export default reactExtension(
7-
'customer-account.order-status.fulfillment-details.render-after',
8-
() => <Extension />,
9-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
107

118
function Extension() {
12-
return <Banner>Contact the merchant to complete your payment.</Banner>;
9+
return (
10+
<s-banner>
11+
Contact the merchant to complete your
12+
payment.
13+
</s-banner>
14+
);
1315
}

‎packages/ui-extensions/docs/surfaces/customer-account/reference/examples/targets/customer-account.order-status.return-details.render-after/default.example.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import {
2-
reactExtension,
3-
Banner,
4-
} from '@shopify/ui-extensions-react/customer-account';
1+
import '@shopify/ui-extensions/preact';
2+
import {render} from 'preact';
53

6-
export default reactExtension(
7-
'customer-account.order-status.return-details.render-after',
8-
() => <Extension />,
9-
);
4+
export default async () => {
5+
render(<Extension />, document.body);
6+
};
107

118
function Extension() {
12-
return <Banner>Your return request has been received and is processing</Banner>;
9+
return (
10+
<s-banner>
11+
Your return request has been received and is
12+
processing
13+
</s-banner>
14+
);
1315
}

0 commit comments

Comments
 (0)