feat: subscribe for updates module (#910)

* feat: subscribe for updates module

* fix: resolve comments

* fix: lint error temporarily

Author: rohanchkrabrty

sdks/js/packages/core/react/components/onboarding/onboarding.module.css

@@ -37,3 +37,10 @@
 .textFieldCode {
   text-align: center;
 }
+
+.subscribeContainer {
+  width: 100%;
+  max-width: 496px;
+  padding: var(--pd-32);
+  box-sizing: border-box;
+}

sdks/js/packages/core/react/components/onboarding/subscribe.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Flex, Text, Switch } from '@raystack/apsara/v1';
+import { Controller, useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { Container } from '../Container';
+import styles from './onboarding.module.css';
+import { PREFERENCE_OPTIONS } from '~/react/utils/constants';
+import { usePreferences } from '~/react/hooks/usePreferences';
+import { ReactNode } from '@tanstack/react-router';
+import { Header } from '../Header';
+import Skeleton from 'react-loading-skeleton';
+
+const schema = yup.object({
+  [PREFERENCE_OPTIONS.NEWSLETTER]: yup.boolean().optional()
+});
+
+type FormData = yup.InferType<typeof schema>;
+
+type SubscribeProps = {
+  logo?: ReactNode;
+  title?: string;
+  preferenceTitle?: string;
+  preferenceDescription?: string;
+  onSubmit?: (data: FormData) => void;
+};
+
+export const Subscribe = ({
+  logo,
+  title = 'Subscribe for updates',
+  preferenceTitle = 'Updates, News & Events',
+  preferenceDescription = 'Stay informed on new features, improvements, and key updates',
+  onSubmit
+}: SubscribeProps) => {
+  const { preferences, isFetching, updatePreferences } = usePreferences();
+
+  const newsletterValue =
+    preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value === 'true';
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    values: {
+      [PREFERENCE_OPTIONS.NEWSLETTER]: newsletterValue
+    },
+    resolver: yupResolver(schema)
+  });
+
+  async function onFormSubmit(data: FormData) {
+    return updatePreferences([
+      {
+        name: PREFERENCE_OPTIONS.NEWSLETTER,
+        value: String(data[PREFERENCE_OPTIONS.NEWSLETTER])
+      }
+    ])
+      .then(() => onSubmit?.(data))
+      .catch(err => {
+        console.error('frontier:sdk:: error during submit', err);
+      });
+  }
+  return (
+    <Flex direction="column" gap="large">
+      <Header logo={logo} title={title} />
+      <form onSubmit={handleSubmit(onFormSubmit)}>
+        <Container
+          className={styles.subscribeContainer}
+          shadow="sm"
+          radius="xs"
+        >
+          <Flex direction="column" gap="medium">
+            <Flex justify="between">
+              <Text size={6} weight={500}>
+                {preferenceTitle}
+              </Text>
+              {isFetching ? (
+                <Skeleton width={34} height={20} />
+              ) : (
+                <Controller
+                  render={({ field: { value, onChange, ...field } }) => (
+                    <Switch
+                      checked={value}
+                      onCheckedChange={onChange}
+                      {...field}
+                    />
+                  )}
+                  control={control}
+                  name={PREFERENCE_OPTIONS.NEWSLETTER}
+                />
+              )}
+            </Flex>
+            <Text size={4} style={{ color: 'var(--foreground-muted)' }}>
+              {preferenceDescription}
+            </Text>
+          </Flex>
+          <Button
+            style={{ width: '100%' }}
+            type="submit"
+            data-test-id="frontier-sdk-subscribe-btn"
+            disabled={isFetching || isSubmitting}
+            loading={isSubmitting}
+            loaderText="Loading..."
+          >
+            Continue
+          </Button>
+        </Container>
+      </form>
+    </Flex>
+  );
+};

