MNTOR-2243 - pass subscription URLs from server to client components (#3496)

* MNTOR-2243 - pass subscription URLs from server to client components * Revert "chore(deps): Bump postcss and next" This reverts commit 452a682769. --------- Co-authored-by: Florian Zia <zia.florian@gmail.com>
2023-10-04 14:19:02 -07:00 · 2023-10-04 14:19:02 -07:00 · a6d698a808
--- a/.env-dist
+++ b/.env-dist
@ -49,7 +49,6 @@ S3_BUCKET=
 # leave FXA_ENABLED empty to disable FXA
 FXA_ENABLED=
 NEXT_PUBLIC_FXA_SETTINGS_URL=https://accounts.stage.mozaws.net/settings
-NEXT_PUBLIC_FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions

 OAUTH_CLIENT_ID=edd29a80019d61a1
 OAUTH_CLIENT_SECRET=get-this-from-groovecoder-or-fxmonitor-engineering
@ -137,9 +136,10 @@ E2E_TEST_ACCOUNT_PASSWORD=
 # Monitor Premium features
 NEXT_PUBLIC_ONEREP_DATA_BROKER_COUNT=190
 # Link to start user on the subscription process. PREMIUM_ENABLED must be set to `true`.
-NEXT_PUBLIC_PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
-NEXT_PUBLIC_PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
-NEXT_PUBLIC_PREMIUM_PLAN_ID_YEARLY_US=
+FXA_SUBSCRIPTIONS_URL=https://accounts.stage.mozaws.net/subscriptions
+PREMIUM_PRODUCT_ID=prod_NErZh679W62lai
+PREMIUM_PLAN_ID_MONTHLY_US=price_1MUNq0Kb9q6OnNsL4BoJgepf
+PREMIUM_PLAN_ID_YEARLY_US=

 MONTHLY_SUBSCRIBERS_QUOTA=
 MONTHLY_SCANS_QUOTA=
--- a/package-lock.json
+++ b/package-lock.json
@ -36,7 +36,7 @@
        "jwk-to-pem": "^2.0.5",
        "knex": "^2.4.2",
        "mozlog": "^3.0.2",
-        "next": "^13.5.4",
+        "next": "^13.4.1",
        "next-auth": "^4.22.1",
        "nodemailer": "^6.9.1",
        "patch-package": "^7.0.0",
@ -5739,9 +5739,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.4.tgz",
-      "integrity": "sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ=="
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.4.tgz",
+      "integrity": "sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg=="
    },
    "node_modules/@next/eslint-plugin-next": {
      "version": "13.4.7",
@ -5771,9 +5771,9 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz",
-      "integrity": "sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.4.tgz",
+      "integrity": "sha512-xfjgXvp4KalNUKZMHmsFxr1Ug+aGmmO6NWP0uoh4G3WFqP/mJ1xxfww0gMOeMeSq/Jyr5k7DvoZ2Pv+XOITTtw==",
      "cpu": [
        "arm64"
      ],
@ -5786,9 +5786,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz",
-      "integrity": "sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.4.tgz",
+      "integrity": "sha512-ZY9Ti1hkIwJsxGus3nlubIkvYyB0gNOYxKrfsOrLEqD0I2iCX8D7w8v6QQZ2H+dDl6UT29oeEUdDUNGk4UEpfg==",
      "cpu": [
        "x64"
      ],
@ -5801,9 +5801,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz",
-      "integrity": "sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.4.tgz",
+      "integrity": "sha512-+KZnDeMShYkpkqAvGCEDeqYTRADJXc6SY1jWXz+Uo6qWQO/Jd9CoyhTJwRSxvQA16MoYzvILkGaDqirkRNctyA==",
      "cpu": [
        "arm64"
      ],
@ -5816,9 +5816,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz",
-      "integrity": "sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.4.tgz",
+      "integrity": "sha512-evC1twrny2XDT4uOftoubZvW3EG0zs0ZxMwEtu/dDGVRO5n5pT48S8qqEIBGBUZYu/Xx4zzpOkIxx1vpWdE+9A==",
      "cpu": [
        "arm64"
      ],
@ -5831,9 +5831,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz",
-      "integrity": "sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.4.tgz",
+      "integrity": "sha512-PX706XcCHr2FfkyhP2lpf+pX/tUvq6/ke7JYnnr0ykNdEMo+sb7cC/o91gnURh4sPYSiZJhsF2gbIqg9rciOHQ==",
      "cpu": [
        "x64"
      ],
@ -5846,9 +5846,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz",
-      "integrity": "sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.4.tgz",
+      "integrity": "sha512-TKUUx3Ftd95JlHV6XagEnqpT204Y+IsEa3awaYIjayn0MOGjgKZMZibqarK3B1FsMSPaieJf2FEAcu9z0yT5aA==",
      "cpu": [
        "x64"
      ],
@ -5861,9 +5861,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz",
-      "integrity": "sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.4.tgz",
+      "integrity": "sha512-FP8AadgSq4+HPtim7WBkCMGbhr5vh9FePXiWx9+YOdjwdQocwoCK5ZVC3OW8oh3TWth6iJ0AXJ/yQ1q1cwSZ3A==",
      "cpu": [
        "arm64"
      ],
@ -5876,9 +5876,9 @@
      }
    },
    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz",
