Change plan feedback modal

apps/webapp/app/components/primitives/Checkbox.tsx

@@ -61,6 +61,7 @@ export type CheckboxProps = Omit<
   description?: string;
   badges?: string[];
   className?: string;
+  labelClassName?: string;
   onChange?: (isChecked: boolean) => void;
 };
 
@@ -78,6 +79,7 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
       badges,
       disabled,
       className,
+      labelClassName: externalLabelClassName,
       ...props
     },
     ref
@@ -148,7 +150,8 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
               htmlFor={id}
               className={cn(
                 props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-                labelClassName
+                labelClassName,
+                externalLabelClassName
               )}
               onClick={(e) => e.preventDefault()}
             >

apps/webapp/app/components/primitives/Dialog.tsx

@@ -82,7 +82,7 @@ DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2", className)}
     {...props}
   />
 );

apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.billing/route.tsx

@@ -117,6 +117,7 @@ export default function ChoosePlanPage() {
               subscription={v3Subscription}
               organizationSlug={organizationSlug}
               hasPromotedPlan={false}
+              periodEnd={periodEnd}
             />
           </div>
         </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx

@@ -5,7 +5,6 @@ import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
 import { MainBody } from "~/components/layout/AppLayout";
 import { SideMenu } from "~/components/navigation/SideMenu";
-import { featuresForRequest } from "~/features.server";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useTypedMatchesData } from "~/hooks/useTypedMatchData";
 import { useUser } from "~/hooks/useUser";

apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx

@@ -37,11 +37,15 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
   const currentPlan = await getCurrentPlan(organization.id);
 
-  return typedjson({ ...plans, ...currentPlan, organizationSlug });
+  const periodEnd = new Date();
+  periodEnd.setMonth(periodEnd.getMonth() + 1);
+
+  return typedjson({ ...plans, ...currentPlan, organizationSlug, periodEnd });
 }
 
 export default function ChoosePlanPage() {
-  const { plans, v3Subscription, organizationSlug } = useTypedLoaderData<typeof loader>();
+  const { plans, v3Subscription, organizationSlug, periodEnd } =
+    useTypedLoaderData<typeof loader>();
 
   return (
     <MainCenteredContainer className="flex max-w-[80rem] flex-col items-center gap-8 p-3">
@@ -52,6 +56,7 @@ export default function ChoosePlanPage() {
         organizationSlug={organizationSlug}
         hasPromotedPlan
         showGithubVerificationBadge
+        periodEnd={periodEnd}
       />
     </MainCenteredContainer>
   );