@antelopejs/dms-saas 0.1.8 → 0.2.1

package/frontend-vue/app/composables/useWorkspaceFinalization.ts

@@ -2,8 +2,9 @@
  * Completing a self-service registration that entered without a workspace.
  *
  * The account already exists — it signed in through OAuth, or through any
- * entry point that ends on a tenant assignment token — and everything that is
- * still missing is bought here: a workspace, a plan, a card. The API answers
+ * entry point that ends on a tenant assignment token — and what is still
+ * missing is opened here: a workspace on the free plan, with a card when the
+ * deployment asks for one. The API answers
  * with a session for the workspace it just provisioned, so the visitor lands
  * signed in rather than back on the login screen.
  *
@@ -26,34 +27,17 @@ export const SESSION_ESTABLISH_ENDPOINT = "/auth/establish";
 /** DMS API route that provisions the workspace and mints that token pair. */
 export const WORKSPACE_FINALIZE_ENDPOINT = "/api/saas/register/finalize";
 
-export interface WorkspaceFinalizationAddress {
-  country: string;
-  line1?: string;
-  postalCode?: string;
-  city?: string;
-}
-
-/** The completion form as the visitor left it, plus the confirmed card. */
+/** The completion form as the visitor left it, plus the card if one was taken. */
 export interface WorkspaceFinalization {
   tenantAssignmentToken: string;
   workspaceName: string;
-  planId: string;
-  customerType: "individual" | "business";
-  companyName: string;
-  vatNumber: string;
-  address: WorkspaceFinalizationAddress;
-  paymentMethodId: string;
+  paymentMethodId?: string;
 }
 
 export interface WorkspaceFinalizationPayload {
   tenant_assignment_token: string;
   workspaceName: string;
-  planId: string;
-  customerType: "individual" | "business";
-  companyName?: string;
-  vatNumber?: string;
-  address: WorkspaceFinalizationAddress;
-  paymentMethodId: string;
+  paymentMethodId?: string;
 }
 
 /** What `/auth/establish` takes: an endpoint to call, and its body. */