-      "integrity": "sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.4.tgz",
+      "integrity": "sha512-3WekVmtuA2MCdcAOrgrI+PuFiFURtSyyrN1I3UPtS0ckR2HtLqyqmS334Eulf15g1/bdwMteePdK363X/Y9JMg==",
      "cpu": [
        "ia32"
      ],
@ -5891,9 +5891,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz",
-      "integrity": "sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.4.tgz",
+      "integrity": "sha512-AHRITu/CrlQ+qzoqQtEMfaTu7GHaQ6bziQln/pVWpOYC1wU+Mq6VQQFlsDtMCnDztPZtppAXdvvbNS7pcfRzlw==",
      "cpu": [
        "x64"
      ],
@ -11994,9 +11994,9 @@
      "dev": true
    },
    "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
      "dependencies": {
        "tslib": "^2.4.0"
      }
@ -18943,7 +18943,8 @@
    "node_modules/glob-to-regexp": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "devOptional": true
    },
    "node_modules/global-modules": {
      "version": "2.0.0",
@ -23820,37 +23821,38 @@
      "devOptional": true
    },
    "node_modules/next": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.4.tgz",
-      "integrity": "sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.4.tgz",
+      "integrity": "sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==",
      "dependencies": {
-        "@next/env": "13.5.4",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "13.4.4",
+        "@swc/helpers": "0.5.1",
        "busboy": "1.6.0",
        "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.31",
+        "postcss": "8.4.14",
        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "zod": "3.21.4"
      },
      "bin": {
        "next": "dist/bin/next"
      },
      "engines": {
-        "node": ">=16.14.0"
+        "node": ">=16.8.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.4",
-        "@next/swc-darwin-x64": "13.5.4",
-        "@next/swc-linux-arm64-gnu": "13.5.4",
-        "@next/swc-linux-arm64-musl": "13.5.4",
-        "@next/swc-linux-x64-gnu": "13.5.4",
-        "@next/swc-linux-x64-musl": "13.5.4",
-        "@next/swc-win32-arm64-msvc": "13.5.4",
-        "@next/swc-win32-ia32-msvc": "13.5.4",
-        "@next/swc-win32-x64-msvc": "13.5.4"
+        "@next/swc-darwin-arm64": "13.4.4",
+        "@next/swc-darwin-x64": "13.4.4",
+        "@next/swc-linux-arm64-gnu": "13.4.4",
+        "@next/swc-linux-arm64-musl": "13.4.4",
+        "@next/swc-linux-x64-gnu": "13.4.4",
+        "@next/swc-linux-x64-musl": "13.4.4",
+        "@next/swc-win32-arm64-msvc": "13.4.4",
+        "@next/swc-win32-ia32-msvc": "13.4.4",
+        "@next/swc-win32-x64-msvc": "13.4.4"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
+        "fibers": ">= 3.1.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.3.0"
@ -23859,6 +23861,9 @@
        "@opentelemetry/api": {
          "optional": true
        },
+        "fibers": {
+          "optional": true
+        },
        "sass": {
          "optional": true
        }
@ -23907,6 +23912,29 @@
        "uuid": "dist/bin/uuid"
      }
    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
    "node_modules/no-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@ -25203,9 +25231,10 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -29429,6 +29458,7 @@
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "devOptional": true,
      "dependencies": {
        "glob-to-regexp": "^0.4.1",
        "graceful-fs": "^4.1.2"
@ -30095,6 +30125,14 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zod": {
+      "version": "3.21.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
+      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
    }
  },
  "dependencies": {
@ -34292,9 +34330,9 @@
      }
    },
    "@next/env": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.4.tgz",
-      "integrity": "sha512-LGegJkMvRNw90WWphGJ3RMHMVplYcOfRWf2Be3td3sUa+1AaxmsYyANsA+znrGCBjXJNi4XAQlSoEfUxs/4kIQ=="
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.4.tgz",
+      "integrity": "sha512-q/y7VZj/9YpgzDe64Zi6rY1xPizx80JjlU2BTevlajtaE3w1LqweH1gGgxou2N7hdFosXHjGrI4OUvtFXXhGLg=="
    },
    "@next/eslint-plugin-next": {
      "version": "13.4.7",
@ -34320,57 +34358,57 @@
      }
    },
    "@next/swc-darwin-arm64": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.4.tgz",
-      "integrity": "sha512-Df8SHuXgF1p+aonBMcDPEsaahNo2TCwuie7VXED4FVyECvdXfRT9unapm54NssV9tF3OQFKBFOdlje4T43VO0w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.4.tgz",
+      "integrity": "sha512-xfjgXvp4KalNUKZMHmsFxr1Ug+aGmmO6NWP0uoh4G3WFqP/mJ1xxfww0gMOeMeSq/Jyr5k7DvoZ2Pv+XOITTtw==",
      "optional": true
    },
    "@next/swc-darwin-x64": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.4.tgz",
-      "integrity": "sha512-siPuUwO45PnNRMeZnSa8n/Lye5ZX93IJom9wQRB5DEOdFrw0JjOMu1GINB8jAEdwa7Vdyn1oJ2xGNaQpdQQ9Pw==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.4.tgz",
+      "integrity": "sha512-ZY9Ti1hkIwJsxGus3nlubIkvYyB0gNOYxKrfsOrLEqD0I2iCX8D7w8v6QQZ2H+dDl6UT29oeEUdDUNGk4UEpfg==",
      "optional": true
    },
    "@next/swc-linux-arm64-gnu": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.4.tgz",
