sean-brydonGitHubsean@cal.com <Sean@brydon.io>Carina WollendorferDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>* manage billing section * wip billing credits * WIP * WIP * Download expense log * credit worth * skeleton fixes * add org tip * add teams tip * restore service * type check * type check * fix types * additional credits * fix progress bar * add dashed prop * match new designs * hide area with no monthly credits * fix i18n * show current balance label * Update apps/web/modules/settings/billing/billing-view.tsx Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> * spacing + monthly credits not showing additional * Remove additional credits from monthly calculations * feat: replace add members redirect with invite modal in billing settings - Replace Button href with onClick handler to open MemberInvitationModal - Add MemberInvitationModalWithoutMembers import and state management - Maintain existing team/org context support - Follow established modal usage patterns from other components - Fix lint error by using undefined instead of empty arrow function Co-Authored-By: sean@cal.com <Sean@brydon.io> * Remove redudant vars from method * fix type check --------- Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import { SkeletonText, SkeletonContainer, SkeletonButton } from "@calcom/ui/components/skeleton";
|
|
|
|
export function BillingCreditsSkeleton() {
|
|
return (
|
|
<SkeletonContainer>
|
|
<div className="bg-muted border-muted mt-5 rounded-xl p-1">
|
|
<div className="flex flex-col gap-1 px-4 py-5">
|
|
<SkeletonText className="h-4 w-20" /> {/* Credits title */}
|
|
<SkeletonText className="h-4 w-48" /> {/* View and manage credits description */}
|
|
</div>
|
|
<div className="bg-default border-muted flex w-full rounded-[10px] px-5 py-4">
|
|
<div className="w-full">
|
|
{/* Credits section */}
|
|
<div className="mb-4">
|
|
{/* Monthly credits row */}
|
|
<div className="mt-1 flex justify-between">
|
|
<SkeletonText className="h-4 w-32" />
|
|
<SkeletonText className="h-4 w-20" />
|
|
</div>
|
|
{/* Additional credits row */}
|
|
<div className="mt-1 flex justify-between">
|
|
<SkeletonText className="h-4 w-36" />
|
|
<SkeletonText className="h-4 w-20" />
|
|
</div>
|
|
{/* Remaining row */}
|
|
<div className="mt-1 flex justify-between">
|
|
<SkeletonText className="h-4 w-24" />
|
|
<SkeletonText className="h-4 w-20" />
|
|
</div>
|
|
{/* Progress bar */}
|
|
<div className="mt-4">
|
|
<div className="h-2 w-full rounded-md bg-gray-200" />
|
|
</div>
|
|
{/* Credits per tip */}
|
|
<div className="mt-4 flex flex-1 justify-between">
|
|
<SkeletonText className="h-4 w-32" />
|
|
<SkeletonButton className="h-8 w-24 rounded-md" />
|
|
</div>
|
|
</div>
|
|
<div className="-mx-5 mt-5">
|
|
<hr className="border-subtle" />
|
|
</div>
|
|
{/* Additional Credits form */}
|
|
<div className="mt-4 flex">
|
|
<div className="-mb-1 mr-auto w-full">
|
|
<SkeletonText className="mb-2 h-4 w-32" /> {/* Additional credits label */}
|
|
<div className="flex w-full">
|
|
<SkeletonText className="h-9 w-full rounded-md" /> {/* Input field */}
|
|
</div>
|
|
</div>
|
|
<div className="ml-2 mt-auto">
|
|
<SkeletonButton className="h-9 w-12 rounded-md" /> {/* Buy button */}
|
|
</div>
|
|
</div>
|
|
<div className="-mx-5 mt-5">
|
|
<hr className="border-subtle" />
|
|
</div>
|
|
{/* Download Expense Log */}
|
|
<div className="mt-4 flex">
|
|
<div className="mr-auto w-full">
|
|
<SkeletonText className="mb-4 h-4 w-40" /> {/* Download expense log label */}
|
|
<div className="mr-2 mt-1">
|
|
<SkeletonText className="h-9 w-full rounded-md" /> {/* Select dropdown */}
|
|
</div>
|
|
</div>
|
|
<div className="mt-auto">
|
|
<SkeletonButton className="h-9 w-20 rounded-md" /> {/* Download button */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Credit Worth Section */}
|
|
<div className="text-subtle px-5 py-4">
|
|
<SkeletonText className="h-4 w-full" />
|
|
<SkeletonText className="mt-1 h-4 w-3/4" />
|
|
</div>
|
|
</div>
|
|
</SkeletonContainer>
|
|
);
|
|
}
|