@growth-operations/ui-shared 1.5.1 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/billing/PlanGrid.jsx +28 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@growth-operations/ui-shared",
3
- "version": "1.5.1",
3
+ "version": "1.5.2",
4
4
  "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
5
5
  "license": "MIT",
6
6
  "private": false,
package/src/billing/PlanGrid.jsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState } from "react";
2
2
  import {
3
3
  hubspot,
4
4
  Flex,
5
+ Box,
5
6
  Tile,
6
7
  Text,
7
8
  Heading,
@@ -49,23 +50,33 @@ function PlanCard({ plan, interval, onChoose, choosing, checkoutUrl, supportUrl
49
50
 
50
51
  return (
51
52
  <Tile>
52
- <Flex direction="column" gap="small">
53
- <Flex direction="row" gap="small" align="center">
54
- <Heading>{plan.name ?? plan.tier}</Heading>
55
- {plan.current && <StatusTag variant="success">Current plan</StatusTag>}
56
- </Flex>
57
-
58
- <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
59
-
60
- {plan.credits_per_period != null && (
61
- <Text>
62
- {plan.credits_per_period.toLocaleString()} credits / month
63
- </Text>
64
- )}
65
-
66
- {(plan.features ?? []).map((f, i) => (
67
- <Text key={i}>• {f}</Text>
68
- ))}
53
+ {/* Full-height column: the content Box grows to fill so the CTA always
54
+ pins to the bottom, aligned across cards (the row stretches them to
55
+ equal height). Otherwise the button floats up under shorter feature
56
+ lists and the cards look ragged. */}
57
+ <Flex direction="column" gap="small" align="stretch">
58
+ <Box flex={1}>
59
+ <Flex direction="column" gap="small">
60
+ <Flex direction="row" gap="small" align="center">
61
+ <Heading>{plan.name ?? plan.tier}</Heading>
62
+ {plan.current && (
63
+ <StatusTag variant="success">Current plan</StatusTag>
64
+ )}
65
+ </Flex>
66
+
67
+ <Text format={{ fontWeight: "bold", fontSize: "lg" }}>{priceText}</Text>
68
+
69
+ {plan.credits_per_period != null && (
70
+ <Text>
71
+ {plan.credits_per_period.toLocaleString()} credits / month
72
+ </Text>
73
+ )}
74
+
75
+ {(plan.features ?? []).map((f, i) => (
76
+ <Text key={i}>• {f}</Text>
77
+ ))}
78
+ </Flex>
79
+ </Box>
69
80
 
70
81
  {/* CTA. Current tier => disabled marker. talk_to_sales => contact link.
71
82
  Otherwise pre-create-then-link checkout for the selected interval. */}