@W-17594891 Update Wording of Interface In DNT hook

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## v3.3.0-dev
+- (These will be merged later as the SDK changes for DNT get merged)
 - Updated useDNT and auth to expose more DNT features [#2109](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2109)
+- Improve wording for DNT interface [#2182](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2182/files)
 
 ## v3.2.0-dev (Oct 29, 2024)
 - Allow cookies for ShopperLogin API [#2190](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2190

packages/commerce-sdk-react/src/auth/index.ts

@@ -320,7 +320,7 @@ class Auth {
      * The DNT cookie being undefined means that there is a necessity to
      * get the user's input for consent tracking, but not that there is no
      * DNT value to apply to analytics layers. DNT value will default to
-     * a certain value and this is reflected by effectiveDoNotTrackValue.
+     * a certain value and this is reflected by effectiveDnt.
      *
      * If the cookie value is invalid, then it will be deleted in this function.
      *
@@ -346,17 +346,17 @@ class Auth {
         if (options?.includeDefaults) {
             const defaultDnt = this.defaultDnt
 
-            let effectiveDoNotTrackValue
+            let effectiveDnt
             const dntCookie = dntCookieVal === '1' ? true : dntCookieVal === '0' ? false : undefined
             if (dntCookie !== undefined) {
-                effectiveDoNotTrackValue = dntCookie
+                effectiveDnt = dntCookie
             } else {
                 // If the cookie is not set, read the defaultDnt preference.
                 // If defaultDnt doesn't exist, default to false, following SLAS default for dnt
-                effectiveDoNotTrackValue = defaultDnt !== undefined ? defaultDnt : false
+                effectiveDnt = defaultDnt !== undefined ? defaultDnt : false
             }
 
-            return effectiveDoNotTrackValue
+            return effectiveDnt
         }
 
         return dntCookieStatus

packages/commerce-sdk-react/src/hooks/useDNT.test.ts

@@ -43,26 +43,26 @@ describe('useDNT tests', () => {
         expect(mockSetDnt).toHaveBeenCalledWith(true)
     })
 
-    it('selectedDoNotTrackValue should be false if dw_dnt cookie is "1"', () => {
-        const {selectedDoNotTrackValue} = useDNT()
-        expect(selectedDoNotTrackValue).toBe(true)
+    it('selectedDnt should be false if dw_dnt cookie is "1"', () => {
+        const {selectedDnt} = useDNT()
+        expect(selectedDnt).toBe(true)
     })
 
-    it('selectedDoNotTrackValue should be false if dw_dnt cookie is "0"', () => {
+    it('selectedDnt should be false if dw_dnt cookie is "0"', () => {
         mockGetDnt.mockReturnValue(false)
-        const {selectedDoNotTrackValue} = useDNT()
-        expect(selectedDoNotTrackValue).toBe(false)
+        const {selectedDnt} = useDNT()
+        expect(selectedDnt).toBe(false)
     })
 
-    it('selectedDoNotTrackValue should be undefined if dw_dnt cookie is not defined', () => {
+    it('selectedDnt should be undefined if dw_dnt cookie is not defined', () => {
         mockGetDnt.mockReturnValueOnce(undefined)
-        const {selectedDoNotTrackValue} = useDNT()
-        expect(selectedDoNotTrackValue).toBeUndefined()
+        const {selectedDnt} = useDNT()
+        expect(selectedDnt).toBeUndefined()
     })
 
-    it('selectedDoNotTrackValue should be undefined if dw_dnt cookie is invalid', () => {
+    it('selectedDnt should be undefined if dw_dnt cookie is invalid', () => {
         mockGetDnt.mockReturnValueOnce(undefined)
-        const {selectedDoNotTrackValue} = useDNT()
-        expect(selectedDoNotTrackValue).toBeUndefined()
+        const {selectedDnt} = useDNT()
+        expect(selectedDnt).toBeUndefined()
     })
 })

packages/commerce-sdk-react/src/hooks/useDNT.ts

@@ -7,10 +7,11 @@
 import useAuthContext from './useAuthContext'
 
 interface useDntReturn {
-    selectedDoNotTrackValue: boolean | undefined
+    selectedDnt: boolean | undefined
     dntStatus: boolean | undefined
-    effectiveDoNotTrackValue: boolean | undefined
+    effectiveDnt: boolean | undefined
     updateDNT: (preference: boolean | null) => Promise<void>
+    updateDnt: (preference: boolean | null) => Promise<void>
 }
 
 /**
@@ -20,33 +21,36 @@ interface useDntReturn {
  * @returns {Object} - The returned object containing DNT states and function to update preference
  * @property {boolean | undefined} dntStatus @deprecated - DNT user preference. Used to determine
  *              if the consent tracking form should be rendered
- * **Deprecated since version 3.1.0 Use selectedDoNotTrackValue instead.**
- * @property {boolean} selectedDoNotTrackValue - DNT user preference. Used to determine
+ * **Deprecated since version 3.1.0 Use selectedDnt instead.**
+ * @property {boolean} selectedDnt - DNT user preference. Used to determine
  *              if the consent tracking form should be rendered
- * @property {boolean} effectiveDoNotTrackValue - effective DNT value to apply to
- *              analytics layers. Takes defaultDnt into account when selectedDoNotTrackValue is undefined.
+ * @property {boolean} effectiveDnt - effective DNT value to apply to
+ *              analytics layers. Takes defaultDnt into account when selectedDnt is undefined.
  *              If defaultDnt is undefined as well, then SDK default is used.
  * @property {function} updateDNT - takes a DNT choice and creates the dw_dnt
  *              cookie and reauthorizes with SLAS
  *
  */
 const useDNT = (): useDntReturn => {
     const auth = useAuthContext()
-    const selectedDoNotTrackValue = auth.getDnt()
-    const effectiveDoNotTrackValue = auth.getDnt({
+    const selectedDnt = auth.getDnt()
+    const effectiveDnt = auth.getDnt({
         includeDefaults: true
     })
     const updateDNT = async (preference: boolean | null) => {
         await auth.setDnt(preference)
     }
-    const dntStatus = selectedDoNotTrackValue
+    const updateDnt = updateDNT
+    const dntStatus = selectedDnt
 
     return {
-        selectedDoNotTrackValue,
-        effectiveDoNotTrackValue,
-        /** @deprecated - Deprecated since version 3.1.0. Use selectedDoNotTrackValue instead. */
+        selectedDnt,
+        effectiveDnt,
+        /** @deprecated - Deprecated since version 3.1.0. Use selectedDnt instead. */
         dntStatus,
-        updateDNT
+        /** @deprecated - Deprecated since version 3.1.0. Use updateDnt instead. */
+        updateDNT,
+        updateDnt
     }
 }
 

packages/template-retail-react-app/CHANGELOG.md

@@ -1,8 +1,9 @@
 ## v6.0.0
-- (These will be merged later as the feature branch gets merged into V5 template retail react app branch)
+- (These will be merged later as the feature branch gets merged into V6 template retail react app branch)
 - DNT UI: [#2017](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2017)
 - Support DNT in analytics: [#2109](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2109)
 - DNT E2E: [#2083](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2083)
+- Improve wording for DNT interface [#2182](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2182/files)
 
 ## v5.1.0-dev (TBD)
 

packages/template-retail-react-app/app/components/_app/index.test.js

@@ -51,7 +51,7 @@ jest.mock('@salesforce/commerce-sdk-react', () => {
     const originalModule = jest.requireActual('@salesforce/commerce-sdk-react')
     return {
         ...originalModule,
-        useDNT: () => ({selectedDoNotTrackValue: undefined, updateDNT: mockUpdateDNT})
+        useDNT: () => ({selectedDnt: undefined, updateDNT: mockUpdateDNT})
     }
 })
 

packages/template-retail-react-app/app/hooks/use-dnt-notification.js

@@ -24,17 +24,17 @@ import {useDNT} from '@salesforce/commerce-sdk-react'
 import {useLocation} from 'react-router-dom'
 
 export const DntNotification = ({isOpen, onOpen, onClose}) => {
-    const {selectedDoNotTrackValue, updateDNT} = useDNT()
+    const {selectedDnt, updateDNT} = useDNT()
     const {formatMessage} = useIntl()
     const location = useLocation()
 
     useEffect(() => {
-        if (selectedDoNotTrackValue === undefined) {
+        if (selectedDnt === undefined) {
             onOpen()
         } else {
             onClose()
         }
-    }, [location, selectedDoNotTrackValue])
+    }, [location, selectedDnt])
 
     const onCloseNotification = () => {
         updateDNT(null)

packages/template-retail-react-app/app/hooks/use-einstein.js

@@ -392,7 +392,7 @@ export class EinsteinAPI {
 
 const useEinstein = () => {
     const api = useCommerceApi()
-    const {effectiveDoNotTrackValue} = useDNT()
+    const {effectiveDnt} = useDNT()
     const {getTokenWhenReady} = useAccessToken()
     const {
         app: {einsteinAPI: config}
@@ -410,9 +410,9 @@ const useEinstein = () => {
                 einsteinId,
                 siteId,
                 isProduction,
-                dnt: effectiveDoNotTrackValue
+                dnt: effectiveDnt
             }),
-        [host, einsteinId, siteId, isProduction, effectiveDoNotTrackValue]
+        [host, einsteinId, siteId, isProduction, effectiveDnt]
     )
     const [isLoading, setIsLoading] = useState(false)
     const [recommendations, setRecommendations] = useState([])

packages/test-commerce-sdk-react/app/pages/use-dnt.tsx

@@ -13,9 +13,9 @@ const buttonStyle = {
 
 const UseDntHook = () => {
     const [displayButton, setDisplayButton] = useState(false)
-    const {selectedDoNotTrackValue, updateDNT} = useDNT()
+    const {selectedDnt, updateDNT} = useDNT()
     useEffect(() => {
-        if (selectedDoNotTrackValue === undefined) setDisplayButton(true)
+        if (selectedDnt === undefined) setDisplayButton(true)
     }, [])
 
     return displayButton ? (