@@ -70,26 +54,17 @@ export interface SessionEstablishRequest {
  * named in the envelope is the one the operator allowed — a page that inlined
  * either would drift from the other.
  *
- * Company fields only travel for a business customer: an individual who typed
- * a company name and switched back would otherwise be invoiced as one.
- *
- * @param finalization Completion form and confirmed payment method
+ * @param finalization Completion form and the card, when one was confirmed
  * @returns Body to POST to `/auth/establish`
  */
 export function buildSessionEstablishRequest(
   finalization: WorkspaceFinalization,
 ): SessionEstablishRequest {
-  const isBusiness = finalization.customerType === "business";
   return {
     endpoint: WORKSPACE_FINALIZE_ENDPOINT,
     payload: {
       tenant_assignment_token: finalization.tenantAssignmentToken,
       workspaceName: finalization.workspaceName,
-      planId: finalization.planId,
-      customerType: finalization.customerType,
-      companyName: isBusiness ? finalization.companyName : undefined,
-      vatNumber: isBusiness ? finalization.vatNumber : undefined,
-      address: finalization.address,
       paymentMethodId: finalization.paymentMethodId,
     },
   };

package/frontend-vue/app/custom-pages/auth/no-workspace.vue

@@ -1,19 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 
-interface PlanOption {
-  _id: string;
-  name: string;
-  description: string;
-  price: number;
-  currency: string;
-  interval: string;
-  trialDays: number;
-  audience: string;
-  borderColor: string | null;
-  borderLabel: string | null;
-}
-
 interface OAuthProviderOption {
   id: string;
   label: string;
@@ -25,34 +12,29 @@ interface DmsPublicRuntime {
   oauthProviders?: OAuthProviderOption[];
 }
 
-interface DmsSaasPublicRuntimeConfig {
-  stripePublishableKey?: string;
-  admissionMode?: "open" | "invitation-only";
-}
-
 interface PendingRegistration {
   email: string;
   name: string;
   provider: string | null;
 }
 
-const PLANS_ENDPOINT = "/api/saas/plans/public";
 const SETUP_INTENT_ENDPOINT = "/api/saas/register/setup-intent";
 const PENDING_ENDPOINT = "/api/saas/register/pending";
 const LOGIN_REDIRECT = "/auth/login";
 const PAYMENT_ELEMENT_ID = "dms-saas-finalize-payment-element";
 const HOME_REDIRECT = "/";
 const FALLBACK_PROVIDER_ICON = "i-ph-shield-check";
+const DEFAULT_WORKSPACE_NAME_KEY = "saas.register.default_workspace_name";
 
 const route = useDmsRoute();
 const config = useDmsRuntimeConfig();
 const nuxtApp = useDmsApp();
-const dmsSaasRuntime = computed(
-  () => config.public.dmsSaas as DmsSaasPublicRuntimeConfig | undefined,
-);
-const isRegistrationClosed = computed(
-  () => dmsSaasRuntime.value?.admissionMode === "invitation-only",
-);
+const dmsSaasRuntime = config.public.dmsSaas as
+  | DmsSaasPublicRuntimeConfig
+  | undefined;
+const isRegistrationClosed = isRegistrationClosedBy(dmsSaasRuntime);
+const paymentMethodPolicy = resolveRegistrationPaymentPolicy(dmsSaasRuntime);
+const canSkipPaymentMethod = paymentMethodPolicy === "optional";
 
 const tenantAssignmentToken = computed<string>(() => {
   const value = route.query.token;
@@ -63,53 +45,24 @@ const dmsRuntime = computed<DmsPublicRuntime>(
   () => config.public.dms as DmsPublicRuntime,
 );
 
-const stripePublishableKey = computed<string>(
-  () => dmsSaasRuntime.value?.stripePublishableKey ?? "",
-);
-
 // Only `finalize` goes through the frontend server, and only because it opens
 // the session cookie on the workspace it provisions; every other public
 // registration endpoint is called on the DMS API directly.
 const apiFetch = $fetch.create({ baseURL: dmsRuntime.value.baseURL });
 
-const { countryItems } = useBillingCountries();
-
-const customerType = ref<"individual" | "business">("individual");
-const workspaceName = ref("");
-const companyName = ref("");
-const vatNumber = ref("");
-const country = ref("");
-const addressLine1 = ref("");
-const postalCode = ref("");
-const city = ref("");
-const selectedPlanId = ref<string | null>(null);
-const plans = ref<PlanOption[]>([]);
-const isLoadingPlans = ref(false);
 const isSubmitting = ref(false);
 const errorMessage = ref<string | null>(null);
 const { resolveApiError } = useApiErrorMessage();
 const pendingRegistration = ref<PendingRegistration | null>(null);
 const entryErrorMessage = ref<string | null>(null);
 const hasAcceptedLegal = ref(false);
+const skipsPaymentMethod = ref(false);
 const stripeHandle = ref<ReturnType<typeof useStripePaymentElement> | null>(
   null,
 );
 
-const customerTypeItems = computed(() => [
-  {
-    value: "individual",
-    label: nuxtApp.$i18n.t("saas.register.customer_type.individual"),
-  },
-  {
-    value: "business",
-    label: nuxtApp.$i18n.t("saas.register.customer_type.business"),
-  },
-]);
-
-const filteredPlans = computed(() =>
-  plans.value.filter(
-    (plan) => plan.audience === "any" || plan.audience === customerType.value,
-  ),
+const isPaymentStepVisible = computed(() =>
+  isPaymentStepShown(paymentMethodPolicy, skipsPaymentMethod.value),
 );
 
 const tokenMissing = computed(() => tenantAssignmentToken.value.length === 0);
@@ -141,14 +94,16 @@ const entryDescription = computed<string>(() => {
   });
 });
 
+const missingRequirement = computed(() =>
+  firstMissingRegistrationRequirement({
+    isPaymentRequired: isPaymentStepVisible.value,
+    isPaymentReady: stripeHandle.value !== null,
+    hasAcceptedLegal: hasAcceptedLegal.value,
+  }),
+);
+
 const submitDisabled = computed(
-  () =>
-    isSubmitting.value ||
-    isLoadingPlans.value ||
-    !selectedPlanId.value ||
-    !workspaceName.value ||
-    !country.value ||
-    !hasAcceptedLegal.value,
+  () => isSubmitting.value || !hasAcceptedLegal.value,
 );
 
 const submitLabel = computed(() =>
@@ -167,20 +122,12 @@ async function loadPendingRegistration(): Promise<void> {
   );
 }
 
-async function loadPlans(): Promise<void> {
-  isLoadingPlans.value = true;
-  try {
-    plans.value = await apiFetch<PlanOption[]>(PLANS_ENDPOINT);
-  } finally {
-    isLoadingPlans.value = false;
-  }
-}
-
 async function initStripeElement(): Promise<void> {
-  if (!stripePublishableKey.value) return;
+  const publishableKey = dmsSaasRuntime?.stripePublishableKey;
+  if (!publishableKey || paymentMethodPolicy === "none") return;
   const setup = await apiFetch<{ clientSecret: string }>(SETUP_INTENT_ENDPOINT);
   stripeHandle.value = useStripePaymentElement({
-    publishableKey: stripePublishableKey.value,
+    publishableKey,
     clientSecret: setup.clientSecret,
     containerId: PAYMENT_ELEMENT_ID,
   });
@@ -192,6 +139,17 @@ function backToLogin(): void {
   }
 }
 
+/** The confirmed card, undefined when none is collected, null on failure. */
+async function confirmPaymentMethod(): Promise<string | undefined | null> {
+  if (!isPaymentStepVisible.value) return undefined;
+  const confirm = await stripeHandle.value?.confirmAndGetPaymentMethod();
+  if (confirm?.paymentMethodId) return confirm.paymentMethodId;
+  errorMessage.value =
+    confirm?.error?.message ??
+    nuxtApp.$i18n.t("saas.register.error.no_payment");
+  return null;
+}
+
 async function submit(): Promise<void> {
   if (tokenMissing.value) {
     errorMessage.value = nuxtApp.$i18n.t(
@@ -199,48 +157,23 @@ async function submit(): Promise<void> {
     );
     return;
   }
-  if (!selectedPlanId.value) {
-    errorMessage.value = nuxtApp.$i18n.t("saas.register.error.no_plan");
-    return;
-  }
-  if (!stripeHandle.value) {
-    errorMessage.value = nuxtApp.$i18n.t("saas.register.error.no_payment");
-    return;
-  }
-  if (!hasAcceptedLegal.value) {
-    errorMessage.value = nuxtApp.$i18n.t("saas.register.error.legal_required");
-    return;
-  }
-  if (!country.value) {
-    errorMessage.value = nuxtApp.$i18n.t("saas.register.error.no_country");
+  if (missingRequirement.value) {
+    errorMessage.value = nuxtApp.$i18n.t(missingRequirement.value);
     return;
   }
   errorMessage.value = null;
   isSubmitting.value = true;
   try {
-    const confirm = await stripeHandle.value.confirmAndGetPaymentMethod();
-    if (confirm.error || !confirm.paymentMethodId) {
-      errorMessage.value =
-        confirm.error?.message ??
-        nuxtApp.$i18n.t("saas.register.error.no_payment");
-      return;
-    }
+    const paymentMethodId = await confirmPaymentMethod();
+    if (paymentMethodId === null) return;
     await $fetch(SESSION_ESTABLISH_ENDPOINT, {
       method: "POST",
       body: buildSessionEstablishRequest({
         tenantAssignmentToken: tenantAssignmentToken.value,
-        workspaceName: workspaceName.value,
-        planId: selectedPlanId.value,
-        customerType: customerType.value,
-        companyName: companyName.value,
-        vatNumber: vatNumber.value,
-        address: {
-          country: country.value,
-          line1: addressLine1.value || undefined,
-          postalCode: postalCode.value || undefined,
-          city: city.value || undefined,
-        },
-        paymentMethodId: confirm.paymentMethodId,
+        workspaceName: nuxtApp.$i18n.t(DEFAULT_WORKSPACE_NAME_KEY, {
+          name: pendingRegistration.value?.name ?? "",
+        }),
+        paymentMethodId,
       }),
     });
     if (typeof window !== "undefined") {
@@ -254,7 +187,7 @@ async function submit(): Promise<void> {
 }
 
 onMounted(async () => {
-  if (tokenMissing.value || isRegistrationClosed.value) return;
+  if (tokenMissing.value || isRegistrationClosed) return;
   // The identity is resolved before anything is asked of the user: an expired
   // token or an account that already owns a workspace must fail here, not
   // after a card has been entered.
@@ -268,7 +201,6 @@ onMounted(async () => {
     return;
   }
   try {
-    await loadPlans();
     await initStripeElement();
   } catch (error) {
     errorMessage.value = resolveApiError(error, "saas.register.error.failed");
@@ -341,91 +273,14 @@ onMounted(async () => {
         :description="$t('saas.oauth_registration.identity.hint')"
       />
 
-      <UCard>
-        <template #header>
-          <div>
-            <h2 class="text-lg font-semibold">
-              {{ $t("saas.no_workspace.section.details") }}
-            </h2>
-            <p class="text-muted mt-1 text-sm">
-              {{ $t("saas.no_workspace.section.details_hint") }}
-            </p>
-          </div>
-        </template>
-        <div class="flex flex-col gap-4">
-          <URadioGroup
-            v-model="customerType"
-            orientation="horizontal"
-            :items="customerTypeItems"
-          />
-          <UFormField :label="$t('saas.register.field.workspace_name')">
-            <UInput
-              v-model="workspaceName"
-              icon="i-ph-buildings"
-              required
-              class="w-full"
-            />
-          </UFormField>
-          <template v-if="customerType === 'business'">
-            <UFormField :label="$t('saas.register.field.company_name')">
-              <UInput v-model="companyName" required class="w-full" />
-            </UFormField>
-            <UFormField :label="$t('saas.register.field.vat_number')">
-              <UInput v-model="vatNumber" class="w-full" />
-            </UFormField>
-          </template>
-          <h3 class="font-semibold">
-            {{ $t("saas.register.billing_address") }}
-          </h3>
-          <UFormField :label="$t('saas.register.field.country')">
-            <USelect v-model="country" :items="countryItems" class="w-full" />
-          </UFormField>
-          <UFormField :label="$t('saas.register.field.address_line1')">
-            <UInput v-model="addressLine1" class="w-full" />
-          </UFormField>
-          <div class="grid grid-cols-2 gap-4">
-            <UFormField :label="$t('saas.register.field.postal_code')">
-              <UInput v-model="postalCode" class="w-full" />
-            </UFormField>
-            <UFormField :label="$t('saas.register.field.city')">
-              <UInput v-model="city" class="w-full" />
-            </UFormField>
-          </div>
-        </div>
-      </UCard>
-
-      <UCard>
-        <template #header>
-          <div>
-            <h2 class="text-lg font-semibold">
-              {{ $t("saas.no_workspace.section.plan") }}
-            </h2>
-            <p class="text-muted mt-1 text-sm">
-              {{ $t("saas.no_workspace.section.plan_hint") }}
-            </p>
-          </div>
-        </template>
-        <div
-          v-if="isLoadingPlans"
-          class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4"
-        >
-          <USkeleton v-for="i in 3" :key="i" class="h-40 rounded-lg" />
-        </div>
-        <div
-          v-else
-          class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4"
-        >
-          <DmsSaasPlanCardPublic
-            v-for="plan in filteredPlans"
-            :key="plan._id"
-            :plan="plan"
-            :selected="selectedPlanId === plan._id"
-            @select="selectedPlanId = $event"
-          />
-        </div>
-      </UCard>
+      <UCheckbox
+        v-if="canSkipPaymentMethod"
+        v-model="skipsPaymentMethod"
+        :label="$t('saas.register.skip_payment_method')"
+      />
 
-      <UCard>
+      <!-- v-show keeps the Stripe element mounted while the step is hidden. -->
+      <UCard v-show="isPaymentStepVisible">
         <template #header>
           <div>
             <h2 class="text-lg font-semibold">

package/frontend-vue/app/plugins/auth-links.ts

@@ -3,10 +3,6 @@ const REGISTER_LINK_LABEL = "saas.auth.login.create_account";
 const REGISTER_LINK_ROUTE = "/register";
 const REGISTER_LINK_ORDER = 100;
 
-interface DmsSaasPublicRuntimeConfig {
-  admissionMode?: "open" | "invitation-only";
-}
-
 export default defineDmsPlugin(() => {
   const config = useDmsRuntimeConfig();
   const dmsSaas = config.public.dmsSaas as

package/frontend-vue/app/types/runtime-config.ts

@@ -0,0 +1,13 @@
+/**
+ * Whether registration asks for a card, as the deployment configured it in
+ * `registration.paymentMethod`: `required` always does, `optional` lets the
+ * visitor skip it, `none` never shows the card step and never calls Stripe.
+ */
+export type RegistrationPaymentMethodPolicy = "required" | "optional" | "none";
+
+/** What dms-saas publishes to the browser through the frontend module options. */
+export interface DmsSaasPublicRuntimeConfig {
+  stripePublishableKey?: string;
+  admissionMode?: "open" | "invitation-only";
+  registrationPaymentMethod?: RegistrationPaymentMethodPolicy;
+}

package/frontend-vue/dms.frontend.ts

@@ -9,7 +9,12 @@ import footerLinks from './app/plugins/footer-links'
 import planCards from './app/plugins/plan-cards-display.client'
 import segmentConditions from './app/plugins/segment-conditions-data-type.client'
 import sidebarWidgets from './app/plugins/sidebar-widgets'
-import workspaceSuspended from './app/middleware/workspace-suspended.global'
+
+// The tenant access gate's refusal code: the server answers a refused page
+// visit, a reload as much as an Inertia one, with a redirect to the suspended
+// screen instead of its generic 403 page.
+const WORKSPACE_ACCESS_BLOCKED_CODE = 'saas.errors.workspace.access_blocked'
+const WORKSPACE_SUSPENDED_PATH = '/workspace-suspended'
 
 interface VueModule {
 	default: Component
@@ -59,9 +64,10 @@ const frontendModule: DmsFrontendModule = {
 		sdk.registerPlugin(planCards, { clientOnly: true })
 		sdk.registerPlugin(segmentConditions, { clientOnly: true })
 		sdk.registerPlugin(sidebarWidgets)
-		sdk.registerMiddleware('workspace-suspended', workspaceSuspended, {
-			global: true,
-		})
+		sdk.registerAccessRedirect(
+			WORKSPACE_ACCESS_BLOCKED_CODE,
+			WORKSPACE_SUSPENDED_PATH,
+		)
 	},
 }