-      "integrity": "sha512-l/k/fvRP/zmB2jkFMfefmFkyZbDkYW0mRM/LB+tH5u9pB98WsHXC0WvDHlGCYp3CH/jlkJPL7gN8nkTQVrQ/2w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.4.tgz",
+      "integrity": "sha512-+KZnDeMShYkpkqAvGCEDeqYTRADJXc6SY1jWXz+Uo6qWQO/Jd9CoyhTJwRSxvQA16MoYzvILkGaDqirkRNctyA==",
      "optional": true
    },
    "@next/swc-linux-arm64-musl": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.4.tgz",
-      "integrity": "sha512-YYGb7SlLkI+XqfQa8VPErljb7k9nUnhhRrVaOdfJNCaQnHBcvbT7cx/UjDQLdleJcfyg1Hkn5YSSIeVfjgmkTg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.4.tgz",
+      "integrity": "sha512-evC1twrny2XDT4uOftoubZvW3EG0zs0ZxMwEtu/dDGVRO5n5pT48S8qqEIBGBUZYu/Xx4zzpOkIxx1vpWdE+9A==",
      "optional": true
    },
    "@next/swc-linux-x64-gnu": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.4.tgz",
-      "integrity": "sha512-uE61vyUSClnCH18YHjA8tE1prr/PBFlBFhxBZis4XBRJoR+txAky5d7gGNUIbQ8sZZ7LVkSVgm/5Fc7mwXmRAg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.4.tgz",
+      "integrity": "sha512-PX706XcCHr2FfkyhP2lpf+pX/tUvq6/ke7JYnnr0ykNdEMo+sb7cC/o91gnURh4sPYSiZJhsF2gbIqg9rciOHQ==",
      "optional": true
    },
    "@next/swc-linux-x64-musl": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.4.tgz",
-      "integrity": "sha512-qVEKFYML/GvJSy9CfYqAdUexA6M5AklYcQCW+8JECmkQHGoPxCf04iMh7CPR7wkHyWWK+XLt4Ja7hhsPJtSnhg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.4.tgz",
+      "integrity": "sha512-TKUUx3Ftd95JlHV6XagEnqpT204Y+IsEa3awaYIjayn0MOGjgKZMZibqarK3B1FsMSPaieJf2FEAcu9z0yT5aA==",
      "optional": true
    },
    "@next/swc-win32-arm64-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.4.tgz",
-      "integrity": "sha512-mDSQfqxAlfpeZOLPxLymZkX0hYF3juN57W6vFHTvwKlnHfmh12Pt7hPIRLYIShk8uYRsKPtMTth/EzpwRI+u8w==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.4.tgz",
+      "integrity": "sha512-FP8AadgSq4+HPtim7WBkCMGbhr5vh9FePXiWx9+YOdjwdQocwoCK5ZVC3OW8oh3TWth6iJ0AXJ/yQ1q1cwSZ3A==",
      "optional": true
    },
    "@next/swc-win32-ia32-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.4.tgz",
-      "integrity": "sha512-aoqAT2XIekIWoriwzOmGFAvTtVY5O7JjV21giozBTP5c6uZhpvTWRbmHXbmsjZqY4HnEZQRXWkSAppsIBweKqw==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.4.tgz",
+      "integrity": "sha512-3WekVmtuA2MCdcAOrgrI+PuFiFURtSyyrN1I3UPtS0ckR2HtLqyqmS334Eulf15g1/bdwMteePdK363X/Y9JMg==",
      "optional": true
    },
    "@next/swc-win32-x64-msvc": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.4.tgz",
-      "integrity": "sha512-cyRvlAxwlddlqeB9xtPSfNSCRy8BOa4wtMo0IuI9P7Y0XT2qpDrpFKRyZ7kUngZis59mPVla5k8X1oOJ8RxDYg==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.4.tgz",
+      "integrity": "sha512-AHRITu/CrlQ+qzoqQtEMfaTu7GHaQ6bziQln/pVWpOYC1wU+Mq6VQQFlsDtMCnDztPZtppAXdvvbNS7pcfRzlw==",
      "optional": true
    },
    "@nodelib/fs.scandir": {
@ -38881,9 +38919,9 @@
      "dev": true
    },
    "@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
      "requires": {
        "tslib": "^2.4.0"
      },
