Change expiry in consent storage to date string

Author: jsoningram

src/app/page.tsx

@@ -16,7 +16,7 @@ import { useZendeskIframeStyles } from '@/hooks/use-zendesk-iframe-styles';
 import { useZendeskClickHandlers } from '@/hooks/use-zendesk-click-handlers';
 import {
   CONSENT_STORAGE_KEY,
-  DAY_IN_MILLISECONDS,
+  CONSENT_STORAGE_TTL,
   EMBEDDED_TARGET_ELEMENT,
 } from '@/config/common';
 import { ZENDESK_SCRIPT_URL } from '@/config/zendesk';
@@ -47,7 +47,7 @@ export default function Home() {
   const onContinue = useCallback(() => {
     window.firePixelEvent?.('consent');
 
-    setStorageWithExpiry(CONSENT_STORAGE_KEY, true, 30 * DAY_IN_MILLISECONDS);
+    setStorageWithExpiry(CONSENT_STORAGE_KEY, true, CONSENT_STORAGE_TTL);
 
     dispatch({ type: 'SET_LOAD_WIDGET' });
   }, [dispatch]);

src/config/common.ts

@@ -7,6 +7,7 @@ export const DECLINE_BUTTON_TEXT = 'Cancel';
 export const CONSENT_BUTTON_TEXT = 'Continue to Chat';
 export const START_CHAT_BUTTON_TEXT = 'Start Chat';
 export const CONSENT_STORAGE_KEY = 'ddg_consent';
+export const CONSENT_STORAGE_TTL = 30;
 
 /**
  * Determine if using custom domain (e.g., subscription-support.duckduckgo.com)
@@ -23,5 +24,3 @@ export const basePath =
   process.env.NODE_ENV === 'production' && !useCustomDomain
     ? '/zendesk-subscription-support-messenger'
     : '';
-
-export const DAY_IN_MILLISECONDS = 864e5;

src/tests/unit/get-storage-with-expiry.test.ts

@@ -1,5 +1,22 @@
 import { test, expect } from '@playwright/test';
 import { getStorageWithExpiry } from '@/utils/get-storage-with-expiry';
+import { formatDateString } from '@/utils/set-storage-with-expiry';
+
+/**
+ * Calculates an expiry date by adding days to today's date.
+ *
+ * @function calculateExpiryDate
+ * @param {number} days - Number of days to add to today's date
+ *
+ * @returns {string} Expiry date string in YYYY-MM-DD format
+ */
+function calculateExpiryDate(days: number): string {
+  const today = new Date();
+  const expiryDate = new Date(today);
+  expiryDate.setDate(today.getDate() + days);
+
+  return formatDateString(expiryDate);
+}
 
 // localStorage mock
 function createLocalStorageMock() {
@@ -64,7 +81,7 @@ test.describe('getStorageWithExpiry', () => {
   test('should return stored boolean value when item has not expired', () => {
     const item = {
       value: true,
-      expiry: Date.now() + 86400000, // 24 hours from now
+      expiry: calculateExpiryDate(1), // 1 day from now
     };
 
     localStorage.setItem('test-key', JSON.stringify(item));
@@ -77,7 +94,7 @@ test.describe('getStorageWithExpiry', () => {
   test('should return false when stored value is false', () => {
     const item = {
       value: false,
-      expiry: Date.now() + 86400000,
+      expiry: calculateExpiryDate(1),
     };
 
     localStorage.setItem('test-key', JSON.stringify(item));
@@ -88,9 +105,13 @@ test.describe('getStorageWithExpiry', () => {
   });
 
   test('should return null when expired', () => {
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+
     const item = {
       value: true,
-      expiry: Date.now() - 1000, // Expired 1 second ago
+      expiry: formatDateString(yesterday), // Expired yesterday
     };
 
     localStorage.setItem('expired-key', JSON.stringify(item));
@@ -123,7 +144,7 @@ test.describe('getStorageWithExpiry', () => {
 
   test('should return null when structure is invalid - missing value', () => {
     const item = {
-      expiry: Date.now() + 86400000,
+      expiry: calculateExpiryDate(1),
       // value is missing
     };
 
@@ -134,10 +155,10 @@ test.describe('getStorageWithExpiry', () => {
     expect(result).toBeNull();
   });
 
-  test('should return null when expiry is not a number', () => {
+  test('should return null when expiry is not a string', () => {
     const item = {
       value: true,
-      expiry: 'not-a-number',
+      expiry: 1234567890, // Number instead of date string
     };
 
     localStorage.setItem('invalid-expiry-type-key', JSON.stringify(item));
@@ -150,7 +171,7 @@ test.describe('getStorageWithExpiry', () => {
   test('should return null when value is not a boolean', () => {
     const item = {
       value: 'not-a-boolean',
-      expiry: Date.now() + 86400000,
+      expiry: calculateExpiryDate(1),
     };
 
     localStorage.setItem('invalid-value-type-key', JSON.stringify(item));
@@ -175,4 +196,37 @@ test.describe('getStorageWithExpiry', () => {
 
     expect(result).toBeNull();
   });
+
+  test('should return value when expiry date is today', () => {
+    const today = formatDateString(new Date());
+
+    const item = {
+      value: true,
+      expiry: today,
+    };
+
+    localStorage.setItem('today-expiry-key', JSON.stringify(item));
+
+    const result = getStorageWithExpiry('today-expiry-key');
+
+    // Should not be expired since expiry is at start of day (midnight)
+    expect(result).toBe(true);
+  });
+
+  test('should return null when expiry date is before today', () => {
+    const today = new Date();
+    const twoDaysAgo = new Date(today);
+    twoDaysAgo.setDate(today.getDate() - 2);
+
+    const item = {
+      value: true,
+      expiry: formatDateString(twoDaysAgo),
+    };
+
+    localStorage.setItem('past-expiry-key', JSON.stringify(item));
+
+    const result = getStorageWithExpiry('past-expiry-key');
+
+    expect(result).toBeNull();
+  });
 });

src/utils/get-storage-with-expiry.ts

@@ -1,17 +1,19 @@
 import { isBrowser } from './is-browser';
+import { formatDateString } from './set-storage-with-expiry';
 
 /**
  * Retrieves a boolean value from localStorage, checking if it has expired.
+ * Expired and invalid items are automatically removed from storage.
  *
- * If the item has expired or doesn't exist, returns null and removes expired
- * items from storage. Handles invalid JSON by returning null. Returns null
- * when called in a server-side environment where localStorage is not available.
+ * Expiry is compared as date strings (YYYY-MM-DD format), so items expire at
+ * the start of the expiry date (midnight).
  *
  * @function getStorageWithExpiry
  * @param {string} key - The localStorage key to retrieve
  *
- * @returns {boolean | null | undefined} The stored boolean value, or null if expired,
- * missing, invalid, or undefined when called server-side
+ * @returns {boolean | null | undefined} Returns `undefined` when called
+ * server-side, `null` if expired/missing/invalid, or the stored boolean value
+ * if valid and not expired
  */
 export function getStorageWithExpiry(key: string): boolean | null | undefined {
   if (!isBrowser()) {
@@ -31,7 +33,7 @@ export function getStorageWithExpiry(key: string): boolean | null | undefined {
     if (
       typeof item !== 'object' ||
       item === null ||
-      typeof item.expiry !== 'number' ||
+      typeof item.expiry !== 'string' ||
       typeof item.value !== 'boolean'
     ) {
       // Invalid structure
@@ -40,8 +42,10 @@ export function getStorageWithExpiry(key: string): boolean | null | undefined {
       return null;
     }
 
-    // Expired
-    if (Date.now() > item.expiry) {
+    const today = formatDateString(new Date());
+    const isExpired = today > item.expiry;
+
+    if (isExpired) {
       localStorage.removeItem(key);
 
       return null;

src/utils/set-storage-with-expiry.ts

@@ -1,38 +1,66 @@
 import { isBrowser } from './is-browser';
 
 /**
- * Stores a boolean value in localStorage with an expiration time.
+ * Formats a date as YYYY-MM-DD string.
  *
- * The value is stored as a JSON object containing the value and expiry timestamp.
- * When retrieved using {@link getStorageWithExpiry}, expired items are automatically
- * removed from storage. No-op when called in a server-side environment where
- * localStorage is not available.
+ * @function formatDateString
+ * @param {Date} date - The date to format
+ *
+ * @returns {string} Formatted date string in YYYY-MM-DD format
+ */
+export function formatDateString(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+}
+
+/**
+ * Calculates an expiry date by adding days to today's date.
+ *
+ * @function calculateExpiryDate
+ * @param {number} days - Number of days to add to today's date
+ *
+ * @returns {string} Expiry date string in YYYY-MM-DD format
+ */
+function calculateExpiryDate(days: number): string {
+  const today = new Date();
+  const expiryDate = new Date(today);
+
+  expiryDate.setDate(today.getDate() + days);
+
+  return formatDateString(expiryDate);
+}
+
+/**
+ * Stores a boolean value in localStorage with an expiration date.
+ *
+ * The item is stored as a JSON object containing the value and expiry date
+ * string in YYYY-MM-DD format. When retrieved using {@link
+ * getStorageWithExpiry}, expired items are automatically removed from storage.
+ * No-op when called in a server-side environment where localStorage is not
+ * available.
  *
  * @function setStorageWithExpiry
  * @param {string} key - The localStorage key to store the value under
  * @param {boolean} value - The boolean value to store
- * @param {number} ttl - Time to live in milliseconds (e.g., 86400000 for 24 hours)
+ * @param {number} days - Number of days from today until expiration
  *
  * @returns {void}
- *
- * @example
- * ```ts
- * // Store consent for 24 hours
- * setStorageWithExpiry('ddg_consent', true, 86400000);
- * ```
  */
 export function setStorageWithExpiry(
   key: string,
   value: boolean,
-  ttl: number,
+  days: number,
 ): void {
   if (!isBrowser()) {
     return;
   }
 
   const item = {
     value,
-    expiry: Date.now() + ttl,
+    expiry: calculateExpiryDate(days),
   };
 
   localStorage.setItem(key, JSON.stringify(item));