Merge Develop onto Main

.github/workflows/create-release-pr.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   create-pr-to-main:
-    name: Create release PR
+    name: Create release PR to main
     runs-on: ubuntu-latest
     steps:
       - name: Create Pull Request

.github/workflows/cypress-release-test.yml

@@ -0,0 +1,75 @@
+name: Cypress release tests
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  # vercel will redeploy the develop/staging app on creating a PR to main
+  # wait for new deployment to complete before running tests
+  wait-for-vercel-deployment:
+    name: Wait for vercel deployment
+    runs-on: ubuntu-latest
+    outputs:
+      preview_url: ${{ steps.waitForVercelDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel preview deployment to be ready
+        uses: patrickedqvist/wait-for-vercel-preview@v1.3.1
+        id: waitForVercelDeployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 1000
+          check_interval: 5
+
+  cypress-run:
+    name: Cypress e2e tests
+    needs: wait-for-vercel-deployment
+    runs-on: ubuntu-latest
+    strategy:
+      # when one test fails, DO NOT cancel the other
+      # containers, because this will kill Cypress processes
+      # leaving Cypress Cloud hanging ...
+      # https://github.com/cypress-io/github-action/issues/48
+      fail-fast: false
+      matrix:
+        # run 3 copies of the current job in parallel
+        # this will automatically load balance
+        containers: [1, 2, 3]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Run cypress
+        uses: cypress-io/github-action@v5.0.9
+        with:
+          browser: chrome
+          spec: cypress/**/*.cy.tsx
+          headed: false
+          record: true # send results to cypress dashboard
+          parallel: true
+        env:
+          NEXT_PUBLIC_ROLLBAR_ENV: CI
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+          NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: ${{ secrets.NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN }}
+          NEXT_PUBLIC_STORYBLOK_TOKEN: ${{ secrets.NEXT_PUBLIC_STORYBLOK_TOKEN }}
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+          CYPRESS_BASE_URL: ${{ needs.wait-for-vercel-deployment.outputs.preview_url }}
+          CYPRESS_mail_slurp_api_key: ${{secrets.CYPRESS_MAIL_SLURP_API_KEY}}
+          CYPRESS_inbox_id: ${{secrets.CYPRESS_INBOX_ID}}
+          CYPRESS_reset_pwd_content_email: ${{secrets.CYPRESS_RESET_PWD_CONTENT_EMAIL}}
+          CYPRESS_bumble_partner_admin_email: ${{secrets.CYPRESS_BUMBLE_ADMIN_EMAIL}}
+          CYPRESS_bumble_partner_admin_password: ${{secrets.CYPRESS_TEST_ACCOUNT_PASSWORD}}
+          CYPRESS_badoo_partner_admin_email: ${{secrets.CYPRESS_BADOO_ADMIN_EMAIL}}
+          CYPRESS_badoo_partner_admin_password: ${{secrets.CYPRESS_TEST_ACCOUNT_PASSWORD}}
+          CYPRESS_super_admin_email: ${{secrets.CYPRESS_SUPER_ADMIN_EMAIL}}
+          CYPRESS_super_admin_password: ${{secrets.CYPRESS_TEST_ACCOUNT_PASSWORD}}
+          CYPRESS_public_email: ${{secrets.CYPRESS_PUBLIC_EMAIL}}
+          CYPRESS_public_password: ${{secrets.CYPRESS_PUBLIC_PASSWORD}}
+          CYPRESS_api_url: ${{secrets.CYPRESS_BLOOM_BACKEND_API_URL}}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/cypress-test.yml

@@ -80,7 +80,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
           NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
-          CYPRESS_BASE_URL: 'https://bloom-frontend-git-develop-chaynhq.vercel.app/' # runs cypress against staging
+          CYPRESS_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
           CYPRESS_mail_slurp_api_key: ${{secrets.CYPRESS_MAIL_SLURP_API_KEY}}
           CYPRESS_inbox_id: ${{secrets.CYPRESS_INBOX_ID}}
           CYPRESS_reset_pwd_content_email: ${{secrets.CYPRESS_RESET_PWD_CONTENT_EMAIL}}

public/hotjarNPS.css

@@ -1,205 +1,129 @@
 /* Hotjar CUSTOM styles to override default hotjar CSS */
 
-._hj-widget-container ._hj-Pbej5__styles__resetStyles * {
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-sf3vvt *,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles p,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1xfwja.css-1xfwja.css-1xfwja p,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-zxqk8.css-zxqk8,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-k8m2z1.css-k8m2z1.css-k8m2z1,
+._hj-widget-container
+  ._hj-s3UIi__styles__globalStyles
+  .css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp {
   font-family: 'Open Sans', 'Nunito', 'roboto', 'hotjar', 'sans-serif' !important;
 }
 
-._hj-PZjqr__styles__surveyBranding {
-  display: none !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles a,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-k8m2z1.css-k8m2z1.css-k8m2z1 {
+  text-decoration: underline !important;
+  color: #000000 !important;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-5vKq2__styles__surveyContainer._hj-5vKq2__styles__surveyContainer {
-  width: 30rem !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-sf3vvt.css-sf3vvt {
+  width: 26rem !important;
   max-width: 100vw;
   border-radius: 1.25rem !important;
   padding: 1.5rem !important;
 }
 
 @media (min-width: 480px) {
-  ._hj-widget-container
-    ._hj-s3UIi__styles__globalStyles
-    ._hj-5vKq2__styles__surveyContainer._hj-5vKq2__styles__surveyContainer {
+  ._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-sf3vvt.css-sf3vvt {
     bottom: 1.5rem;
   }
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-kWRoL__styles__openStateToggle {
-  border-top-left-radius: 0.75rem !important;
-  border-top-right-radius: 0.75rem !important;
-  height: 1.25rem !important;
-  top: -1.25rem !important;
-  right: 2rem !important;
-}
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-8Lgv6__styles__surveyActions {
-  min-height: unset !important;
+/* Hotjar branding */
+.css-vp5o9w {
+  display: none !important;
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-XpAaA__styles__surveyFooter {
-  border: none !important;
-  justify-content: center !important;
-}
+/* Primary button styles */
 
-._hj-widget-container._hj-widget-theme-light
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-S9XKO__styles__surveyTitle,
-._hj-widget-container._hj-widget-theme-light
+._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button'],
+._hj-widget-container
   ._hj-s3UIi__styles__globalStyles
-  ._hj-S9XKO__styles__surveyTitle
-  > span {
-  font-weight: 500 !important;
-  font-size: 1rem !important;
-  line-height: 1.4 !important;
-}
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-hTm4\+__styles__answersContentWrapper {
-  padding: 0.5rem 0 1rem !important;
-}
-
-/* Primary button styles */
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton,
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-XpAaA__styles__surveyFooter button {
-  background: #ffbfa4 !important;
+  .css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp {
+  background-color: #ffbfa4 !important;
   color: #000000 !important;
   font-weight: 500 !important;
+  box-shadow: #ffbfa4 0px 0px 0px 1px inset !important;
   border: 1px solid #ffbfa4 !important;
   border-radius: 100rem !important;
   min-width: 5rem !important;
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15) !important;
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton:hover,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button']:hover,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button']:focus,
 ._hj-widget-container
   ._hj-s3UIi__styles__globalStyles
-  ._hj-XpAaA__styles__surveyFooter
-  button:hover {
-  background: rgb(255, 203, 182) !important;
-}
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton:focus,
+  .css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp:hover,
 ._hj-widget-container
   ._hj-s3UIi__styles__globalStyles
-  ._hj-XpAaA__styles__surveyFooter
-  button:focus {
-  background: rgb(255, 203, 182) !important;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15) !important;
+  .css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp.css-lhe9wp:focus {
+  background-color: rgb(255, 203, 182) !important;
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-SU8LU__styles__primaryButton[disabled],
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-XpAaA__styles__surveyFooter
-  button[disabled] {
-  border-color: transparent !important;
-}
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-SU8LU__styles__primaryButton[disabled]:hover,
+/* Consent decline button */
 ._hj-widget-container
   ._hj-s3UIi__styles__globalStyles
-  ._hj-XpAaA__styles__surveyFooter
-  button[disabled]:hover {
-  background: rgb(255, 203, 182) !important;
+  .css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8 {
+  color: #000000 !important;
+  background-color: unset !important;
+  box-shadow: unset !important;
+  font-weight: 400 !important;
 }
 
-/* Input styles */
-
 ._hj-widget-container
   ._hj-s3UIi__styles__globalStyles
-  ._hj-P-UNr__styles__inputField._hj-Wk\+wZ__styles__light {
-  border-color: rgba(0, 0, 0, 0.12) !important;
+  .css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8.css-zxqk8:hover:enabled {
+  color: #000000 !important;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-P-UNr__styles__inputField._hj-Wk\+wZ__styles__light:hover {
-  border-color: #ffbfa4 !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1xfwja.css-1xfwja.css-1xfwja div,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-vr45vp.css-vr45vp {
+  margin-bottom: 0 !important;
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-P-UNr__styles__inputField:focus {
-  outline: none !important;
-  border-color: #ffbfa4 !important;
+/* Collapse popover button */
+._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1ftaqxs.css-1ftaqxs {
+  margin-bottom: 0 !important;
 }
 
-/* Scales styles */
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-ILZpN__styles__scaleLabels {
-  padding-top: 0.5rem !important;
-}
+/* Input styles */
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-CvVSY__styles__scaleOption span,
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-CvVSY__styles__scaleOption._hj-V57HW__styles__selected
-  span {
-  background: none !important;
-  border: 1px solid rgba(0, 0, 0, 0.12) !important;
-  border-radius: 2rem !important;
-  height: 2.125rem !important;
-  width: 2.125rem !important;
-  color: #ea0050 !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='text'],
+._hj-widget-container ._hj-s3UIi__styles__globalStyles textarea:focus {
+  border-color: rgba(0, 0, 0, 0.12) !important;
 }
 
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-CvVSY__styles__scaleOption span:hover {
-  border-color: rgba(0, 0, 0, 0.28) !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='text']:hover,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles textarea:focus:hover {
+  border-color: #ffbfa4 !important;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-CvVSY__styles__scaleOption:focus-within
-  span {
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='text']:focus,
+._hj-widget-container ._hj-s3UIi__styles__globalStyles textarea:focus {
   outline: none !important;
-  border-color: #ff976a !important;
-  border-width: 1.5px !important;
-}
-
-/* Thank you page styles */
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-tHiZi__styles__finalStep {
-  padding: 0.75rem 0.5rem 0 !important;
+  border-color: #ffbfa4 !important;
+  box-shadow: none !important;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-2JZDx__styles__thankYouMessage._hj-iinO7__styles__withConsent {
-  margin-bottom: 0.75rem !important;
-  font-size: 1rem !important;
-  font-weight: 400 !important;
-}
+/* Scales styles */
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-cK\+L-__styles__consentMessage._hj-N21Xh__styles__light,
-._hj-widget-container
-  ._hj_feedback_container
-  ._hj-cK\+L-__styles__consentMessage._hj-N21Xh__styles__light {
-  margin-bottom: 0 !important;
-  color: #000000 !important;
-  font-size: 0.875rem !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='range' i] {
+  appearance: none;
+  background: rgba(0, 0, 0, 0.1) !important;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-SU8LU__styles__primaryButton._hj-oxtSd__styles__declineButton {
-  background-color: transparent !important;
-  color: #000000 !important;
-  margin-right: 0 !important;
-  box-shadow: none !important;
-  border-color: #ffbfa4 !important;
-  border: 1px solid #ffbfa4 !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='range' i]::-webkit-slider-thumb {
+  appearance: none;
+  background-color: #ff976a !important;
+  outline: unset !important;
+  margin-left: -1px;
 }
 
-._hj-widget-container
-  ._hj-s3UIi__styles__globalStyles
-  ._hj-SU8LU__styles__primaryButton._hj-oxtSd__styles__declineButton:hover {
-  background: rgb(255, 203, 182) !important;
-  color: #000000 !important;
-  box-shadow: none !important;
+._hj-widget-container ._hj-s3UIi__styles__globalStyles input[type='range' i]::-moz-range-thumb {
+  appearance: none;
+  background-color: #ff976a !important;
+  outline: unset !important;
+  margin-left: -1px;
 }
-
-._hj-widget-container ._hj-s3UIi__styles__globalStyles ._hj-B\+0X3__styles__consentButton i, ._hj_feedback_container ._hj-B\+0X3__styles__consentButton i {
-  font-size: 15px !important;
-  height: 17px !important;
-}