Skip to content

Commit

Permalink
updates Sheet component and Customer Privacy API (#1924)
Browse files Browse the repository at this point in the history 
* updates Sheet component and Customer Privacy API

* adds changelog

* add updated helper.docs file

* updates tracking consent metafield types

* feedback on examples

---------

Co-authored-by: Igor de Oliveira Martins <igor.deoliveiramartins@shopify.com>
  • Loading branch information
@rcaplanshopify @oliverigor
rcaplanshopify and oliverigor committed May 6, 2024
1 parent a7a39ba commit a4f275a
Show file tree
Hide file tree
Showing 18 changed files with 674 additions and 215 deletions.
7 changes: 7 additions & 0 deletions .changeset/orange-ants-sniff.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@shopify/ui-extensions': minor
'@shopify/ui-extensions-react': minor
---

- Adds the ability to read and write tracking consent metafield data to the Customer Privacy API.
- Updates the `Sheet` component and examples.
214 changes: 94 additions & 120 deletions ...tensions/docs/surfaces/checkout/reference/examples/ui-components/sheet-consent.example.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ import {
Button,
Link,
TextBlock,
BlockStack,
InlineLayout,
InlineStack,
} from '@shopify/ui-extensions/checkout';

export default extension(
Expand All @@ -19,127 +16,104 @@ export default extension(
ui,
},
) => {
customerPrivacy.subscribe(
({shouldShowBanner}) => {
const sheetId = 'sheet-consent';
const sheet = root.createComponent(
Sheet,
{
id: sheetId,
heading: 'We value your privacy',
accessibilityLabel:
'A sheet that collects privacy consent preferences',
defaultOpen: shouldShowBanner,
},
);
const primaryFragment = root.createFragment();
const secondaryFragment =
root.createFragment();
const handleConsentChange = async ({
analytics,
marketing,
preferences,
saleOfData,
}) => {
try {
const result =
await applyTrackingConsentChange({
type: 'changeVisitorConsent',
analytics,
marketing,
preferences,
saleOfData,
});

const handleConsentChange = async ({
analytics,
marketing,
preferences,
saleOfData,
}) => {
try {
const result =
await applyTrackingConsentChange({
type: 'changeVisitorConsent',
analytics,
marketing,
preferences,
saleOfData,
});
// Check if operation was successful
if (result) {
ui.overlay.close(sheetId);
} else {
// Handle failure case here
}
} catch (error) {
// Handle error case here
}
};

// Check if operation was successful
if (result) {
ui.overlay.close(sheetId);
} else {
// Handle failure case here
}
} catch (error) {
// Handle error case here
}
};
const blockStack = root.createComponent(
BlockStack,
{},
[
root.createComponent(
TextBlock,
null,
[
'We and our partners use cookies and other technologies to improve your experience, measure performance, and tailor marketing. Details in our ',
root.createComponent(
Link,
null,
'Privacy Policy',
),
],
),
root.createComponent(
InlineLayout,
{
columns: ['fill', 'auto'],
blockAlignment: 'baseline',
minBlockSize: 'fill',
},
[
root.createComponent(
InlineStack,
{inlineAlignment: 'start'},
[
root.createComponent(
Link,
{
onPress: () =>
console.log(
'Open another overlay to manage preferences',
),
},
'Manage preferences',
),
],
),
root.createComponent(
InlineStack,
{inlineAlignment: 'end'},
[
root.createComponent(
Button,
{
kind: 'secondary',
onPress: () =>
handleConsentChange({
analytics: false,
marketing: false,
preferences: false,
saleOfData: false,
}),
},
'Decline',
),
root.createComponent(
Button,
{
onPress: () =>
handleConsentChange({
analytics: true,
marketing: true,
preferences: true,
saleOfData: true,
}),
},
'Accept',
),
],
),
],
),
],
);
const declineButton = root.createComponent(
Button,
{
kind: 'secondary',
onPress: () =>
handleConsentChange({
analytics: false,
marketing: false,
preferences: false,
saleOfData: false,
}),
},
'I decline',
);

const agreeButton = root.createComponent(
Button,
{
kind: 'secondary',
onPress: () =>
handleConsentChange({
analytics: true,
marketing: true,
preferences: true,
saleOfData: true,
}),
},
'I agree',
);

sheet.appendChild(blockStack);
root.appendChild(sheet);
const settingsButton = root.createComponent(
Button,
{
kind: 'secondary',
},
'Settings',
);

primaryFragment.appendChild(declineButton);
primaryFragment.appendChild(agreeButton);
secondaryFragment.appendChild(settingsButton);

const sheetId = 'sheet-consent';
const sheet = root.createComponent(Sheet, {
id: sheetId,
heading: 'We value your privacy',
accessibilityLabel:
'A sheet that collects privacy consent preferences',
defaultOpen:
customerPrivacy.current.shouldShowBanner,
primaryAction: primaryFragment,
secondaryAction: secondaryFragment,
});

const textBlock = root.createComponent(
TextBlock,
null,
[
'We and our partners use cookies and other technologies to improve your experience, measure performance, and tailor marketing. Details in our ',
root.createComponent(
Link,
null,
'Privacy Policy',
),
],
);

sheet.appendChild(textBlock);
root.appendChild(sheet);
},
);
109 changes: 46 additions & 63 deletions ...ensions/docs/surfaces/checkout/reference/examples/ui-components/sheet-consent.example.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ import {
Link,
Sheet,
TextBlock,
BlockStack,
InlineLayout,
InlineStack,
useApi,
useSubscription,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
Expand All @@ -23,10 +19,6 @@ function Extension() {
ui,
} = useApi();

const {shouldShowBanner} = useSubscription(
customerPrivacy,
);

const sheetId = 'sheet-consent';

const handleConsentChange = async ({
Expand Down Expand Up @@ -61,62 +53,53 @@ function Extension() {
id={sheetId}
heading="We value your privacy"
accessibilityLabel="A sheet that collects privacy consent preferences"
defaultOpen={shouldShowBanner}
>
<BlockStack>
<TextBlock>
We and our partners use cookies and
other technologies to improve your
experience, measure performance, and
tailor marketing. Details in our{' '}
<Link>Privacy Policy</Link>
</TextBlock>
<InlineLayout
columns={['fill', 'auto']}
blockAlignment="baseline"
minBlockSize="fill"
defaultOpen={customerPrivacy.current.shouldShowBanner}
primaryAction={
<>
<Button
kind="secondary"
onPress={() =>
handleConsentChange({
analytics: false,
marketing: false,
preferences: false,
saleOfData: false,
})
}
>
I decline
</Button>
<Button
kind="secondary"
onPress={() =>
handleConsentChange({
analytics: true,
marketing: true,
preferences: true,
saleOfData: true,
})
}
>
I agree
</Button>
</>
}
secondaryAction={
<Button
kind="plain"
overlay={
// Open a settings modal
}
>
<InlineStack inlineAlignment="start">
<Link
onPress={() =>
console.log(
'Open another overlay to manage preferences',
)
}
>
Manage preferences
</Link>
</InlineStack>

<InlineStack inlineAlignment="end">
<Button
kind="secondary"
onPress={() =>
handleConsentChange({
analytics: false,
marketing: false,
preferences: false,
saleOfData: false,
})
}
>
Decline
</Button>
<Button
onPress={() =>
handleConsentChange({
analytics: true,
marketing: true,
preferences: true,
saleOfData: true,
})
}
>
Accept
</Button>
</InlineStack>
</InlineLayout>
</BlockStack>
Settings
</Button>
}
>
<TextBlock>
This website uses cookies to ensure you
get the best experience on our website.
<Link>Privacy Policy</Link>
</TextBlock>
</Sheet>
);
}
Loading

0 comments on commit a4f275a

Please sign in to comment.