Remove recoil sync (#11569)

Recoil-sync was causing issues with Firefox, replacing it with a simpler
mechanism to hydrate variables on page load

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>

packages/twenty-front/src/modules/app/hooks/useInitializeQueryParamState.ts

@@ -0,0 +1,66 @@
+import { useRecoilCallback } from 'recoil';
+
+import { isQueryParamInitializedState } from '@/app/states/isQueryParamInitializedState';
+import { billingCheckoutSessionState } from '@/auth/states/billingCheckoutSessionState';
+import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
+import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
+
+// Initialize state that are hydrated from query parameters
+// We used to use recoil-sync to do this, but it was causing issues with Firefox
+export const useInitializeQueryParamState = () => {
+  const initializeQueryParamState = useRecoilCallback(
+    ({ set, snapshot }) =>
+      () => {
+        const isInitialized = snapshot
+          .getLoadable(isQueryParamInitializedState)
+          .getValue();
+
+        if (!isInitialized) {
+          const handlers = {
+            billingCheckoutSession: (value: string) => {
+              try {
+                const parsedValue = JSON.parse(decodeURIComponent(value));
+
+                if (
+                  typeof parsedValue === 'object' &&
+                  parsedValue !== null &&
+                  'plan' in parsedValue &&
+                  'interval' in parsedValue &&
+                  'requirePaymentMethod' in parsedValue
+                ) {
+                  set(
+                    billingCheckoutSessionState,
+                    parsedValue as BillingCheckoutSession,
+                  );
+                }
+              } catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(
+                  'Failed to parse billingCheckoutSession from URL',
+                  error,
+                );
+                set(
+                  billingCheckoutSessionState,
+                  BILLING_CHECKOUT_SESSION_DEFAULT_VALUE,
+                );
+              }
+            },
+          };
+
+          const queryParams = new URLSearchParams(window.location.search);
+
+          for (const [paramName, handler] of Object.entries(handlers)) {
+            const value = queryParams.get(paramName);
+            if (value !== null) {
+              handler(value);
+            }
+          }
+
+          set(isQueryParamInitializedState, true);
+        }
+      },
+    [],
+  );
+
+  return { initializeQueryParamState };
+};