Skip to content

Commit

Permalink
minor fixes (#67)
Browse files Browse the repository at this point in the history 
* add unlimited allocation type check; don't filter available plans (for editor)

* remove extraneous memo dep

---------

Co-authored-by: Benjamin Papillon <benpapillon@gmail.com>
  • Loading branch information
@tenub @bpapillon
tenub and bpapillon authored Sep 23, 2024
1 parent 3442772 commit 3e7537d
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 106 deletions.
98 changes: 52 additions & 46 deletions react/src/components/elements/included-features/IncludedFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,53 +200,59 @@ export const IncludedFeatures = forwardRef<
)}
</Flex>

{allocationType === "numeric" && feature?.name && (
<Box $textAlign="right" $paddingLeft="3.5rem">
{props.entitlement.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.entitlement.fontStyle].fontFamily
}
$size={
theme.typography[props.entitlement.fontStyle].fontSize
}
$weight={
theme.typography[props.entitlement.fontStyle].fontWeight
}
$lineHeight={1.5}
$color={
theme.typography[props.entitlement.fontStyle].color
}
>
{typeof allocation === "number"
? `${formatNumber(allocation)} ${pluralize(feature.name, allocation)}`
: `Unlimited ${pluralize(feature.name)}`}
</Text>
)}
{(allocationType === "numeric" ||
allocationType === "unlimited") &&
feature?.name && (
<Box $textAlign="right" $paddingLeft="3.5rem">
{props.entitlement.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.entitlement.fontStyle]
.fontFamily
}
$size={
theme.typography[props.entitlement.fontStyle].fontSize
}
$weight={
theme.typography[props.entitlement.fontStyle]
.fontWeight
}
$lineHeight={1.5}
$color={
theme.typography[props.entitlement.fontStyle].color
}
>
{typeof allocation === "number"
? `${formatNumber(allocation)} ${pluralize(feature.name, allocation)}`
: `Unlimited ${pluralize(feature.name)}`}
</Text>
)}

{props.usage.isVisible && (
<Text
as={Box}
$font={theme.typography[props.usage.fontStyle].fontFamily}
$size={theme.typography[props.usage.fontStyle].fontSize}
$weight={
theme.typography[props.usage.fontStyle].fontWeight
}
$lineHeight={1.5}
$color={theme.typography[props.usage.fontStyle].color}
>
{typeof usage === "number" && (
<>
{typeof allocation === "number"
? `${formatNumber(usage)} of ${formatNumber(allocation)} used`
: `${formatNumber(usage)} used`}
</>
)}
</Text>
)}
</Box>
)}
{props.usage.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.usage.fontStyle].fontFamily
}
$size={theme.typography[props.usage.fontStyle].fontSize}
$weight={
theme.typography[props.usage.fontStyle].fontWeight
}
$lineHeight={1.5}
$color={theme.typography[props.usage.fontStyle].color}
>
{typeof usage === "number" && (
<>
{typeof allocation === "number"
? `${formatNumber(usage)} of ${formatNumber(allocation)} used`
: `${formatNumber(usage)} used`}
</>
)}
</Text>
)}
</Box>
)}
</Flex>,
];
},
Expand Down
98 changes: 51 additions & 47 deletions react/src/components/elements/metered-features/MeteredFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,54 +179,58 @@ export const MeteredFeatures = forwardRef<
</Box>
)}

{allocationType === "numeric" && feature?.name && (
<Box $textAlign="right">
{props.allocation.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.allocation.fontStyle]
.fontFamily
}
$size={
theme.typography[props.allocation.fontStyle]
.fontSize
}
$weight={
theme.typography[props.allocation.fontStyle]
.fontWeight
}
$color={
theme.typography[props.allocation.fontStyle].color
}
>
{typeof allocation === "number"
? `${allocation} ${feature.name}`
: `Unlimited ${feature.name}`}
</Text>
)}
{(allocationType === "numeric" ||
allocationType === "unlimited") &&
feature?.name && (
<Box $textAlign="right">
{props.allocation.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.allocation.fontStyle]
.fontFamily
}
$size={
theme.typography[props.allocation.fontStyle]
.fontSize
}
$weight={
theme.typography[props.allocation.fontStyle]
.fontWeight
}
$color={
theme.typography[props.allocation.fontStyle].color
}
>
{typeof allocation === "number"
? `${allocation} ${feature.name}`
: `Unlimited ${feature.name}`}
</Text>
)}

{props.usage.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.usage.fontStyle].fontFamily
}
$size={
theme.typography[props.usage.fontStyle].fontSize
}
$weight={
theme.typography[props.usage.fontStyle].fontWeight
}
$color={theme.typography[props.usage.fontStyle].color}
>
{typeof allocation === "number"
? `${usage} of ${allocation} used`
: `${usage} used`}
</Text>
)}
</Box>
)}
{props.usage.isVisible && (
<Text
as={Box}
$font={
theme.typography[props.usage.fontStyle].fontFamily
}
$size={
theme.typography[props.usage.fontStyle].fontSize
}
$weight={
theme.typography[props.usage.fontStyle].fontWeight
}
$color={
theme.typography[props.usage.fontStyle].color
}
>
{typeof allocation === "number"
? `${usage} of ${allocation} used`
: `${usage} used`}
</Text>
)}
</Box>
)}
</Flex>

{typeof usage === "number" &&
Expand Down
15 changes: 3 additions & 12 deletions react/src/components/elements/plan-manager/CheckoutDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const FeatureName = ({

if (
entitlement.valueType === "numeric" ||
entitlement.valueType === "unlimited" ||
entitlement.valueType === "trait"
) {
let period;
Expand Down Expand Up @@ -126,20 +127,10 @@ export const CheckoutDialog = () => {
return {
paymentMethod: data.subscription?.paymentMethod,
currentPlan: data.company?.plan,
availablePlans: data.activePlans.filter(
(plan) =>
plan.current ||
(plan.yearlyPrice && planPeriod === "year") ||
(plan.monthlyPrice && planPeriod === "month"),
),
availablePlans: data.activePlans,
planPeriodOptions,
};
}, [
data.subscription?.paymentMethod,
data.company,
data.activePlans,
planPeriod,
]);
}, [data.subscription?.paymentMethod, data.company, data.activePlans]);

const savingsPercentage = useMemo(() => {
if (selectedPlan) {
Expand Down
1 change: 0 additions & 1 deletion react/src/components/elements/plan-manager/PlanManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export const PlanManager = forwardRef<
canChangePlan:
data.activePlans.length > 0 &&
data.stripeEmbed?.publishableKey &&
data.stripeEmbed?.setupIntentClientSecret &&
stripe !== null,
};
}, [data.company, data.activePlans, data.stripeEmbed, stripe]);
Expand Down

0 comments on commit 3e7537d

Please sign in to comment.