feat: redo settings and all org pages. (#601)

* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
2025-12-02 09:54:38 +01:00
parent 531516a8f7
commit c7854efae3
350 changed files with 13928 additions and 3895 deletions
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { t } from '$lib/utils/functions/translations';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { currentOrgPlan, isFreePlan } from '$lib/utils/store/org';
+  import HourglassIcon from '@lucide/svelte/icons/hourglass';
+  import { openUpgradeModal } from '$lib/utils/functions/org';
+  import ReceiptIcon from '@lucide/svelte/icons/receipt';
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+
+  import { Button } from '@cio/ui/base/button';
+  import * as Item from '@cio/ui/base/item';
+
+  let isRedirecting = $state(false);
+
+  async function onOpenBilling() {
+    console.log({
+      plan: $currentOrgPlan
+    });
+
+    try {
+      if ($currentOrgPlan?.provider === 'polar') {
+        const url = new URL('/api/polar/portal', window.location.origin);
+        url.searchParams.set('customerId', $currentOrgPlan?.customerId || '');
+
+        window.open(url.toString(), '_blank');
+      }
+
+      if ($currentOrgPlan?.provider === 'lmz') {
+        isRedirecting = true;
+        const url = new URL('/api/lmz/subscription', window.location.origin);
+        url.searchParams.set('subscriptionId', $currentOrgPlan?.subscriptionId);
+
+        const response = await fetch(url.toString());
+        const result = await response.json();
+
+        isRedirecting = false;
+
+        window.open(result.customerPortal, '_blank');
+      }
+    } catch (error) {
+      isRedirecting = false;
+
+      console.error(error);
+      snackbar.error($t('settings.billing.error'));
+    }
+  }
+</script>
+
+<div class="max-w-lg! flex w-full flex-col gap-4 px-2">
+  <p class="text-md font-medium">{$t('settings.billing.manage')}</p>
+
+  {#if $isFreePlan}
+    <Item.Root variant="outline">
+      <Item.Media variant="icon">
+        <HourglassIcon />
+      </Item.Media>
+      <Item.Content>
+        <Item.Description>{$t('settings.billing.active')}</Item.Description>
+      </Item.Content>
+      <Item.Actions>
+        <Button size="sm" variant="outline" onclick={openUpgradeModal}>Upgrade</Button>
+      </Item.Actions>
+    </Item.Root>
+  {:else}
+    <Item.Root variant="outline">
+      <Item.Media variant="icon">
+        <ReceiptIcon />
+      </Item.Media>
+      <Item.Content>
+        <Item.Description>{$t('settings.billing.provider')}</Item.Description>
+      </Item.Content>
+      <Item.Actions>
+        <Button size="sm" variant="outline" onclick={onOpenBilling} loading={isRedirecting}>
+          <ExternalLinkIcon class="size-4" />
+          {$t('settings.billing.open_billing')}
+        </Button>
+      </Item.Actions>
+    </Item.Root>
+  {/if}
+</div>