From c41e5ddc2cf4d5abaae875362cca077a1d27a382 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 14 Aug 2024 10:31:01 +0100 Subject: [PATCH] feat: add gtm to load in us only (#16146) * add gtm to load in us only * fix: Tried to give typescript some help * fix: Alternative fix * fix: Add yarn.lock * fix: Oops * fix: type err --------- Co-authored-by: Alex van Andel Co-authored-by: Udit Takkar --- apps/web/components/GTM.tsx | 54 ++++++++ apps/web/components/PageWrapper.tsx | 3 + apps/web/pages/api/geolocation.ts | 7 + package.json | 1 + .../reminders/providers/sendgridProvider.ts | 9 +- yarn.lock | 123 ++++++++++++++---- 6 files changed, 165 insertions(+), 32 deletions(-) create mode 100644 apps/web/components/GTM.tsx create mode 100644 apps/web/pages/api/geolocation.ts diff --git a/apps/web/components/GTM.tsx b/apps/web/components/GTM.tsx new file mode 100644 index 0000000000..f91d5a1d6b --- /dev/null +++ b/apps/web/components/GTM.tsx @@ -0,0 +1,54 @@ +import { GoogleTagManager } from "@next/third-parties/google"; +import { useQuery } from "@tanstack/react-query"; + +const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID; + +const CACHE_KEY = "user_geolocation"; +const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds + +export async function fetchGeolocation() { + const cachedData = localStorage.getItem(CACHE_KEY); + + if (cachedData) { + const { country, timestamp } = JSON.parse(cachedData); + + if (Date.now() - timestamp < CACHE_DURATION) { + return { country }; + } + } + + const res = await fetch("/api/geolocation"); + const data = await res.json(); + + const newCacheData = { + country: data.country, + timestamp: Date.now(), + }; + + localStorage.setItem(CACHE_KEY, JSON.stringify(newCacheData)); + return data; +} + +export function useGeolocation() { + const { data, isLoading, error } = useQuery({ + queryKey: ["geolocation"], + queryFn: fetchGeolocation, + staleTime: 24 * 60 * 60 * 1000, // 24 hours + }); + + return { + isUS: data?.country === "US", + loading: isLoading, + error, + }; +} + +export function GoogleTagManagerComponent() { + const { isUS, loading } = useGeolocation(); + + if (!isUS || !GTM_ID || loading) { + return null; + } + + return ; +} diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx index 2250d84b15..c3f0a07883 100644 --- a/apps/web/components/PageWrapper.tsx +++ b/apps/web/components/PageWrapper.tsx @@ -13,6 +13,8 @@ import type { AppProps } from "@lib/app-providers"; import AppProviders from "@lib/app-providers"; import { seoConfig } from "@lib/config/next-seo.config"; +import { GoogleTagManagerComponent } from "@components/GTM"; + export interface CalPageWrapper { (props?: AppProps): JSX.Element; PageWrapper?: AppProps["Component"]["PageWrapper"]; @@ -93,6 +95,7 @@ function PageWrapper(props: AppProps) { ) )} + ); } diff --git a/apps/web/pages/api/geolocation.ts b/apps/web/pages/api/geolocation.ts new file mode 100644 index 0000000000..b5d61d6481 --- /dev/null +++ b/apps/web/pages/api/geolocation.ts @@ -0,0 +1,7 @@ +import type { NextApiRequest, NextApiResponse } from "next"; + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const country = req.headers["x-vercel-ip-country"] || "Unknown"; + res.setHeader("Cache-Control", "public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400"); + res.status(200).json({ country }); +} diff --git a/package.json b/package.json index 42be9cf694..2ab82dcd27 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ }, "dependencies": { "@daily-co/daily-js": "^0.59.0", + "@next/third-parties": "^14.2.5", "@vercel/functions": "^1.4.0", "city-timezones": "^1.2.1", "eslint": "^8.34.0", diff --git a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts index 29357ec21c..e6a3cac99c 100644 --- a/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts +++ b/packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts @@ -121,15 +121,12 @@ function addHTMLStyles(html?: string) { return ""; } const dom = new JSDOM(html); - const document = dom.window.document; - // Select all tags inside
elements --> only used for emojis in rating template - const links = document.querySelectorAll("h6 a"); + const links = Array.from(dom.window.document.querySelectorAll("h6 a")).map((link) => link as HTMLElement); links.forEach((link) => { - const htmlLink = link as HTMLElement; - htmlLink.style.fontSize = "20px"; - htmlLink.style.textDecoration = "none"; + link.style.fontSize = "20px"; + link.style.textDecoration = "none"; }); return dom.serialize(); diff --git a/yarn.lock b/yarn.lock index fdb8746c5f..8bff7c23ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4133,8 +4133,8 @@ __metadata: resolution: "@calcom/api-v2@workspace:apps/api/v2" dependencies: "@calcom/platform-constants": "*" + "@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.27" "@calcom/platform-libraries-0.0.2": "npm:@calcom/platform-libraries@0.0.2" - "@calcom/platform-libraries-0.0.26": "npm:@calcom/platform-libraries@0.0.26" "@calcom/platform-types": "*" "@calcom/platform-utils": "*" "@calcom/prisma": "*" @@ -4465,17 +4465,17 @@ __metadata: "@heroicons/react": ^1.0.6 "@prisma/client": ^5.4.2 "@tailwindcss/forms": ^0.5.2 - "@types/node": ^20.3.1 + "@types/node": 16.9.1 "@types/react": 18.0.26 - autoprefixer: ^10.4.19 + autoprefixer: ^10.4.12 chart.js: ^3.7.1 client-only: ^0.0.1 eslint: ^8.34.0 - next: ^14.1.3 + next: ^13.5.4 next-auth: ^4.22.1 next-i18next: ^13.2.2 - postcss: ^8.4.38 - prisma: ^5.7.1 + postcss: ^8.4.18 + prisma: ^5.4.2 prisma-field-encryption: ^1.4.0 react: ^18.2.0 react-chartjs-2: ^4.0.1 @@ -4484,7 +4484,7 @@ __metadata: react-live-chat-loader: ^2.8.1 swr: ^1.2.2 tailwindcss: ^3.3.3 - typescript: ^5.3.3 + typescript: ^4.9.4 zod: ^3.22.4 languageName: unknown linkType: soft @@ -4849,6 +4849,15 @@ __metadata: languageName: unknown linkType: soft +"@calcom/horizon-workrooms@workspace:packages/app-store/horizon-workrooms": + version: 0.0.0-use.local + resolution: "@calcom/horizon-workrooms@workspace:packages/app-store/horizon-workrooms" + dependencies: + "@calcom/lib": "*" + "@calcom/types": "*" + languageName: unknown + linkType: soft + "@calcom/hubspot@workspace:packages/app-store/hubspot": version: 0.0.0-use.local resolution: "@calcom/hubspot@workspace:packages/app-store/hubspot" @@ -5086,17 +5095,6 @@ __metadata: languageName: unknown linkType: soft -"@calcom/platform-libraries-0.0.26@npm:@calcom/platform-libraries@0.0.26": - version: 0.0.26 - resolution: "@calcom/platform-libraries@npm:0.0.26" - dependencies: - "@calcom/core": "*" - "@calcom/features": "*" - "@calcom/lib": "*" - checksum: 95b60b6bccfecf1d75f5b37b6e2b48811d6cbdd6ccb8157fa700558f2947adefd1fa26e7ed123f72960ddbf44ead26cce6e6fbd62505d73f5490abcf7c95563d - languageName: node - linkType: hard - "@calcom/platform-libraries-0.0.2@npm:@calcom/platform-libraries@0.0.2, @calcom/platform-libraries@npm:0.0.2": version: 0.0.2 resolution: "@calcom/platform-libraries@npm:0.0.2" @@ -5108,6 +5106,17 @@ __metadata: languageName: node linkType: hard +"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.27": + version: 0.0.27 + resolution: "@calcom/platform-libraries@npm:0.0.27" + dependencies: + "@calcom/core": "*" + "@calcom/features": "*" + "@calcom/lib": "*" + checksum: 516c347b3f71e45879925d31f067035a7c6857dc0f474a726dcb58a7949e1d6906e8e21b18a3a480052088ef742048029509aa74b6bde31b51a13fc6ea00a9f4 + languageName: node + linkType: hard + "@calcom/platform-libraries@workspace:packages/platform/libraries": version: 0.0.0-use.local resolution: "@calcom/platform-libraries@workspace:packages/platform/libraries" @@ -5768,23 +5777,23 @@ __metadata: "@radix-ui/react-tabs": ^1.0.0 "@radix-ui/react-tooltip": ^1.0.0 "@stripe/stripe-js": ^1.35.0 - "@tanstack/react-query": ^5.17.15 + "@tanstack/react-query": ^4.3.9 "@typeform/embed-react": ^1.2.4 "@types/bcryptjs": ^2.4.2 "@types/debounce": ^1.2.1 "@types/gtag.js": ^0.0.10 "@types/micro": 7.3.7 - "@types/node": ^20.3.1 + "@types/node": 16.9.1 "@types/react": 18.0.26 "@types/react-gtm-module": ^2.0.1 "@types/xml2js": ^0.4.11 "@vercel/analytics": ^0.1.6 "@vercel/edge-functions-ui": ^0.2.1 "@vercel/og": ^0.5.0 - autoprefixer: ^10.4.19 + autoprefixer: ^10.4.12 bcryptjs: ^2.4.3 class-variance-authority: ^0.7.0 - clsx: ^2.0.0 + clsx: ^1.2.1 cobe: ^0.4.1 concurrently: ^7.6.0 cross-env: ^7.0.3 @@ -5814,7 +5823,7 @@ __metadata: next-i18next: ^13.2.2 next-seo: ^6.0.0 playwright-core: ^1.38.1 - postcss: ^8.4.38 + postcss: ^8.4.18 prism-react-renderer: ^1.3.5 react: ^18.2.0 react-confetti: ^6.0.1 @@ -5837,14 +5846,14 @@ __metadata: remark: ^14.0.2 remark-html: ^14.0.1 remeda: ^1.24.1 - stripe: ^15.3.0 + stripe: ^9.16.0 tailwind-merge: ^1.13.2 tailwindcss: ^3.3.3 ts-node: ^10.9.1 - typescript: ^5.3.3 + typescript: ^4.9.4 wait-on: ^7.0.1 xml2js: ^0.6.0 - zod: ^3.22.4 + zod: ^3.22.2 languageName: unknown linkType: soft @@ -9822,6 +9831,18 @@ __metadata: languageName: node linkType: hard +"@next/third-parties@npm:^14.2.5": + version: 14.2.5 + resolution: "@next/third-parties@npm:14.2.5" + dependencies: + third-party-capital: 1.0.20 + peerDependencies: + next: ^13.0.0 || ^14.0.0 + react: ^18.2.0 + checksum: e2d32f9d9891c0189c88b2e096e11f6b1e63a6155bee2ebaf1a72531839ea8aa670b039f9d1f68337ad046cdeb429b9cb028676ffd1078e9259341bbda9d5b68 + languageName: node + linkType: hard + "@noble/curves@npm:1.1.0, @noble/curves@npm:~1.1.0": version: 1.1.0 resolution: "@noble/curves@npm:1.1.0" @@ -16161,6 +16182,13 @@ __metadata: languageName: node linkType: hard +"@tanstack/query-core@npm:4.36.1": + version: 4.36.1 + resolution: "@tanstack/query-core@npm:4.36.1" + checksum: 47672094da20d89402d9fe03bb7b0462be73a76ff9ca715169738bc600a719d064d106d083a8eedae22a2c22de22f87d5eb5d31ef447aba771d9190f2117ed10 + languageName: node + linkType: hard + "@tanstack/query-core@npm:5.17.19": version: 5.17.19 resolution: "@tanstack/query-core@npm:5.17.19" @@ -16168,6 +16196,25 @@ __metadata: languageName: node linkType: hard +"@tanstack/react-query@npm:^4.3.9": + version: 4.36.1 + resolution: "@tanstack/react-query@npm:4.36.1" + dependencies: + "@tanstack/query-core": 4.36.1 + use-sync-external-store: ^1.2.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-native: "*" + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + checksum: 1aff0a476859386f8d32253fa0d0bde7b81769a6d4d4d9cbd78778f0f955459a3bdb7ee27a0d2ee7373090f12998b45df80db0b5b313bd0a7a39d36c6e8e51c5 + languageName: node + linkType: hard + "@tanstack/react-query@npm:^5.17.15": version: 5.17.19 resolution: "@tanstack/react-query@npm:5.17.19" @@ -21345,6 +21392,7 @@ __metadata: dependencies: "@changesets/cli": ^2.26.1 "@daily-co/daily-js": ^0.59.0 + "@next/third-parties": ^14.2.5 "@playwright/test": ^1.45.3 "@snaplet/copycat": ^4.1.0 "@testing-library/jest-dom": ^5.16.5 @@ -22362,6 +22410,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "clsx@npm:^2.0.0": version: 2.1.0 resolution: "clsx@npm:2.1.0" @@ -45361,6 +45416,13 @@ __metadata: languageName: node linkType: hard +"third-party-capital@npm:1.0.20": + version: 1.0.20 + resolution: "third-party-capital@npm:1.0.20" + checksum: ef5eae00bdb82b538b9f628a011fc294cd6f4bafdbb46d88f3d1a72e8c3b9e2cc2a547fdb62bc16bdd847e9da3dac2df676b154c64914f6c90ea15aac6ce0a6a + languageName: node + linkType: hard + "thirty-two@npm:^1.0.2": version: 1.0.2 resolution: "thirty-two@npm:1.0.2" @@ -47375,6 +47437,15 @@ __metadata: languageName: node linkType: hard +"use-sync-external-store@npm:^1.2.0": + version: 1.2.2 + resolution: "use-sync-external-store@npm:1.2.2" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: fe07c071c4da3645f112c38c0e57beb479a8838616ff4e92598256ecce527f2888c08febc7f9b2f0ce2f0e18540ba3cde41eb2035e4fafcb4f52955037098a81 + languageName: node + linkType: hard + "utif@npm:^2.0.1": version: 2.0.1 resolution: "utif@npm:2.0.1"