Skip to content

Commit

Permalink
fixer upper (#62)
Browse files Browse the repository at this point in the history
* temp fixes

* add existing payment method option to checkout flow

* use text color instead of checking card bg

* adjust available plans logic
  • Loading branch information
tenub authored Sep 18, 2024
1 parent 60da27f commit e8027f7
Show file tree
Hide file tree
Showing 9 changed files with 465 additions and 139 deletions.
1 change: 1 addition & 0 deletions react/src/api/.openapi-generator/FILES
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ models/InvoiceResponseData.ts
models/PaymentMethodResponseData.ts
models/PlanDetailResponseData.ts
models/PlanEntitlementResponseData.ts
models/PlanGroupPlanDetailResponseData.ts
models/PlanResponseData.ts
models/PreviewObject.ts
models/RuleConditionDetailResponseData.ts
Expand Down
9 changes: 9 additions & 0 deletions react/src/api/models/CompanyPlanDetailResponseData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,12 @@ export interface CompanyPlanDetailResponseData {
* @memberof CompanyPlanDetailResponseData
*/
id: string;
/**
*
* @type {boolean}
* @memberof CompanyPlanDetailResponseData
*/
isDefault: boolean;
/**
*
* @type {BillingPriceResponseData}
Expand Down Expand Up @@ -159,6 +165,7 @@ export function instanceOfCompanyPlanDetailResponseData(
if (!("features" in value) || value["features"] === undefined) return false;
if (!("icon" in value) || value["icon"] === undefined) return false;
if (!("id" in value) || value["id"] === undefined) return false;
if (!("isDefault" in value) || value["isDefault"] === undefined) return false;
if (!("name" in value) || value["name"] === undefined) return false;
if (!("planType" in value) || value["planType"] === undefined) return false;
if (!("updatedAt" in value) || value["updatedAt"] === undefined) return false;
Expand Down Expand Up @@ -198,6 +205,7 @@ export function CompanyPlanDetailResponseDataFromJSONTyped(
),
icon: json["icon"],
id: json["id"],
isDefault: json["is_default"],
monthlyPrice:
json["monthly_price"] == null
? undefined
Expand Down Expand Up @@ -236,6 +244,7 @@ export function CompanyPlanDetailResponseDataToJSON(
),
icon: value["icon"],
id: value["id"],
is_default: value["isDefault"],
monthly_price: BillingPriceResponseDataToJSON(value["monthlyPrice"]),
name: value["name"],
plan_type: value["planType"],
Expand Down
237 changes: 237 additions & 0 deletions react/src/api/models/PlanGroupPlanDetailResponseData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
/* tslint:disable */
/* eslint-disable */
/**
* Schematic API
* Schematic API
*
* The version of the OpenAPI document: 0.1
*
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/

import { mapValues } from "../runtime";
import type { FeatureDetailResponseData } from "./FeatureDetailResponseData";
import {
FeatureDetailResponseDataFromJSON,
FeatureDetailResponseDataFromJSONTyped,
FeatureDetailResponseDataToJSON,
} from "./FeatureDetailResponseData";
import type { PlanEntitlementResponseData } from "./PlanEntitlementResponseData";
import {
PlanEntitlementResponseDataFromJSON,
PlanEntitlementResponseDataFromJSONTyped,
PlanEntitlementResponseDataToJSON,
} from "./PlanEntitlementResponseData";
import type { BillingPriceResponseData } from "./BillingPriceResponseData";
import {
BillingPriceResponseDataFromJSON,
BillingPriceResponseDataFromJSONTyped,
BillingPriceResponseDataToJSON,
} from "./BillingPriceResponseData";
import type { BillingProductDetailResponseData } from "./BillingProductDetailResponseData";
import {
BillingProductDetailResponseDataFromJSON,
BillingProductDetailResponseDataFromJSONTyped,
BillingProductDetailResponseDataToJSON,
} from "./BillingProductDetailResponseData";

/**
*
* @export
* @interface PlanGroupPlanDetailResponseData
*/
export interface PlanGroupPlanDetailResponseData {
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
audienceType?: string | null;
/**
*
* @type {BillingProductDetailResponseData}
* @memberof PlanGroupPlanDetailResponseData
*/
billingProduct?: BillingProductDetailResponseData;
/**
*
* @type {number}
* @memberof PlanGroupPlanDetailResponseData
*/
companyCount: number;
/**
*
* @type {Date}
* @memberof PlanGroupPlanDetailResponseData
*/
createdAt: Date;
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
description: string;
/**
*
* @type {Array<PlanEntitlementResponseData>}
* @memberof PlanGroupPlanDetailResponseData
*/
entitlements: Array<PlanEntitlementResponseData>;
/**
*
* @type {Array<FeatureDetailResponseData>}
* @memberof PlanGroupPlanDetailResponseData
*/
features: Array<FeatureDetailResponseData>;
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
icon: string;
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
id: string;
/**
*
* @type {boolean}
* @memberof PlanGroupPlanDetailResponseData
*/
isDefault: boolean;
/**
*
* @type {BillingPriceResponseData}
* @memberof PlanGroupPlanDetailResponseData
*/
monthlyPrice?: BillingPriceResponseData;
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
name: string;
/**
*
* @type {string}
* @memberof PlanGroupPlanDetailResponseData
*/
planType: string;
/**
*
* @type {Date}
* @memberof PlanGroupPlanDetailResponseData
*/
updatedAt: Date;
/**
*
* @type {BillingPriceResponseData}
* @memberof PlanGroupPlanDetailResponseData
*/
yearlyPrice?: BillingPriceResponseData;
}

/**
* Check if a given object implements the PlanGroupPlanDetailResponseData interface.
*/
export function instanceOfPlanGroupPlanDetailResponseData(
value: object,
): value is PlanGroupPlanDetailResponseData {
if (!("companyCount" in value) || value["companyCount"] === undefined)
return false;
if (!("createdAt" in value) || value["createdAt"] === undefined) return false;
if (!("description" in value) || value["description"] === undefined)
return false;
if (!("entitlements" in value) || value["entitlements"] === undefined)
return false;
if (!("features" in value) || value["features"] === undefined) return false;
if (!("icon" in value) || value["icon"] === undefined) return false;
if (!("id" in value) || value["id"] === undefined) return false;
if (!("isDefault" in value) || value["isDefault"] === undefined) return false;
if (!("name" in value) || value["name"] === undefined) return false;
if (!("planType" in value) || value["planType"] === undefined) return false;
if (!("updatedAt" in value) || value["updatedAt"] === undefined) return false;
return true;
}

export function PlanGroupPlanDetailResponseDataFromJSON(
json: any,
): PlanGroupPlanDetailResponseData {
return PlanGroupPlanDetailResponseDataFromJSONTyped(json, false);
}

export function PlanGroupPlanDetailResponseDataFromJSONTyped(
json: any,
ignoreDiscriminator: boolean,
): PlanGroupPlanDetailResponseData {
if (json == null) {
return json;
}
return {
audienceType:
json["audience_type"] == null ? undefined : json["audience_type"],
billingProduct:
json["billing_product"] == null
? undefined
: BillingProductDetailResponseDataFromJSON(json["billing_product"]),
companyCount: json["company_count"],
createdAt: new Date(json["created_at"]),
description: json["description"],
entitlements: (json["entitlements"] as Array<any>).map(
PlanEntitlementResponseDataFromJSON,
),
features: (json["features"] as Array<any>).map(
FeatureDetailResponseDataFromJSON,
),
icon: json["icon"],
id: json["id"],
isDefault: json["is_default"],
monthlyPrice:
json["monthly_price"] == null
? undefined
: BillingPriceResponseDataFromJSON(json["monthly_price"]),
name: json["name"],
planType: json["plan_type"],
updatedAt: new Date(json["updated_at"]),
yearlyPrice:
json["yearly_price"] == null
? undefined
: BillingPriceResponseDataFromJSON(json["yearly_price"]),
};
}

export function PlanGroupPlanDetailResponseDataToJSON(
value?: PlanGroupPlanDetailResponseData | null,
): any {
if (value == null) {
return value;
}
return {
audience_type: value["audienceType"],
billing_product: BillingProductDetailResponseDataToJSON(
value["billingProduct"],
),
company_count: value["companyCount"],
created_at: value["createdAt"].toISOString(),
description: value["description"],
entitlements: (value["entitlements"] as Array<any>).map(
PlanEntitlementResponseDataToJSON,
),
features: (value["features"] as Array<any>).map(
FeatureDetailResponseDataToJSON,
),
icon: value["icon"],
id: value["id"],
is_default: value["isDefault"],
monthly_price: BillingPriceResponseDataToJSON(value["monthlyPrice"]),
name: value["name"],
plan_type: value["planType"],
updated_at: value["updatedAt"].toISOString(),
yearly_price: BillingPriceResponseDataToJSON(value["yearlyPrice"]),
};
}
1 change: 1 addition & 0 deletions react/src/api/models/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export * from "./InvoiceResponseData";
export * from "./PaymentMethodResponseData";
export * from "./PlanDetailResponseData";
export * from "./PlanEntitlementResponseData";
export * from "./PlanGroupPlanDetailResponseData";
export * from "./PlanResponseData";
export * from "./PreviewObject";
export * from "./RuleConditionDetailResponseData";
Expand Down
43 changes: 22 additions & 21 deletions react/src/components/elements/payment-method/PaymentMethod.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ export const PaymentMethod = forwardRef<
const props = resolveDesignProps(rest);

const theme = useTheme();
const { data, stripe, layout } = useEmbed();
const { data, layout } = useEmbed();

const paymentMethod = useMemo(() => {
const { cardLast4, cardExpMonth, cardExpYear } =
const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } =
data.subscription?.paymentMethod || {};

let monthsToExpiration: number | undefined;
Expand All @@ -66,6 +66,7 @@ export const PaymentMethod = forwardRef<
}

return {
paymentMethodType,
cardLast4,
monthsToExpiration,
};
Expand All @@ -75,7 +76,7 @@ export const PaymentMethod = forwardRef<
return hexToHSL(theme.card.background).l > 50;
}, [theme.card.background]);

