Add invalid billing address notification (#19349)

* Add webhook events

* Properly set AutomaticTax

* Use address element

* 💄

* Update susbcription on address update

* Try scroll modal

* Fix

* try fix modal scroll

* Add toast notification

* Add invalidBillingAddress column to d_b_stripe_customer

* 💄

* 💄

* Fix

* Try fix update

* Address feedback

Author: jeanp413

components/dashboard/package.json

@@ -17,8 +17,8 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@stripe/react-stripe-js": "^1.7.2",
-    "@stripe/stripe-js": "^1.29.0",
+    "@stripe/react-stripe-js": "^2.4.0",
+    "@stripe/stripe-js": "^2.4.0",
     "@tanstack/query-async-storage-persister": "^4.29.19",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-query-devtools": "^4.29.19",

components/dashboard/src/AppNotifications.tsx

@@ -13,6 +13,9 @@ import { trackEvent } from "./Analytics";
 import { useUpdateCurrentUserMutation } from "./data/current-user/update-mutation";
 import { User as UserProtocol } from "@gitpod/gitpod-protocol";
 import { User } from "@gitpod/public-api/lib/gitpod/v1/user_pb";
+import { useCurrentOrg } from "./data/organizations/orgs-query";
+import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
+import { getGitpodService } from "./service/service";
 
 const KEY_APP_DISMISSED_NOTIFICATIONS = "gitpod-app-notifications-dismissed";
 const PRIVACY_POLICY_LAST_UPDATED = "2023-12-20";
@@ -59,26 +62,66 @@ const UPDATED_PRIVACY_POLICY = (updateUser: (user: Partial<UserProtocol>) => Pro
     } as Notification;
 };
 