@ -44236,7 +44274,8 @@
    "glob-to-regexp": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "devOptional": true
    },
    "global-modules": {
      "version": "2.0.0",
@ -47829,26 +47868,38 @@
      "devOptional": true
    },
    "next": {
-      "version": "13.5.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.4.tgz",
-      "integrity": "sha512-+93un5S779gho8y9ASQhb/bTkQF17FNQOtXLKAj3lsNgltEcF0C5PMLLncDmH+8X1EnJH1kbqAERa29nRXqhjA==",
+      "version": "13.4.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.4.tgz",
+      "integrity": "sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==",
      "requires": {
-        "@next/env": "13.5.4",
-        "@next/swc-darwin-arm64": "13.5.4",
-        "@next/swc-darwin-x64": "13.5.4",
-        "@next/swc-linux-arm64-gnu": "13.5.4",
-        "@next/swc-linux-arm64-musl": "13.5.4",
-        "@next/swc-linux-x64-gnu": "13.5.4",
-        "@next/swc-linux-x64-musl": "13.5.4",
-        "@next/swc-win32-arm64-msvc": "13.5.4",
-        "@next/swc-win32-ia32-msvc": "13.5.4",
-        "@next/swc-win32-x64-msvc": "13.5.4",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "13.4.4",
+        "@next/swc-darwin-arm64": "13.4.4",
+        "@next/swc-darwin-x64": "13.4.4",
+        "@next/swc-linux-arm64-gnu": "13.4.4",
+        "@next/swc-linux-arm64-musl": "13.4.4",
+        "@next/swc-linux-x64-gnu": "13.4.4",
+        "@next/swc-linux-x64-musl": "13.4.4",
+        "@next/swc-win32-arm64-msvc": "13.4.4",
+        "@next/swc-win32-ia32-msvc": "13.4.4",
+        "@next/swc-win32-x64-msvc": "13.4.4",
+        "@swc/helpers": "0.5.1",
        "busboy": "1.6.0",
        "caniuse-lite": "^1.0.30001406",
-        "postcss": "8.4.31",
+        "postcss": "8.4.14",
        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "zod": "3.21.4"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.14",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+          "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+          "requires": {
+            "nanoid": "^3.3.4",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
      }
    },
    "next-auth": {
@ -48857,9 +48908,10 @@
      "requires": {}
    },
    "postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "dev": true,
      "requires": {
        "nanoid": "^3.3.6",
        "picocolors": "^1.0.0",
@ -51986,6 +52038,7 @@
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "devOptional": true,
      "requires": {
        "glob-to-regexp": "^0.4.1",
        "graceful-fs": "^4.1.2"
@ -52463,6 +52516,11 @@
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zod": {
+      "version": "3.21.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
+      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -75,7 +75,7 @@
    "jwk-to-pem": "^2.0.5",
    "knex": "^2.4.2",
    "mozlog": "^3.0.2",
-    "next": "^13.5.4",
+    "next": "^13.4.1",
    "next-auth": "^4.22.1",
    "nodemailer": "^6.9.1",
    "patch-package": "^7.0.0",
--- a/src/app/(proper_react)/redesign/(authenticated)/admin/feature-flags/page.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/admin/feature-flags/page.tsx
@ -12,10 +12,14 @@ import { authOptions, isAdmin } from "../../../../../api/utils/auth";
 import { Toolbar } from "../../../../../components/client/toolbar/Toolbar";
 import styles from "./page.module.scss";
 import { ModifyInputField } from "./components/ModifyInputField";
+import getPremiumSubscriptionUrl from "../../../../../functions/server/getPremiumSubscriptionUrl";

 export default async function FeatureFlagPage() {
  const session = await getServerSession(authOptions);

+  const monthlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "monthly" });
+  const yearlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "yearly" });
+
  if (!session?.user?.email) {
    return redirect("/");
  }
@ -96,7 +100,11 @@ export default async function FeatureFlagPage() {
    <div className={styles.wrapper}>
      <nav className={styles.tabBar}>
        <div className={styles.end}>
-          <Toolbar user={session.user} />
+          <Toolbar
+            user={session.user}
+            monthlySubscriptionUrl={monthlySubscriptionUrl}
+            yearlySubscriptionUrl={yearlySubscriptionUrl}
+          />
        </div>
      </nav>
      <div className={styles.start}>
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/Dashboard.stories.tsx
@ -151,7 +151,13 @@ const DashboardWrapper = (props: DashboardWrapperProps) => {
  };

  return (
-    <Shell l10n={getEnL10nSync()} session={mockedSession} nonce="">
+    <Shell
+      l10n={getEnL10nSync()}
+      session={mockedSession}
+      nonce=""
+      monthlySubscriptionUrl=""
+      yearlySubscriptionUrl=""
+    >
      <DashboardEl
        countryCode={props.countryCode}
        user={user}
@ -162,6 +168,8 @@ const DashboardWrapper = (props: DashboardWrapperProps) => {
          FreeBrokerScan: true,
          PremiumBrokerRemoval: true,
        }}
+        monthlySubscriptionUrl={""}
+        yearlySubscriptionUrl={""}
      />
    </Shell>
  );
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/View.tsx
@ -44,6 +44,8 @@ export type Props = {
  userScanData: LatestOnerepScanData;
  isEligibleForFreeScan: boolean;
  countryCode: string;
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
 };

 export type TabType = "action-needed" | "fixed";
