@betterinternship/components 1.3.7 → 1.4.1

package/dist/hooks/useClientProcess.d.ts

@@ -1,21 +1,30 @@
 type ProcessStatus = "pending" | "handled" | "failed";
-interface UseAsyncProcessOptions {
+export interface ProcessCallbackDto {
     processId: string;
-    baseInterval?: number;
-    maxInterval?: number;
+    processName: string;
+}
+export interface ProcessResponse {
+    processId: string;
+    processName: string;
+    processCallbackUrl: string;
+    success: boolean;
+    message?: string;
 }
 /**
- * Hook for handling async processes on client.
+ * A simpler version, where u just pass the async function that returns process data.
  *
- * @hook
- * @param UseAsyncProcessOptions
+ * @param caller
  * @returns
  */
-export declare function useClientProcess<T>({ processId, baseInterval, maxInterval, }: UseAsyncProcessOptions): {
-    status: ProcessStatus;
+export declare function useClientProcess<T, R>({ caller, loadingMessage, successMessage, failureMessage }: {
+    caller: (inputs: T) => Promise<ProcessResponse>;
+    loadingMessage?: string;
+    successMessage?: string;
+    failureMessage?: string;
+}): {
+    run: (inputs: T) => Promise<void>;
     attempts: number;
+    status: ProcessStatus;
     result: unknown;
-    error: string | undefined;
-    isFetching: boolean;
 };
 export {};

package/dist/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useRef } from 'react';
+import React__default, { useState, useEffect, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import 'react-dom';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -3322,18 +3323,329 @@ const Button = React__default.forwardRef(({ className, variant, scheme, size, as
 });
 Button.displayName = "Button";
 
+function __insertCSS(code) {
+  if (typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0];
+  let style = document.createElement('style');
+  style.type = 'text/css';
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code));
+}
+Array(12).fill(0);
+
+let toastsCounter = 1;
+class Observer {
+    constructor(){
+        // We use arrow functions to maintain the correct `this` reference
+        this.subscribe = (subscriber)=>{
+            this.subscribers.push(subscriber);
+            return ()=>{
+                const index = this.subscribers.indexOf(subscriber);
+                this.subscribers.splice(index, 1);
+            };
+        };
+        this.publish = (data)=>{
+            this.subscribers.forEach((subscriber)=>subscriber(data));
+        };
+        this.addToast = (data)=>{
+            this.publish(data);
+            this.toasts = [
+                ...this.toasts,
+                data
+            ];
+        };
+        this.create = (data)=>{
+            var _data_id;
+            const { message, ...rest } = data;
+            const id = typeof (data == null ? void 0 : data.id) === 'number' || ((_data_id = data.id) == null ? void 0 : _data_id.length) > 0 ? data.id : toastsCounter++;
+            const alreadyExists = this.toasts.find((toast)=>{
+                return toast.id === id;
+            });
+            const dismissible = data.dismissible === undefined ? true : data.dismissible;
+            if (this.dismissedToasts.has(id)) {
+                this.dismissedToasts.delete(id);
+            }
+            if (alreadyExists) {
+                this.toasts = this.toasts.map((toast)=>{
+                    if (toast.id === id) {
+                        this.publish({
+                            ...toast,
+                            ...data,
+                            id,
+                            title: message
+                        });
+                        return {
+                            ...toast,
+                            ...data,
+                            id,
+                            dismissible,
+                            title: message
+                        };
+                    }
+                    return toast;
+                });
+            } else {
+                this.addToast({
+                    title: message,
+                    ...rest,
+                    dismissible,
+                    id
+                });
+            }
+            return id;
+        };
+        this.dismiss = (id)=>{
+            if (id) {
+                this.dismissedToasts.add(id);
+                requestAnimationFrame(()=>this.subscribers.forEach((subscriber)=>subscriber({
+                            id,
+                            dismiss: true
+                        })));
+            } else {
+                this.toasts.forEach((toast)=>{
+                    this.subscribers.forEach((subscriber)=>subscriber({
+                            id: toast.id,
+                            dismiss: true
+                        }));
+                });
+            }
+            return id;
+        };
+        this.message = (message, data)=>{
+            return this.create({
+                ...data,
+                message
+            });
+        };
+        this.error = (message, data)=>{
+            return this.create({
+                ...data,
+                message,
+                type: 'error'
+            });
+        };
+        this.success = (message, data)=>{
+            return this.create({
+                ...data,
+                type: 'success',
+                message
+            });
+        };
+        this.info = (message, data)=>{
+            return this.create({
+                ...data,
+                type: 'info',
+                message
+            });
+        };
+        this.warning = (message, data)=>{
+            return this.create({
+                ...data,
+                type: 'warning',
+                message
+            });
+        };
+        this.loading = (message, data)=>{
+            return this.create({
+                ...data,
+                type: 'loading',
+                message
+            });
+        };
+        this.promise = (promise, data)=>{
+            if (!data) {
+                // Nothing to show
+                return;
+            }
+            let id = undefined;
+            if (data.loading !== undefined) {
+                id = this.create({
+                    ...data,
+                    promise,
+                    type: 'loading',
+                    message: data.loading,
+                    description: typeof data.description !== 'function' ? data.description : undefined
+                });
+            }
+            const p = Promise.resolve(promise instanceof Function ? promise() : promise);
+            let shouldDismiss = id !== undefined;
+            let result;
+            const originalPromise = p.then(async (response)=>{
+                result = [
+                    'resolve',
+                    response
+                ];
+                const isReactElementResponse = React__default.isValidElement(response);
+                if (isReactElementResponse) {
+                    shouldDismiss = false;
+                    this.create({
+                        id,
+                        type: 'default',
+                        message: response
+                    });
+                } else if (isHttpResponse(response) && !response.ok) {
+                    shouldDismiss = false;
+                    const promiseData = typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
+                    const description = typeof data.description === 'function' ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
+                    const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
+                    const toastSettings = isExtendedResult ? promiseData : {
+                        message: promiseData
+                    };
+                    this.create({
+                        id,
+                        type: 'error',
+                        description,
+                        ...toastSettings
+                    });
+                } else if (response instanceof Error) {
+                    shouldDismiss = false;
+                    const promiseData = typeof data.error === 'function' ? await data.error(response) : data.error;
+                    const description = typeof data.description === 'function' ? await data.description(response) : data.description;
+                    const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
+                    const toastSettings = isExtendedResult ? promiseData : {
+                        message: promiseData
+                    };
+                    this.create({
+                        id,
+                        type: 'error',
+                        description,
+                        ...toastSettings
+                    });
+                } else if (data.success !== undefined) {
+                    shouldDismiss = false;
+                    const promiseData = typeof data.success === 'function' ? await data.success(response) : data.success;
+                    const description = typeof data.description === 'function' ? await data.description(response) : data.description;
+                    const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
+                    const toastSettings = isExtendedResult ? promiseData : {
+                        message: promiseData
+                    };
+                    this.create({
+                        id,
+                        type: 'success',
+                        description,
+                        ...toastSettings
+                    });
+                }
+            }).catch(async (error)=>{
+                result = [
+                    'reject',
+                    error
+                ];
+                if (data.error !== undefined) {
+                    shouldDismiss = false;
+                    const promiseData = typeof data.error === 'function' ? await data.error(error) : data.error;
+                    const description = typeof data.description === 'function' ? await data.description(error) : data.description;
+                    const isExtendedResult = typeof promiseData === 'object' && !React__default.isValidElement(promiseData);
+                    const toastSettings = isExtendedResult ? promiseData : {
+                        message: promiseData
+                    };
+                    this.create({
+                        id,
+                        type: 'error',
+                        description,
+                        ...toastSettings
+                    });
+                }
+            }).finally(()=>{
+                if (shouldDismiss) {
+                    // Toast is still in load state (and will be indefinitely — dismiss it)
+                    this.dismiss(id);
+                    id = undefined;
+                }
+                data.finally == null ? void 0 : data.finally.call(data);
+            });
+            const unwrap = ()=>new Promise((resolve, reject)=>originalPromise.then(()=>result[0] === 'reject' ? reject(result[1]) : resolve(result[1])).catch(reject));
+            if (typeof id !== 'string' && typeof id !== 'number') {
+                // cannot Object.assign on undefined
+                return {
+                    unwrap
+                };
+            } else {
+                return Object.assign(id, {
+                    unwrap
+                });
+            }
+        };
+        this.custom = (jsx, data)=>{
+            const id = (data == null ? void 0 : data.id) || toastsCounter++;
+            this.create({
+                jsx: jsx(id),
+                id,
+                ...data
+            });
+            return id;
+        };
+        this.getActiveToasts = ()=>{
+            return this.toasts.filter((toast)=>!this.dismissedToasts.has(toast.id));
+        };
+        this.subscribers = [];
+        this.toasts = [];
+        this.dismissedToasts = new Set();
+    }
+}
+const ToastState = new Observer();
+// bind this to the toast function
+const toastFunction = (message, data)=>{
+    const id = (data == null ? void 0 : data.id) || toastsCounter++;
+    ToastState.addToast({
+        title: message,
+        ...data,
+        id
+    });
+    return id;
+};
+const isHttpResponse = (data)=>{
+    return data && typeof data === 'object' && 'ok' in data && typeof data.ok === 'boolean' && 'status' in data && typeof data.status === 'number';
+};
+const basicToast = toastFunction;
+const getHistory = ()=>ToastState.toasts;
+const getToasts = ()=>ToastState.getActiveToasts();
+// We use `Object.assign` to maintain the correct types as we would lose them otherwise
+const toast = Object.assign(basicToast, {
+    success: ToastState.success,
+    info: ToastState.info,
+    warning: ToastState.warning,
+    error: ToastState.error,
+    custom: ToastState.custom,
+    message: ToastState.message,
+    promise: ToastState.promise,
+    dismiss: ToastState.dismiss,
+    loading: ToastState.loading
+}, {
+    getHistory,
+    getToasts
+});
+
+__insertCSS("[data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-sonner-toaster][data-lifted=true]{transform:none}}[data-sonner-toaster][data-x-position=right]{right:var(--offset-right)}[data-sonner-toaster][data-x-position=left]{left:var(--offset-left)}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:var(--offset-top)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description]{color:inherit}[data-sonner-toaster][data-sonner-theme=dark] [data-description]{color:#e8e8e8}[data-sonner-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-sonner-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);background:var(--normal-bg);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-x-position=right]{right:0}[data-sonner-toast][data-x-position=left]{left:0}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-sonner-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-sonner-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}");
+
 /**
  * The orchestrator service to get the process from.
  *
  * @param processId
  * @returns
  */
-const orchestratorFetcher = (processId) => fetch(`${config.orchestratorApi}/${encodeURIComponent(processId)}`, {
+const processStatusChecker = (processId) => fetch(`${config.orchestratorApi}/${encodeURIComponent(processId)}`, {
     method: "GET",
     headers: {
         "Content-Type": "application/json",
     },
 });
+/**
+ * This fetches from the callback endpoint.
+ *
+ * @param processId
+ * @returns
+ */
+const processCallbackFetcher = (processId, processName, processCallbackUrl) => fetch(`${processCallbackUrl}`, {
+    method: "POST",
+    headers: {
+        "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+        processId,
+        processName,
+    })
+});
 /**
  * Hook for handling async processes on client.
  *
@@ -3341,28 +3653,35 @@ const orchestratorFetcher = (processId) => fetch(`${config.orchestratorApi}/${en
  * @param UseAsyncProcessOptions
  * @returns
  */
-function useClientProcess({ processId, baseInterval = 1000, maxInterval = 30000, }) {
+function useClientProcessBase({ processId, processName, processCallbackUrl, baseInterval = 1000, maxInterval = 30000, }) {
     const [status, setStatus] = useState("pending");
     const attemptRef = useRef(0);
     const query = useQuery({
-        queryKey: ["process", processId],
+        queryKey: ["process", processName, processId],
         queryFn: async () => {
             if (!processId)
                 throw new Error("No processId");
-            const res = await orchestratorFetcher(processId);
-            if (res.status === "pending") {
-                setStatus("pending");
-            }
-            else if (res.status === "handled") {
+            if (!processName)
+                throw new Error("No processName");
+            const statusResponse = await processStatusChecker(processId);
+            // Handled! Return the proper response too
+            if (statusResponse.status === "handled") {
+                const response = await processCallbackFetcher(processId, processName, processCallbackUrl);
                 setStatus("handled");
+                return response;
             }
-            else if (res.status === "failed") {
+            // Pending or failed
+            if (statusResponse.status === "pending") {
+                setStatus("pending");
+            }
+            else if (statusResponse.status === "failed") {
                 setStatus("failed");
             }
-            return res;
+            // Return null since no response
+            return null;
         },
         // Fetching only works if the task hasn't been resolved
-        enabled: !!processId && status !== "handled" && status !== "failed",
+        enabled: !!processId && !!processName,
         // Returns the next interval length to use to wait for fetch
         refetchInterval: (query) => {
             const data = query.state.data;
@@ -3381,6 +3700,51 @@ function useClientProcess({ processId, baseInterval = 1000, maxInterval = 30000,
         isFetching: query.isFetching,
     };
 }
+/**
+ * A simpler version, where u just pass the async function that returns process data.
+ *
+ * @param caller
+ * @returns
+ */
+function useClientProcess({ caller, loadingMessage, successMessage, failureMessage }) {
+    const [response, setResponse] = useState();
+    const clientProcess = useClientProcessBase({
+        processId: response?.processId,
+        processName: response?.processName,
+        processCallbackUrl: response?.processCallbackUrl,
+    });
+    useEffect(() => {
+        if (!response?.processId)
+            return;
+        // Update toast to show current state
+        if (clientProcess.status === 'pending') {
+            toast.loading(loadingMessage ?? "Loading...", {
+                id: response.processId,
+                duration: Infinity,
+            });
+        }
+        else if (clientProcess.status === 'failed') {
+            toast.error(failureMessage ?? "Something went wrong.", {
+                id: response.processId
+            });
+        }
+        else if (clientProcess.status === 'handled') {
+            toast.success(successMessage ?? "Success!", {
+                id: response.processId
+            });
+        }
+    }, [response, clientProcess]);
+    const wrappedCaller = async (inputs) => {
+        const response = await caller(inputs);
+        setResponse(response);
+    };
+    return {
+        run: wrappedCaller,
+        attempts: clientProcess.attempts,
+        status: clientProcess.status,
+        result: clientProcess.result
+    };
+}
 
 export { Button, buttonVariants, config, configure, useClientProcess };
 //# sourceMappingURL=index.esm.js.map