@opexa/portal-components 0.0.346 → 0.0.348

package/dist/client/hooks/useUnlinkGoogleMutation.d.ts

@@ -1,3 +1,2 @@
-import { type UnlinkGoogleInput } from '../../services/account';
 import type { Mutation } from '../../types';
-export declare const useUnlinkGoogleMutation: Mutation<void, UnlinkGoogleInput>;
+export declare const useUnlinkGoogleMutation: Mutation<void, string>;

package/dist/client/hooks/useUnlinkGoogleMutation.js

@@ -10,10 +10,10 @@ export const useUnlinkGoogleMutation = (config) => {
     return useMutation({
         ...config,
         mutationKey: getUnlinkGoogleMutationKey(),
-        mutationFn: async (input) => {
+        mutationFn: async (id) => {
             const session = await getSession();
             invariant(session.status === 'authenticated');
-            await unlinkGoogle(input.id, {
+            await unlinkGoogle(id, {
                 headers: {
                     Authorization: `Bearer ${session.token}`,
                 },

package/dist/components/AccountInfo/AccountInfo.js

@@ -20,11 +20,14 @@ import { toaster } from '../../client/utils/toaster.js';
 import { AUTH_ENDPOINT, PLATFORM_CODE } from '../../constants/index.js';
 import { FacebookIcon } from '../../icons/FacebookIcon.js';
 import { GoogleIcon } from '../../icons/GoogleIcon.js';
+import { LinkBroken02Icon } from '../../icons/LinkBroken02Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
 import avatar from '../../images/placeholder-avatar.png';
 import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { IconButton } from '../../ui/IconButton/index.js';
-import { GoogleDisconnect } from './GoogleDisconnect.js';
+import { Portal } from '../../ui/Portal/index.js';
 export function AccountInfo(props) {
     return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, {}), _jsx(SSO, { google: props.googleSso, facebook: props.facebookSso })] }));
 }
@@ -163,8 +166,6 @@ const LinkGoogleAccount = () => {
     const account = accountQuery.data;
     const sessionQuery = useSessionQuery();
     const session = sessionQuery.data;
-    const unlinkGoogleAccountMutation = useUnlinkGoogleMutation();
-    const disclosure = useDisclosure();
     const loginGoogle = useGoogleLogin({
         flow: 'auth-code',
         state: encodeURIComponent(`${window.location.origin},${PLATFORM_CODE},${session?.token}`),
@@ -174,17 +175,28 @@ const LinkGoogleAccount = () => {
     });
     if (!account)
         return null;
-    return (_jsxs("div", { className: "flex items-center gap-sm", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), !account.googleId ? (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Google" }), _jsx("p", { className: "mt-xs text-text-secondary-700 text-xs leading-tight", children: "Not Connected" })] })) : (_jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Google" }), _jsx("p", { className: "mt-xs text-text-success-primary-600 text-xs leading-tight", children: "Connected" })] }))] }), account.googleId ? (_jsx(GoogleDisconnect, { onConfirmAction: (ctx) => (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Button, { variant: "outline", disabled: unlinkGoogleAccountMutation.isPending, onClick: () => ctx.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkGoogleAccountMutation.isPending, onClick: () => unlinkGoogleAccountMutation.mutate({ id: account.id }, {
-                                onSuccess: () => {
-                                    ctx.setOpen(false);
-                                },
-                                onError: () => {
-                                    toaster.error({
-                                        title: 'Error',
-                                        description: 'An error occurred while disconnecting your Google account. Please try again later.',
-                                    });
-                                },
-                            }), children: "Disconnect" })] })), children: (ctx) => {
-                    return (_jsx("button", { type: "button", onClick: () => ctx.setOpen(true), className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }));
-                } })) : (_jsx(Button, { onClick: () => loginGoogle(), fullWidth: false, children: "Connect" }))] }));
+    return (_jsxs("div", { className: "flex items-center gap-sm", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm leading-tight", children: "Google" }), _jsx("p", { className: twMerge('mt-xs text-xs leading-tight', account.googleId
+                                    ? 'text-text-success-primary-600'
+                                    : 'text-text-secondary-700'), children: account.googleId ? 'Connected' : 'Not Connected' })] })] }), account.googleId ? (_jsx(UnlinkGoogleAccount, {})) : (_jsx(Button, { onClick: () => loginGoogle(), fullWidth: false, children: "Connect" }))] }));
 };
+function UnlinkGoogleAccount() {
+    const accountQuery = useAccountQuery();
+    const account = accountQuery.data;
+    const disclosure = useDisclosure();
+    const unlinkGoogleMutation = useUnlinkGoogleMutation({
+        onSuccess() {
+            disclosure.setOpen(false);
+        },
+        onError() {
+            toaster.error({
+                title: 'Error',
+                description: 'An error occurred while disconnecting your Google account. Please try again later.',
+            });
+        },
+    });
+    if (!account)
+        return null;
+    return (_jsxs(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => disclosure.setOpen(details.open), lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: [_jsx(Dialog.Trigger, { className: "font-semibold text-button-tertiary-error-fg text-sm", children: "Disconnect" }), _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto max-w-[25rem] overflow-y-auto rounded-xl p-6", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "mx-auto flex size-12 items-center justify-center rounded-full bg-bg-brand-secondary text-text-brand", children: _jsx(LinkBroken02Icon, {}) }), _jsx(Dialog.Title, { className: "mb-1 text-center font-semibold text-lg xl:mt-xl", children: "Disconnect Google Account" }), _jsx(Dialog.Description, { className: "text-center text-sm text-text-tertiary-600 leading-2xl", children: "Are you sure you want to disconnect your Google account? This may affect your ability to log in or sync data." })] }), _jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex justify-between gap-2 pt-6", children: [_jsx(Button, { variant: "outline", disabled: unlinkGoogleMutation.isPending, onClick: () => api.setOpen(false), children: "Cancel" }), _jsx(Button, { variant: "solid", disabled: unlinkGoogleMutation.isPending, onClick: () => {
+                                                    unlinkGoogleMutation.mutate(account.id);
+                                                }, children: "Disconnect" })] })) })] }) })] })] }));
+}

package/dist/icons/LinkBroken02Icon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBroken02Icon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBroken02Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBroken02Icon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "m8.5 15.5 7-7M9 4V2m6 18v2M4 9H2m18 6h2M4.914 4.914 3.5 3.5m15.586 15.586L20.5 20.5M12 17.657l-2.121 2.121a4 4 0 1 1-5.657-5.657L6.343 12m11.314 0 2.121-2.121a4 4 0 0 0-5.657-5.657L12 6.343" }) }));
+}

package/dist/services/account.js

@@ -257,9 +257,9 @@ export const getGoogleClientId = cache(async (options) => {
     const res = await graphqlRequest(ACCOUNT_GRAPHQL_ENDPOINT, GOOGLE_CLIENT_ID, undefined, options);
     return res.googleClientId ?? null;
 });
-export const unlinkGoogle = cache(async (id, options) => {
+export const unlinkGoogle = async (id, options) => {
     await graphqlRequest(ACCOUNT_GRAPHQL_ENDPOINT, UNLINK_GOOGLE, { input: { id } }, options);
-});
+};
 export const generateSumsubVerificationToken = async (options) => {
     const res = await graphqlRequest(ACCOUNT_GRAPHQL_ENDPOINT, GENERATE_SUMSUB_VERIFICATION_TOKEN, undefined, options);
     return res.generateSumsubVerificationToken;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.346",
+	"version": "0.0.348",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",