compact ui for users to manage their subscriptions -- fits in the xiome-account area

[chase-moskal]

<xiome-store-subscription-controls></xiome-store-subscription-controls>

maybe that's an okay name??

• lots of crossover with XiomeStoreSubscriptionCatalog -- maybe extract out common code, into a magical component?
• or maybe just some common renderer functions?
• or, maybe, this is a good place to actually insert the catalog component?

[chase-moskal]

[chase-moskal]

actually, it's probably best to use <xiome-store-subscription-catalog> within this new component

• we want to implement an allow-plans attribute which can restrict the component about which plans can be displayed
• the reason is so that a merchant can very specifically choose which plans are displayed for sale on a specific page
• but we can also use that functionality to display specific plans (by id), such that this new component can specify showing only the plans that the user is currently subscribed to
• so it's probably preferable to implement the html feature on the catalog as follows:

<xiome-store-subscription-catalog
  allow-plans="
    aeb12312387u128937120938120947
    b213ce123908124098123408945712
  "
></xiome-store-subscription-catalog>

[chase-moskal]

NEW PLAN

[chase-moskal]

<xiome-store-billing-area>

• contains billing panel button (which is the customer portal, we might want to rename it to billing panel)
• if a default payment method is set, we should display it and its details to the user
• if no default payment method is set, we should only display the billing panel button

<xiome-store-subscription-status>

• if there are no subscriptions for this user (neither active nor cancelled), simply render nothing at all (null)
• only show tiers that are active for the user (or cancelled)
• no buttons or user actions are available in this component
• just display the status of subscription tiers
• use a checkmark or x icon for active/cancelled

[chase-moskal]

• in order to test the billing area, which can display a default payment method -- we need to add a "add default payment method" button within the customer portal fake stripe popup -- and other related buttons (link successful payment method, link failing payment method, detach default payment method, etc)
• the new buttons will need to call newly-added secret commands
• the new secret commands will need to add new functions in mock-stripe-operations

[chase-moskal]

• let's simplify the mock fakestripe "customer portal" popup's buttons:
  • create new successful default payment method (removes all previous payment methods)
  • create new failing default payment method (removes all previous payment methods)
  • remove all payment methods

[chase-moskal]

prepare-mock-stripe-operations.ts

async createNewDefaultPaymentMethod({
        stripeAccountId, customer, isFailing,
    }: {
        stripeAccountId: string
        customer: string
        isFailing: boolean
    }) {
    const stripeLiaisonAccount = stripeLiaison.account(stripeAccountId)
    const paymentMethod = await mockHelpers.setPaymentMethod({stripeLiaisonAccount, customer})
    await metaDataTables.paymentMethodMetaData.create({
        id: paymentMethod.id,
        isFailing
    })
    await stripeLiaisonAccount.customers.update(customer, {
        invoice_settings: {
            default_payment_method: paymentMethod.id,
        },
    })
    return paymentMethod
},

[chase-moskal]

• [ ] integrate the new components into <xiome-my-account> -- make these components render nothing (null) if there's no interesting information to present (like when the StripeConnectStatus is not Ready, or when the subscriptions-status component has no subscriptions to display)