if (!stripe || !paymentMethod.cardLast4) {
if (!paymentMethod.paymentMethodType) {
return null;
}

Expand Down Expand Up @@ -111,24 +112,24 @@ export const PaymentMethod = forwardRef<
</Flex>
)}

{paymentMethod.cardLast4 && (
<Flex
$justifyContent="space-between"
$alignItems="center"
$margin="0 0 1rem"
$backgroundColor={
isLightBackground
? "hsla(0, 0%, 0%, 0.0625)"
: "hsla(0, 0%, 100%, 0.125)"
}
$padding="0.375rem 1rem"
$borderRadius="9999px"
>
<Text $font={theme.typography.text.fontFamily} $size={14}>
💳 Card ending in {paymentMethod.cardLast4}
</Text>
</Flex>
)}
<Flex
$justifyContent="space-between"
$alignItems="center"
$margin="0 0 1rem"
$backgroundColor={
isLightBackground
? "hsla(0, 0%, 0%, 0.0625)"
: "hsla(0, 0%, 100%, 0.125)"
}
$padding="0.375rem 1rem"
$borderRadius="9999px"
>
<Text $font={theme.typography.text.fontFamily} $size={14}>
{paymentMethod.cardLast4
? `💳 Card ending in ${paymentMethod.cardLast4}`
: "Other existing payment method"}
</Text>
</Flex>

{layout === "payment" &&
createPortal(
Expand Down
Loading

0 comments on commit e8027f7

Please sign in to comment.