refine button loading and order actions

components/loading-dots.tsx

@@ -4,7 +4,7 @@ import { VariantProps, tv } from 'tailwind-variants';
 const loadingDots = tv({
   slots: {
     root: 'mx-2 inline-flex items-center',
-    dots: 'bg-content  inline-block animate-blink rounded-full'
+    dots: 'bg-content inline-block animate-blink rounded-full'
   },
   variants: {
     size: {

components/orders/activate-warranty.tsx

@@ -15,6 +15,11 @@ const ActivateWarranty = ({ order }: ActivateWarrantyModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const isWarrantyActivated = order?.warrantyStatus?.value === WarrantyStatus.Activated;
   const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline?.value);
+  const isOrderConfirmed = order?.orderConfirmation?.value;
+
+  if (!isOrderConfirmed) {
+    return null;
+  }
 
   if (isWarrantyActivated) {
     return <WarrantyActivatedBadge />;

components/orders/order-confirmation-modal.tsx

@@ -189,10 +189,9 @@ export default function OrderConfirmationModal({
   onClose: () => void;
 }) {
   const [loading, setLoading] = useState(true);
-  const [submitting, setSubmitting] = useState(false);
   const [orderConfirmationContent, setOrderConfirmationContent] =
     useState<OrderConfirmationContent>();
-  const [, startTransition] = useTransition();
+  const [submitting, startTransition] = useTransition();
   const formRef = useRef<HTMLFormElement>(null);
 
   useEffect(() => {
@@ -210,12 +209,11 @@ export default function OrderConfirmationModal({
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
-    setSubmitting(true);
     const form = formRef.current;
     if (!form) return;
-    const formData = new FormData(form);
 
     startTransition(async () => {
+      const formData = new FormData(form);
       await confirmOrder({
         order,
         content: orderConfirmationContent!,
@@ -269,6 +267,7 @@ export default function OrderConfirmationModal({
                   color="primary"
                   disabled={submitting || loading}
                   isLoading={submitting}
+                  loadingText="Submitting"
                 >
                   Submit
                 </Button>

components/profile/popover.tsx

@@ -22,11 +22,10 @@ function SignInButton({ message }: { message: string | null }) {
       {message && <div className="my-5">{message}</div>}
       <Button
         type="submit"
-        aria-label="Log in"
-        aria-disabled={pending}
+        aria-label="Sign In"
         disabled={pending}
         isLoading={pending}
-        loadingText="Signing In..."
+        loadingText="Signing In"
         className="w-full"
       >
         Sign In
@@ -38,11 +37,18 @@ function SignInButton({ message }: { message: string | null }) {
 const LogoutButton = () => {
   const { pending } = useFormStatus();
   return (
-    <Button disabled={pending} type="submit" variant="outlined" className="w-full">
-      {pending ? 'Logging Out...' : 'Log Out'}
+    <Button
+      disabled={pending}
+      type="submit"
+      className="w-full"
+      isLoading={pending}
+      loadingText="Logging Out"
+    >
+      Log Out
     </Button>
   );
 };
+
 const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
   const [message, action] = useFormState(doLogin, null);
   const [, logoutAction] = useFormState(doLogout, null);

components/ui/button.tsx

@@ -19,7 +19,8 @@ const buttonVariants = tv({
       'disabled:pointer-events-none disabled:shadow-none',
       focusInput
     ],
-    loading: 'pointer-events-none flex shrink-0 items-center justify-center gap-1.5'
+    loading: 'pointer-events-none flex shrink-0 items-center justify-center gap-1.5',
+    loadingDots: ''
   },
   variants: {
     size: {
@@ -39,13 +40,15 @@ const buttonVariants = tv({
     },
     variant: {
       solid: {
-        root: 'border border-transparent shadow-sm'
+        root: 'shadow-sm',
+        loadingDots: 'bg-white'
       },
       outlined: {
-        root: 'border bg-white shadow-sm'
+        root: 'bg-white shadow-sm ring-1 ring-inset ring-gray-300',
+        loadingDots: 'bg-content'
       },
       text: {
-        root: 'border border-transparent'
+        loadingDots: 'bg-content'
       }
     }
   },
@@ -161,7 +164,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className,
       disabled,
       isLoading,
-      loadingText = 'Loading',
+      loadingText,
       size,
       color,
       variant,
@@ -170,7 +173,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     }: ButtonProps,
     forwardedRef
   ) => {
-    const { loading, root } = buttonVariants({ variant, size, color });
+    const { loading, loadingDots, root } = buttonVariants({ variant, size, color });
 
     const Component = as || 'button';
     return (
@@ -183,7 +186,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {isLoading ? (
           <span className={loading()}>
-            <LoadingDots className="bg-white" />
+            <LoadingDots className={loadingDots()} />
             <span className="sr-only">{loadingText}</span>
             <span>{loadingText}</span>
           </span>