+const INVALID_BILLING_ADDRESS = () => {
+    return {
+        id: "invalid-billing-address",
+        type: "warning",
+        preventDismiss: true,
+        message: (
+            <span className="text-md">
+                Your billing address is invalid, taxes (if applicable) won't be calculated. Please update your billing
+                address.
+            </span>
+        ),
+    } as Notification;
+};
+
 export function AppNotifications() {
     const [topNotification, setTopNotification] = useState<Notification | undefined>(undefined);
     const { user, loading } = useUserLoader();
     const { mutateAsync } = useUpdateCurrentUserMutation();
 
+    const currentOrg = useCurrentOrg().data;
+    const attrId = currentOrg ? AttributionId.createFromOrganizationId(currentOrg.id) : undefined;
+    const attributionId = attrId && AttributionId.render(attrId);
+
     useEffect(() => {
-        const notifications = [];
-        if (!loading && isGitpodIo()) {
-            if (
-                !user?.profile?.acceptedPrivacyPolicyDate ||
-                new Date(PRIVACY_POLICY_LAST_UPDATED) > new Date(user.profile.acceptedPrivacyPolicyDate)
-            ) {
-                notifications.push(UPDATED_PRIVACY_POLICY((u: Partial<UserProtocol>) => mutateAsync(u)));
+        let ignore = false;
+
+        const updateNotifications = async () => {
+            const notifications = [];
+            if (!loading) {
+                if (
+                    isGitpodIo() &&
+                    (!user?.profile?.acceptedPrivacyPolicyDate ||
+                        new Date(PRIVACY_POLICY_LAST_UPDATED) > new Date(user.profile.acceptedPrivacyPolicyDate))
+                ) {
+                    notifications.push(UPDATED_PRIVACY_POLICY((u: Partial<UserProtocol>) => mutateAsync(u)));
+                }
+
+                if (attributionId) {
+                    const [subscriptionId, invalidBillingAddress] = await Promise.all([
+                        getGitpodService().server.findStripeSubscriptionId(attributionId),
+                        getGitpodService().server.isCustomerBillingAddressInvalid(attributionId),
+                    ]);
+                    if (subscriptionId && invalidBillingAddress) {
+                        notifications.push(INVALID_BILLING_ADDRESS());
+                    }
+                }
             }
-        }
 
-        const dismissedNotifications = getDismissedNotifications();
-        const topNotification = notifications.find((n) => !dismissedNotifications.includes(n.id));
-        setTopNotification(topNotification);
-    }, [loading, mutateAsync, user]);
+            if (!ignore) {
+                const dismissedNotifications = getDismissedNotifications();
+                const topNotification = notifications.find((n) => !dismissedNotifications.includes(n.id));
+                setTopNotification(topNotification);
+            }
+        };
+        updateNotifications();
+
+        return () => {
+            ignore = true;
+        };
+    }, [loading, mutateAsync, user, attributionId]);
 
     const dismissNotification = useCallback(() => {
         if (!topNotification) {

components/dashboard/src/components/Modal.tsx

@@ -77,22 +77,25 @@ export const Modal: FC<Props> = ({
     return (
         <Portal>
             {/* backdrop overlay */}
-            <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen focus:ring-0" tabIndex={0}>
+            <div
+                className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 h-full w-full overflow-y-auto overflow-x-hidden outline-none focus:ring-0"
+                tabIndex={0}
+            >
                 {/* Modal outer-container for positioning */}
-                <div className="flex justify-center items-center w-screen h-screen">
+                <div className="pointer-events-none relative h-[calc(100%-1rem)] w-auto min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
                     <FocusOn
                         autoFocus={autoFocus}
                         onClickOutside={handleClickOutside}
                         onEscapeKey={handleEscape}
                         focusLock={!disableFocusLock}
+                        className="relative max-h-[100%] w-full"
                     >
                         {/* Visible Modal */}
                         <div
                             className={cn(
-                                "relative flex flex-col max-h-screen max-w-screen",
-                                "w-screen h-screen sm:w-auto sm:h-auto sm:max-w-lg",
+                                "pointer-events-auto max-h-[100%] w-full flex-col overflow-hidden",
+                                "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 outline-none",
                                 "p-6 text-left",
-                                "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800",
                                 "filter drop-shadow-xl",
                                 "rounded-none sm:rounded-xl",
                                 className,
@@ -167,17 +170,18 @@ export const ModalHeader: FC<ModalHeaderProps> = ({ children }) => {
 type ModalBodyProps = {
     children: ReactNode;
     hideDivider?: boolean;
-    noScroll?: boolean;
 };
 
-export const ModalBody: FC<ModalBodyProps> = ({ children, hideDivider = false, noScroll = false }) => {
+export const ModalBody: FC<ModalBodyProps> = ({ children, hideDivider = false }) => {
     return (
         // Allows the first tabbable element in the body to receive focus on mount
         <AutoFocusInside
-            className={cn("md:flex-grow relative border-gray-200 dark:border-gray-800 -mx-6 px-6 pb-6", {
-                "border-t border-b mt-2 py-4": !hideDivider,
-                "overflow-y-auto": !noScroll,
-            })}
+            className={cn(
+                "md:flex-grow relative border-gray-200 dark:border-gray-800 -mx-6 px-6 pb-6 overflow-y-auto",
+                {
+                    "border-t border-b mt-2 py-4": !hideDivider,
+                },
+            )}
         >
             {children}
         </AutoFocusInside>

components/dashboard/src/components/billing/AddPaymentMethodModal.tsx

@@ -5,7 +5,7 @@
  */
 
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { Elements, PaymentElement, AddressElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { FC, useCallback, useMemo } from "react";
 import Modal, { ModalBody, ModalFooter, ModalFooterAlert, ModalHeader } from "../Modal";
 import { ReactComponent as Spinner } from "../../icons/Spinner.svg";
@@ -101,6 +101,7 @@ function AddPaymentMethodForm({ attributionId }: { attributionId: string }) {
                     release in order to verify your payment method.
                 </Alert>
                 <PaymentElement id="payment-element" />
+                <AddressElement id="address-element" options={{ mode: "billing", display: { name: "organization" } }} />
             </ModalBody>
             <ModalFooter
                 className="justify-between"

components/gitpod-db/go/stripe_customer.go

@@ -14,10 +14,11 @@ import (
 )
 
 type StripeCustomer struct {
-	StripeCustomerID string        `gorm:"primary_key;column:stripeCustomerId;type:char;size:255;" json:"stripeCustomerId"`
-	AttributionID    AttributionID `gorm:"column:attributionId;type:varchar;size:255;" json:"attributionId"`
-	CreationTime     VarcharTime   `gorm:"column:creationTime;type:varchar;size:255;" json:"creationTime"`
-	Currency         string        `gorm:"column:currency;type:varchar;size:3;" json:"currency"`
+	StripeCustomerID      string        `gorm:"primary_key;column:stripeCustomerId;type:char;size:255;" json:"stripeCustomerId"`
+	AttributionID         AttributionID `gorm:"column:attributionId;type:varchar;size:255;" json:"attributionId"`
+	CreationTime          VarcharTime   `gorm:"column:creationTime;type:varchar;size:255;" json:"creationTime"`
+	Currency              string        `gorm:"column:currency;type:varchar;size:3;" json:"currency"`
+	InvalidBillingAddress *bool         `gorm:"column:invalidBillingAddress;type:tinyint;default:null;" json:"invalidBillingAddress"`
 
 	LastModified time.Time `gorm:"->;column:_lastModified;type:timestamp;default:CURRENT_TIMESTAMP(6);" json:"_lastModified"`
 	// deleted is reserved for use by periodic deleter
@@ -76,3 +77,18 @@ func GetStripeCustomerByAttributionID(ctx context.Context, conn *gorm.DB, attrib
 
 	return customer, nil
 }
+
+func UpdateStripeCustomerInvalidBillingAddress(ctx context.Context, conn *gorm.DB, stripeCustomerID string, invalidBillingAddress bool) (StripeCustomer, error) {
+	tx := conn.
+		WithContext(ctx).
+		Model(&StripeCustomer{}).
+		Where("stripeCustomerId = ?", stripeCustomerID).
+		Where("deleted = ?", 0).
+		Update("invalidBillingAddress", BoolPointer(invalidBillingAddress))
+
+	if err := tx.Error; err != nil {
+		return StripeCustomer{}, fmt.Errorf("failed to update stripe customer with ID %s: %w", stripeCustomerID, err)
+	}
+
+	return GetStripeCustomer(ctx, conn, stripeCustomerID)
+}

components/gitpod-db/src/typeorm/migration/1706212918085-AddInvalidBillingAddressToStripeCustomer.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2024 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { MigrationInterface, QueryRunner } from "typeorm";
+import { columnExists } from "./helper/helper";
+
+const TABLE_NAME = "d_b_stripe_customer";
+const COLUMN_NAME = "invalidBillingAddress";
+
+export class AddInvalidBillingAddressToStripeCustomer1706212918085 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        if (!(await columnExists(queryRunner, TABLE_NAME, COLUMN_NAME))) {
+            await queryRunner.query(
+                `ALTER TABLE ${TABLE_NAME} ADD COLUMN \`${COLUMN_NAME}\` tinyint(4) NULL DEFAULT NULL, ALGORITHM=INPLACE, LOCK=NONE`,
+            );
+        }
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {}
+}

components/gitpod-protocol/src/gitpod-service.ts

@@ -255,6 +255,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     getCostCenter(attributionId: string): Promise<CostCenterJSON | undefined>;
     setUsageLimit(attributionId: string, usageLimit: number): Promise<void>;
     getUsageBalance(attributionId: string): Promise<number>;
+    isCustomerBillingAddressInvalid(attributionId: string): Promise<boolean>;
 
     listUsage(req: ListUsageRequest): Promise<ListUsageResponse>;
 

components/public-api-server/pkg/billingservice/client.go

@@ -19,6 +19,7 @@ type Interface interface {
 	FinalizeInvoice(ctx context.Context, invoiceId string) error
 	CancelSubscription(ctx context.Context, subscriptionId string) error
 	OnChargeDispute(ctx context.Context, disputeID string) error
+	UpdateCustomerSubscriptionsTaxState(ctx context.Context, customerID string) error
 }
 
 type Client struct {
@@ -62,3 +63,14 @@ func (c *Client) OnChargeDispute(ctx context.Context, disputeID string) error {
 
 	return nil
 }
+
+func (c *Client) UpdateCustomerSubscriptionsTaxState(ctx context.Context, customerID string) error {
+	_, err := c.b.UpdateCustomerSubscriptionsTaxState(ctx, &v1.UpdateCustomerSubscriptionsTaxStateRequest{
+		CustomerId: customerID,
+	})
+	if err != nil {
+		return fmt.Errorf("failed RPC to billing service: %s", err)
+	}
+
+	return nil
+}

components/public-api-server/pkg/billingservice/mock_billingservice/billingservice.go

@@ -19,3 +19,7 @@ func (c *NoOpClient) CancelSubscription(ctx context.Context, subscriptionId stri
 func (c *NoOpClient) OnChargeDispute(ctx context.Context, disputeID string) error {
 	return nil
 }
+
+func (c *NoOpClient) UpdateCustomerSubscriptionsTaxState(ctx context.Context, customerID string) error {
+	return nil
+}