sdks/js/packages/core/react/components/organization/preferences/index.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useMemo } from 'react';
 import { GearIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
 import { Image, Select, Separator, Box } from '@raystack/apsara';
 import { Flex, useTheme, Text } from '@raystack/apsara/v1';
@@ -65,13 +64,8 @@ export default function UserPreferences() {
   const { preferences, isLoading, isFetching, updatePreferences } =
     usePreferences();
 
-  const newsletterValue = useMemo(
-    () =>
-      preferences.find(
-        preference => preference.name === PREFERENCE_OPTIONS.NEWSLETTER
-      )?.value ?? 'false',
-    [preferences]
-  );
+  const newsletterValue =
+    preferences?.[PREFERENCE_OPTIONS.NEWSLETTER]?.value ?? 'false';
 
   return (
     <Flex direction="column" style={{ width: '100%' }}>

sdks/js/packages/core/react/hooks/usePreferences.ts

@@ -2,8 +2,10 @@ import { useState, useCallback, useEffect } from 'react';
 import { V1Beta1Preference } from '~/api-client';
 import { useFrontier } from '../contexts/FrontierContext';
 
+type Preferences = Record<string, V1Beta1Preference>;
+
 export interface UsePreferences {
-  preferences: V1Beta1Preference[];
+  preferences: Preferences;
   isLoading: boolean;
   isFetching: boolean;
   status: 'idle' | 'fetching' | 'loading';
@@ -13,18 +15,25 @@ export interface UsePreferences {
   ) => Promise<V1Beta1Preference[] | undefined>;
 }
 
+function getFormattedData(preferences: V1Beta1Preference[] = []): Preferences {
+  return preferences.reduce((acc: Preferences, preference) => {
+    if (preference?.name) acc[preference.name] = preference;
+    return acc;
+  }, {});
+}
+
 export function usePreferences(): UsePreferences {
   const { client } = useFrontier();
-  const [preferences, setPreferences] = useState<V1Beta1Preference[]>([]);
-  const [status, setStatus] = useState<UsePreferences['status']>('idle');
+  const [preferences, setPreferences] = useState<Preferences>({});
+  const [status, setStatus] = useState<UsePreferences['status']>('fetching');
 
   const fetchPreferences = useCallback(async () => {
     try {
       setStatus('fetching');
       const response =
         await client?.frontierServiceListCurrentUserPreferences();
       const data = response?.data.preferences || [];
-      setPreferences(data);
+      setPreferences(getFormattedData(data));
       return data;
     } catch (err) {
       console.error(
@@ -46,7 +55,7 @@ export function usePreferences(): UsePreferences {
             bodies: preferences
           });
         const data = response?.data?.preferences ?? [];
-        setPreferences(data);
+        setPreferences(getFormattedData(data));
         return data;
       } catch (err) {
         console.error(

sdks/js/packages/core/react/index.ts

@@ -9,6 +9,7 @@ export { MagicLink } from './components/onboarding/magiclink';
 export { MagicLinkVerify } from './components/onboarding/magiclink-verify';
 export { SignIn } from './components/onboarding/signin';
 export { SignUp } from './components/onboarding/signup';
+export { Subscribe } from './components/onboarding/subscribe';
 export { CreateOrganization } from './components/organization/create';
 export { OrganizationProfile } from './components/organization/profile';
 export { Window } from './components/window';
@@ -25,3 +26,5 @@ export type {
   FrontierClientOptions,
   FrontierClientBillingOptions
 } from '../shared/types';
+
+export { PREFERENCE_OPTIONS } from './utils/constants';

sdks/js/packages/sdk-demo/src/app/subscribe/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+import { Flex } from '@raystack/apsara';
+// import { Subscribe } from '@raystack/frontier/react';
+import React from 'react';
+
+export default function SubscribeRoute() {
+  return (
+    <Flex
+      justify="center"
+      align="center"
+      style={{ height: '100vh', width: '100vw' }}
+    >
+      {/* <Subscribe onSubmit={data => alert(JSON.stringify(data))} /> */}
+    </Flex>
+  );
+}