@ -255,7 +257,11 @@ export const View = (props: Props) => {

  return (
    <div className={styles.wrapper}>
-      <Toolbar user={props.user}>
+      <Toolbar
+        user={props.user}
+        monthlySubscriptionUrl={props.monthlySubscriptionUrl}
+        yearlySubscriptionUrl={props.yearlySubscriptionUrl}
+      >
        <TabList
          tabs={tabsData}
          onSelectionChange={(selectedKey) => setSelectedTab(selectedKey)}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/View.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/View.tsx
@ -0,0 +1,162 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use client";
+
+import React, { useState } from "react";
+import styles from "../dataBrokerProfiles.module.scss";
+import { Button } from "../../../../../../../../components/server/Button";
+import { useL10n } from "../../../../../../../../hooks/l10n";
+
+interface AutomaticRemoveProps {
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
+}
+
+export default function AutomaticRemove({
+  monthlySubscriptionUrl,
+  yearlySubscriptionUrl,
+}: AutomaticRemoveProps) {
+  const l10n = useL10n();
+
+  const [selectedPlanIsYearly, setSelectedPlanIsYearly] = useState(true);
+
+  const dataBrokerCount = parseInt(
+    process.env.NEXT_PUBLIC_ONEREP_DATA_BROKER_COUNT as string,
+    10
+  );
+
+  return (
+    <div>
+      <div className={`${styles.content} ${styles.contentAutomaticRemove}`}>
+        <h3>
+          {l10n.getString(
+            "fix-flow-data-broker-profiles-automatic-remove-headline"
+          )}
+        </h3>
+        <p>
+          {l10n.getString(
+            "fix-flow-data-broker-profiles-automatic-remove-subheadline",
+            {
+              data_broker_count: dataBrokerCount,
+            }
+          )}
+        </p>
+      </div>
+      <div className={styles.content}>
+        <div className={styles.upgradeToggleWrapper}>
+          <div className={styles.upgradeToggle}>
+            <button
+              onClick={() => setSelectedPlanIsYearly(!selectedPlanIsYearly)}
+              className={`${selectedPlanIsYearly ? styles.isActive : ""}`}
+            >
+              {l10n.getString(
+                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-yearly"
+              )}
+            </button>
+            <button
+              onClick={() => setSelectedPlanIsYearly(!selectedPlanIsYearly)}
+              className={`${selectedPlanIsYearly ? "" : styles.isActive}`}
+            >
+              {l10n.getString(
+                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-monthly"
+              )}
+            </button>
+          </div>
+          <span>
+            {l10n.getString(
+              "fix-flow-data-broker-profiles-automatic-remove-save-percent",
+              { percent: 10 }
+            )}
+          </span>
+        </div>
+        <div className={styles.upgradeContentWrapper}>
+          {/* Feature List */}
+          <div className={styles.featuresList}>
+            <strong>
+              {l10n.getString(
+                "fix-flow-data-broker-profiles-automatic-remove-features-headline"
+              )}
+            </strong>
+            <ul>
+              <li>
+                {l10n.getString(
+                  "fix-flow-data-broker-profiles-automatic-remove-features-monthly-scan",
+                  {
+                    data_broker_count: dataBrokerCount,
+                  }
+                )}
+              </li>
+              <li>
+                {l10n.getString(
+                  "fix-flow-data-broker-profiles-automatic-remove-features-remove-personal-info"
+                )}
+              </li>
+              <li>
+                {l10n.getString(
+                  "fix-flow-data-broker-profiles-automatic-remove-features-guided-experience"
+                )}
+              </li>
+              <li>
+                {l10n.getString(
+                  "fix-flow-data-broker-profiles-automatic-remove-features-continuous-monitoring"
+                )}
+              </li>
+              <li>
+                {l10n.getString(
+                  "fix-flow-data-broker-profiles-automatic-remove-features-breach-alerts"
+                )}
+              </li>
+            </ul>
+          </div>
+          {/* Plan select */}
+          <div className={styles.selectedPlan}>
+            <strong>
+              {l10n.getString(
+                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-headline"
+              )}
+              <small>
+                {selectedPlanIsYearly
+                  ? l10n.getString(
+                      "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-yearly-frequency"
+                    )
+                  : l10n.getString(
+                      "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-monthly-frequency"
+                    )}
+              </small>
+            </strong>
+            {/* Price */}
+            <span>
+              {selectedPlanIsYearly
+                ? l10n.getString(
+                    "fix-flow-data-broker-profiles-automatic-remove-features-price",
+                    { price: "X.XX" }
+                  )
+                : l10n.getString(
+                    "fix-flow-data-broker-profiles-automatic-remove-features-price",
+                    { price: "X.XX" }
+                  )}
+            </span>
+            <Button
+              variant="primary"
+              href={
+                selectedPlanIsYearly
+                  ? yearlySubscriptionUrl
+                  : monthlySubscriptionUrl
+              }
+            >
+              {selectedPlanIsYearly
+                ? l10n.getString(
+                    "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-yearly-button"
+                  )
+                : l10n.getString(
+                    "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-monthly-button"
+                  )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx
@ -2,153 +2,17 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-"use client";
+import getPremiumSubscriptionUrl from "../../../../../../../../functions/server/getPremiumSubscriptionUrl";
+import AutomaticRemove from "./View";

-import React, { useState } from "react";
-import styles from "../dataBrokerProfiles.module.scss";
-import { Button } from "../../../../../../../../components/server/Button";
-import { useL10n } from "../../../../../../../../hooks/l10n";
-import getPremiumSubscriptionUrl from "../../../../../../../../functions/universal/getPremiumSubscriptionUrl";
-
-export default function AutomaticRemove() {
-  const l10n = useL10n();
-
-  const [selectedPlanIsYearly, setSelectedPlanIsYearly] = useState(true);
-
-  const dataBrokerCount = parseInt(
-    process.env.NEXT_PUBLIC_ONEREP_DATA_BROKER_COUNT as string,
-    10
-  );
+const monthlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "monthly" });
+const yearlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "yearly" });

+export default function Layout() {
  return (
-    <div>
-      <div className={`${styles.content} ${styles.contentAutomaticRemove}`}>
-        <h3>
-          {l10n.getString(
-            "fix-flow-data-broker-profiles-automatic-remove-headline"
-          )}
-        </h3>
-        <p>
-          {l10n.getString(
-            "fix-flow-data-broker-profiles-automatic-remove-subheadline",
-            {
-              data_broker_count: dataBrokerCount,
-            }
-          )}
-        </p>
-      </div>
-      <div className={styles.content}>
-        <div className={styles.upgradeToggleWrapper}>
-          <div className={styles.upgradeToggle}>
-            <button
-              onClick={() => setSelectedPlanIsYearly(!selectedPlanIsYearly)}
-              className={`${selectedPlanIsYearly ? styles.isActive : ""}`}
-            >
-              {l10n.getString(
-                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-yearly"
-              )}
-            </button>
-            <button
-              onClick={() => setSelectedPlanIsYearly(!selectedPlanIsYearly)}
-              className={`${selectedPlanIsYearly ? "" : styles.isActive}`}
-            >
-              {l10n.getString(
-                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-toggle-monthly"
-              )}
-            </button>
-          </div>
-          <span>
-            {l10n.getString(
-              "fix-flow-data-broker-profiles-automatic-remove-save-percent",
-              { percent: 10 }
-            )}
-          </span>
-        </div>
-        <div className={styles.upgradeContentWrapper}>
-          {/* Feature List */}
-          <div className={styles.featuresList}>
-            <strong>
-              {l10n.getString(
-                "fix-flow-data-broker-profiles-automatic-remove-features-headline"
-              )}
-            </strong>
-            <ul>
-              <li>
-                {l10n.getString(
-                  "fix-flow-data-broker-profiles-automatic-remove-features-monthly-scan",
-                  {
-                    data_broker_count: dataBrokerCount,
-                  }
-                )}
-              </li>
-              <li>
-                {l10n.getString(
-                  "fix-flow-data-broker-profiles-automatic-remove-features-remove-personal-info"
-                )}
-              </li>
-              <li>
-                {l10n.getString(
-                  "fix-flow-data-broker-profiles-automatic-remove-features-guided-experience"
-                )}
-              </li>
-              <li>
-                {l10n.getString(
-                  "fix-flow-data-broker-profiles-automatic-remove-features-continuous-monitoring"
-                )}
-              </li>
-              <li>
-                {l10n.getString(
-                  "fix-flow-data-broker-profiles-automatic-remove-features-breach-alerts"
-                )}
-              </li>
-            </ul>
-          </div>
-          {/* Plan select */}
-          <div className={styles.selectedPlan}>
-            <strong>
-              {l10n.getString(
-                "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-headline"
-              )}
-              <small>
-                {selectedPlanIsYearly
-                  ? l10n.getString(
-                      "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-yearly-frequency"
-                    )
-                  : l10n.getString(
-                      "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-monthly-frequency"
-                    )}
-              </small>
-            </strong>
-            {/* Price */}
-            <span>
-              {selectedPlanIsYearly
-                ? l10n.getString(
-                    "fix-flow-data-broker-profiles-automatic-remove-features-price",
-                    { price: "X.XX" }
-                  )
-                : l10n.getString(
-                    "fix-flow-data-broker-profiles-automatic-remove-features-price",
-                    { price: "X.XX" }
-                  )}
-            </span>
-            <Button
-              variant="primary"
-              href={getPremiumSubscriptionUrl({
-                type: selectedPlanIsYearly ? "yearly" : "monthly",
-              })}
-              onPress={() => (window.location.href = "../../subscribed")} // TODO replace with final UI
-            >
-              {selectedPlanIsYearly
-                ? l10n.getString(
-                    "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-yearly-button"
-                  )
-                : l10n.getString(
-                    "fix-flow-data-broker-profiles-automatic-remove-features-select-plan-monthly-button"
-                  )}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <AutomaticRemove
+      monthlySubscriptionUrl={monthlySubscriptionUrl}
+      yearlySubscriptionUrl={yearlySubscriptionUrl}
+    ></AutomaticRemove>
  );
 }
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/01c.ManualRemove.stories.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/manual-remove/01c.ManualRemove.stories.tsx
@ -71,7 +71,13 @@ export const ManualRemoveViewStory: Story = {
  name: "1c. Manually resolve brokers",
  render: () => {
    return (
-      <Shell l10n={getEnL10nSync()} session={mockedSession} nonce="">
+      <Shell
+        l10n={getEnL10nSync()}
+        session={mockedSession}
+        nonce=""
+        monthlySubscriptionUrl=""
+        yearlySubscriptionUrl=""
+      >
        <FixView
          breaches={mockedBreachSummary}
          userScannedResults={mockedScanData.results}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/ViewDataBrokers.stories.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/fix/data-broker-profiles/view-data-brokers/ViewDataBrokers.stories.tsx
@ -114,7 +114,13 @@ const ViewWrapper = (props: ViewWrapperProps) => {
  };

  return (
-    <Shell l10n={getEnL10nSync()} session={mockedSession} nonce="">
+    <Shell
+      l10n={getEnL10nSync()}
+      session={mockedSession}
+      nonce=""
+      monthlySubscriptionUrl=""
+      yearlySubscriptionUrl=""
+    >
      <FixView
        breaches={mockedBreachesEmpty}
        userScannedResults={scanData.results}
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/layout.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/layout.tsx
@ -9,11 +9,14 @@ import { authOptions } from "../../../../../api/utils/auth";
 import { Shell } from "../../../Shell";
 import { SignInButton } from "../../../../../(nextjs_migration)/components/client/SignInButton";
 import { headers } from "next/headers";
+import getPremiumSubscriptionUrl from "../../../../../functions/server/getPremiumSubscriptionUrl";

 export default async function Layout({ children }: { children: ReactNode }) {
  const l10nBundles = getL10nBundles();
  const l10n = getL10n(l10nBundles);
  const session = await getServerSession(authOptions);
+  const monthlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "monthly" });
+  const yearlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "yearly" });

  if (!session) {
    return <SignInButton autoSignIn={true} />;
@ -22,7 +25,13 @@ export default async function Layout({ children }: { children: ReactNode }) {
  const nonce = headers().get("x-nonce") ?? "";

  return (
-    <Shell l10n={l10n} session={session} nonce={nonce}>
+    <Shell
+      l10n={l10n}
+      session={session}
+      nonce={nonce}
+      monthlySubscriptionUrl={monthlySubscriptionUrl}
+      yearlySubscriptionUrl={yearlySubscriptionUrl}
+    >
      {children}
    </Shell>
  );
--- a/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/page.tsx
+++ b/src/app/(proper_react)/redesign/(authenticated)/user/dashboard/page.tsx
@ -15,7 +15,7 @@ import { getOnerepProfileId } from "../../../../../../db/tables/subscribers";

 import { isFlagEnabled } from "../../../../../functions/server/featureFlags";
 import { isEligibleForFreeScan } from "../../../../../functions/server/onerep";
-import { refreshStoredScanResults } from "../../../../../functions/server/refreshStoredScanResults";
+import getPremiumSubscriptionUrl from "../../../../../functions/server/getPremiumSubscriptionUrl";
 export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  if (!session?.user?.subscriber?.id) {
@ -34,14 +34,7 @@ export default async function DashboardPage() {
    return redirect("/redesign/user/welcome/");
  }

-  // This contains the latest scan results in our database.
  const latestScan = await getLatestOnerepScanResults(profileId);
-
-  // Attempt to fetch the current scan results from the provider.
-  if (latestScan) {
-    await refreshStoredScanResults(profileId);
-  }
-
  const subBreaches = await getSubscriberBreaches(session.user);

  const userIsEligibleForFreeScan = await isEligibleForFreeScan(
@ -56,6 +49,9 @@ export default async function DashboardPage() {
  );
  const featureFlagsEnabled = { FreeBrokerScan, PremiumBrokerRemoval };

+  const monthlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "monthly" });
+  const yearlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "yearly" });
+
  return (
    <View
      countryCode={countryCode}
@ -64,6 +60,8 @@ export default async function DashboardPage() {
      userScanData={latestScan}
      userBreaches={subBreaches}
      featureFlagsEnabled={featureFlagsEnabled}
+      monthlySubscriptionUrl={monthlySubscriptionUrl}
+      yearlySubscriptionUrl={yearlySubscriptionUrl}
    />
  );
 }
--- a/src/app/(proper_react)/redesign/MobileShell.tsx
+++ b/src/app/(proper_react)/redesign/MobileShell.tsx
@ -17,8 +17,10 @@ import { useL10n } from "../../hooks/l10n";
 import { PageLink } from "./PageLink";

 export type Props = {
-  children: ReactNode;
  session: Session;
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
+  children: ReactNode;
 };

 export const MobileShell = (props: Props) => {
@ -101,7 +103,11 @@ export const MobileShell = (props: Props) => {
              </li>
            </ul>
            <div className={styles.premiumCta}>
-              <PremiumBadge user={props.session.user} />
+              <PremiumBadge
+                user={props.session.user}
+                monthlySubscriptionUrl={props.monthlySubscriptionUrl}
+                yearlySubscriptionUrl={props.yearlySubscriptionUrl}
+              />
            </div>
          </div>
        </nav>
--- a/src/app/(proper_react)/redesign/Shell.tsx
+++ b/src/app/(proper_react)/redesign/Shell.tsx
@ -13,21 +13,31 @@ import Link from "next/link";
 import { PageLink } from "./PageLink";
 import { ExtendedReactLocalization } from "../../hooks/l10n";
 import { GaScript } from "./GaScript";
+import getPremiumSubscriptionUrl from "../../functions/server/getPremiumSubscriptionUrl";

 export type Props = {
  l10n: ExtendedReactLocalization;
  session: Session;
  children: ReactNode;
  nonce: string;
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
 };

 export const Shell = (props: Props) => {
  const l10n = props.l10n;

+  const monthlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "monthly" });
+  const yearlySubscriptionUrl = getPremiumSubscriptionUrl({ type: "yearly" });
+
  return (
    <>
      <GaScript nonce={props.nonce} />
-      <MobileShell session={props.session}>
+      <MobileShell
+        session={props.session}
+        monthlySubscriptionUrl={monthlySubscriptionUrl}
+        yearlySubscriptionUrl={yearlySubscriptionUrl}
+      >
        <div className={styles.wrapper}>
          <nav
            className={styles.mainMenu}
--- a/src/app/components/client/PremiumBadge.tsx
+++ b/src/app/components/client/PremiumBadge.tsx
@ -19,9 +19,15 @@ import { useGa } from "../../hooks/useGa";

 export type Props = {
  user: Session["user"];
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
 };

-export default function PremiumBadge({ user }: Props) {
+export default function PremiumBadge({
+  user,
+  monthlySubscriptionUrl,
+  yearlySubscriptionUrl,
+}: Props) {
  const l10n = useL10n();
  const { gtag } = useGa();

@ -54,7 +60,12 @@ export default function PremiumBadge({ user }: Props) {
      <Button {...triggerProps} variant="primary" small>
        {l10n.getString("premium-cta-label")}
      </Button>
-      <PremiumUpsellDialog {...overlayProps} state={dialogState} />
+      <PremiumUpsellDialog
+        {...overlayProps}
+        state={dialogState}
+        monthlySubscriptionUrl={monthlySubscriptionUrl}
+        yearlySubscriptionUrl={yearlySubscriptionUrl}
+      />
    </>
  );
 }
--- a/src/app/components/client/PremiumButton.tsx
+++ b/src/app/components/client/PremiumButton.tsx
@ -44,7 +44,12 @@ export default function PremiumButton({ label }: Props) {
      <Button {...triggerProps} variant="primary" small>
        {l10n.getString(label)}
      </Button>
-      <PremiumUpsellDialog {...overlayProps} state={dialogState} />
+      <PremiumUpsellDialog
+        monthlySubscriptionUrl=""
+        yearlySubscriptionUrl=""
+        {...overlayProps}
+        state={dialogState}
+      />
    </>
  );
 }
--- a/src/app/components/client/PremiumUpsellDialog.tsx
+++ b/src/app/components/client/PremiumUpsellDialog.tsx
@ -14,10 +14,11 @@ import { Button } from "../server/Button";
 import { useL10n } from "../../hooks/l10n";
 import ModalImage from "../client/assets/premium-upsell-dialog-icon.svg";
 import styles from "./PremiumUpsellDialog.module.scss";
-import getPremiumSubscriptionUrl from "../../functions/universal/getPremiumSubscriptionUrl";

 export interface PremiumUpsellDialogProps {
  state: OverlayTriggerState;
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
 }

 function PremiumPricingLabel({ isMonthly }: { isMonthly?: boolean }) {
@ -59,7 +60,15 @@ function PremiumPricingLabel({ isMonthly }: { isMonthly?: boolean }) {
  );
 }

-function PremiumUpsellDialogContent() {
+export interface PremiumUpsellDialogContentProps {
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
+}
+
+function PremiumUpsellDialogContent({
+  monthlySubscriptionUrl,
+  yearlySubscriptionUrl,
+}: PremiumUpsellDialogContentProps) {
  const l10n = useL10n();
  const [selectedTab, setSelectedTab] = useState<Key>("yearly");

@ -129,9 +138,7 @@ function PremiumUpsellDialogContent() {
      </dl>
      <Button
        className={styles.productCta}
-        href={getPremiumSubscriptionUrl({
-          type: isMonthly ? "monthly" : "yearly",
-        })}
+        href={isMonthly ? monthlySubscriptionUrl : yearlySubscriptionUrl}
        variant="primary"
      >
        {isMonthly
@ -148,6 +155,8 @@ function PremiumUpsellDialogContent() {

 function PremiumUpsellDialog({
  state,
+  yearlySubscriptionUrl,
+  monthlySubscriptionUrl,
  ...otherProps
 }: PremiumUpsellDialogProps & OverlayTriggerProps) {
  const l10n = useL10n();
@ -162,7 +171,10 @@ function PremiumUpsellDialog({
            onDismiss={() => void state.close()}
            variant="horizontal"
          >
-            <PremiumUpsellDialogContent />
+            <PremiumUpsellDialogContent
+              monthlySubscriptionUrl={monthlySubscriptionUrl}
+              yearlySubscriptionUrl={yearlySubscriptionUrl}
+            />
          </Dialog>
        </ModalOverlay>
      )}
--- a/src/app/components/client/toolbar/Toolbar.tsx
+++ b/src/app/components/client/toolbar/Toolbar.tsx
@ -11,6 +11,8 @@ import PremiumBadge from "../../client/PremiumBadge";

 export type Props = {
  user: Session["user"];
+  monthlySubscriptionUrl: string;
+  yearlySubscriptionUrl: string;
  children?: ReactNode;
 };

@ -19,7 +21,11 @@ export const Toolbar = (props: Props) => {
    <nav className={styles.toolbar}>
      <div className={styles.start}>{props.children}</div>
      <div className={styles.end}>
-        <PremiumBadge user={props.user} />
+        <PremiumBadge
+          user={props.user}
+          monthlySubscriptionUrl={props.monthlySubscriptionUrl}
+          yearlySubscriptionUrl={props.yearlySubscriptionUrl}
+        />
        <AppPicker />
        {props.user && <UserMenu user={props.user} />}
      </div>
--- a/src/app/functions/universal/getPremiumSubscriptionUrl.ts
+++ b/src/app/functions/universal/getPremiumSubscriptionUrl.ts
@ -9,13 +9,12 @@ interface GetPremiumSubscriptionUrlParams {
 function getPremiumSubscriptionUrl({
  type,
 }: GetPremiumSubscriptionUrlParams): string {
-  const subscriptionUrl = process.env
-    .NEXT_PUBLIC_FXA_SUBSCRIPTIONS_URL as string;
-  const productId = process.env.NEXT_PUBLIC_PREMIUM_PRODUCT_ID as string;
+  const subscriptionUrl = process.env.FXA_SUBSCRIPTIONS_URL as string;
+  const productId = process.env.PREMIUM_PRODUCT_ID as string;
  const planId = (
    type === "monthly"
-      ? process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_MONTHLY_US
-      : process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID_YEARLY_US
+      ? process.env.PREMIUM_PLAN_ID_MONTHLY_US
+      : process.env.PREMIUM_PLAN_ID_YEARLY_US
  ) as string;

  return `${subscriptionUrl}/products/${productId}?plan=${planId}`;