Protect Privacy with a Tracking Consent Banner

1// More code here...
2
3   <CommerceApiProvider
4            shortCode={commerceApiConfig.parameters.shortCode}
5            clientId={commerceApiConfig.parameters.clientId}
6            organizationId={commerceApiConfig.parameters.organizationId}
7            siteId={locals.site?.id}
8            locale={locals.locale?.id}
9            currency={locals.locale?.preferredCurrency}
10            redirectURI={`${appOrigin}/callback`}
11            proxy={`${appOrigin}${commerceApiConfig.proxyPath}`}
12            headers={headers}
13            // Add your chosen default DNT state.
14            defaultDnt={false}
15            // Uncomment 'enablePWAKitPrivateClient' to use SLAS private client login flows.
16            // Make sure to also enable useSLASPrivateClient in ssr.js when enabling this setting.
17            // enablePWAKitPrivateClient={true}
18            logger={createLogger({packageName: 'commerce-sdk-react'})}
19        >
20            <MultiSiteProvider site={locals.site} locale={locals.locale} buildUrl={locals.buildUrl}>
21                <ChakraProvider theme={theme}>{children}</ChakraProvider>
22            </MultiSiteProvider>
23            <ReactQueryDevtools />
24   </CommerceApiProvider>
25
26   // More code here...

1import React, {useEffect} from 'react'
2import PropTypes from 'prop-types'
3import {FormattedMessage, useIntl} from 'react-intl'
4import {
5    Button,
6    Modal,
7    ModalContent,
8    ModalBody,
9    ModalCloseButton,
10    useDisclosure,
11    Heading,
12    Stack,
13    Text,
14    Flex
15} from '@salesforce/retail-react-app/app/components/shared/ui'
16import {useDNT} from '@salesforce/commerce-sdk-react'
17import {useLocation} from 'react-router-dom'
18
19export const DntNotification = ({isOpen, onOpen, onClose}) => {
20    const {selectedDnt, updateDNT} = useDNT()
21    const {formatMessage} = useIntl()
22    const location = useLocation()
23
24    useEffect(() => {
25        if (selectedDnt === undefined) {
26            onOpen()
27        } else {
28            onClose()
29        }
30    }, [location, selectedDnt])
31
32    const onCloseNotification = () => {
33        updateDNT(null)
34        onClose()
35    }
36
37    return (
38        <Modal
39            size="sm"
40            data-testid="sf-dnt-notification"
41            blockScrollOnMount={false}
42            closeOnOverlayClick={false}
43            trapFocus={false}
44            isOpen={isOpen}
45            onOpen={onOpen}
46            onClose={onCloseNotification}
47        >
48            <ModalContent
49                position="fixed"
50                bottom="4"
51                right="4"
52                maxW="400px"
53                pointerEvents="all"
54                containerProps={{
55                    pointerEvents: 'none'
56                }}
57                border="2px solid"
58            >
59                <ModalCloseButton
60                    aria-label={formatMessage({
61                        id: 'dnt_notification.button.assistive_msg.close',
62                        defaultMessage: 'Close consent tracking form'
63                    })}
64                />
65                <ModalBody pb={8} bg="white" marginTop={4}>
66                    <Heading as="h3" fontSize={25} width="100%" marginBottom={5}>
67                        <FormattedMessage
68                            defaultMessage="Your Privacy Matters to Us"
69                            id="dnt_notification.title"
70                        />
71                    </Heading>
72                    <Flex direction="column">
73                        <Text>
74                            <FormattedMessage
75                                defaultMessage="We collect data to improve your experience, deliver personalized content or ads, and better understand how our site is used. By selecting 'Accept,' you agree to our use of tracking technologies. "
76                                id="dnt_notification.description"
77                            />
78                        </Text>
79                        <Stack direction="column" spacing={4} mt={4} align="flex-end">
80                        <>
81                            <Button
82                                onClick={() => {
83                                    updateDNT(true)
84                                    onClose()
85                                }}
86                                width="100%"
87                            >
88                                <FormattedMessage defaultMessage="Decline" id="dnt_notification.button.decline" />
89                            </Button>
90                            <Button
91                                onClick={() => {
92                                    updateDNT(false)
93                                    onClose()
94                                }}
95                                width="100%"
96                            >
97                                <FormattedMessage defaultMessage="Accept" id="dnt_notification.button.accept" />
98                            </Button>
99                        </>
100                        </Stack>
101                    </Flex>
102                </ModalBody>
103            </ModalContent>
104        </Modal>
105    )
106}
107
108DntNotification.propTypes = {
109    isOpen: PropTypes.bool.isRequired,
110    onOpen: PropTypes.func.isRequired,
111    onClose: PropTypes.func.isRequired
112}
113
114/**
115 *
116 * @returns {Object} - Object props to be passed into the DntNotification component
117 */
118export const useDntNotification = () => {
119    const {isOpen, onOpen, onClose} = useDisclosure()
120
121    return {
122        isOpen,
123        onOpen,
124        onClose
125    }
126}

1import {
2    DntNotification,
3    useDntNotification
4} from '{overridesDir}/app/hooks/use-dnt-notification'
5
6const App = (props) => {
7   ...
8   const dntNotification = useDntNotification()
9   ...
10
11   return (
12        ...
13        // Put the consent tracking banner in your chosen location in your code by adding the dntNotification component.
14        <DntNotification {...dntNotification} />
15        ...
16   )
17}

1import {
2    useDNT
3} from '@salesforce/commerce-sdk-react'
4function reportClickTracking() {
5  const {effectiveDnt} = useDNT()
6  if (effectiveDnt) {
7    return
8  }
9  return fetch('https://tracking.example.com/collect')
10}