Customer portal

import { StiggProvider } from '@stigg/react-sdk';

export function App() {
  return (
    <StiggProvider apiKey="<STIGG_CLIENT_API_KEY>" customerId="<LOGGED_IN_CUSTOMER_ID>">
      <NestedComponents />
    </StiggProvider>
  );
}

<script setup lang="ts">
import { StiggProvider, StiggProviderProps } from '@stigg/vue-sdk';

const stiggProvider: StiggProviderProps = {
  apiKey: "<STIGG_CLIENT_API_KEY>",
  customerId: "<LOGGED_IN_CUSTOMER_ID>",
};

</script>

<template>
   <StiggProvider v-bind="stiggProvider">
      <NestedComponents />
   </StiggProvider>
</template>

<CustomerPortal
	paywallComponent={<Paywall />}
	theme={...}
	textOverrides={...}
/>

<script setup lang="ts">
import { CustomerPortal, CustomerPortalProps, Paywall, PaywallProps } from '@stigg/vue-sdk';

const customerPortal: CustomerPortalProps = {
   onManageSubscription: () => {
     console.log('Manage subscription');
   }
};

const paywall: PaywallProps = {
  onPlanSelected: ({plan}) => {
    console.log(`Selected plan: ${plan.displayName}`);
  }
};

</script>

<template>
  <CustomerPortal v-bind="customerPortal">
    <template v-slot:paywall-component>
      <Paywall v-bind="paywall" />
    </template>
  </CustomerPortal>
</template>

import { 
  CustomerPortalProvider,
  CustomerUsageData,
  PaymentDetailsSection,
  /* more components that can be used as standalone
  SubscriptionsOverview,
  AddonsList,
  Promotions,
  InvoicesSection
  */
} from '@stigg/react-sdk"

function App() {
 	return (
		<CustomerPortalProvider theme={...} textOverrides={...}>
			<CustomerUsageData />
			<PaymentDetailsSection />
		</CustomerPortalProvider>    
  )
}

const textOverrides = {  
	manageSubscription: 'Manage',
	usageTabTitle: 'Usage',
	addonsTabTitle: 'Add-ons',
	promotionsTabTitle: 'Promotions',
	promotionsSubtitle: 'You were granted access to additional functionality at no additional cost.',
  contactSupportTitle: 'Have questions about your subscription?',
  contactSupportLink: 'Contact support',
  editBilling: 'Edit billing details',
  invoicesTitle: 'Invoices',
  viewInvoiceHistory: 'View invoice history',
  editPaymentDetails: 'Edit',
  paywallSectionTitle: 'Plans',
  cancelScheduledUpdatesButtonTitle: 'Cancel update',
}

<CustomerPortal
    textOverrides={textOverrides}
    paywallComponent={<Paywall />}
/>

<script setup lang="ts">
import { CustomerPortal, CustomerPortalProps, Paywall, PaywallProps } from '@stigg/vue-sdk';

const textOverrides = {
  manageSubscription: 'Manage',
  usageTabTitle: 'Usage',
  addonsTabTitle: 'Add-ons',
  promotionsTabTitle: 'Promotions',
  promotionsSubtitle: 'You were granted access to additional functionality at no additional cost.',
  contactSupportTitle: 'Have questions about your subscription?',
  contactSupportLink: 'Contact support',
  editBilling: 'Edit billing details',
  invoicesTitle: 'Invoices',
  viewInvoiceHistory: 'View invoice history',
  editPaymentDetails: 'Edit',
  paywallSectionTitle: 'Plans',
  cancelScheduledUpdatesButtonTitle: 'Cancel update',
}

const customerPortal: CustomerPortalProps = {
   textOverrides,
   onManageSubscription: () => {
     console.log('Manage subscription');
   }
};

const paywall: PaywallProps = {
  onPlanSelected: ({plan}) => {
    console.log(`Selected plan: ${plan.displayName}`);
  }
};

</script>

<template>
  <CustomerPortal v-bind="customerPortal">
    <template v-slot:paywall-component>
      <Paywall v-bind="paywall" />
    </template>
  </CustomerPortal>
</template>