Skip to content

Commit 4502790

Browse files
tenubtenub
authored
[SCH-3555] Components for tier-based pricing for pay as you go (#454)
1 parent ad7170e commit 4502790

File tree

39 files changed

+2243
-1372
lines changed

39 files changed

+2243
-1372
lines changed

‎components/eslint.config.mjs‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import css from "@eslint/css";
21
import js from "@eslint/js";
32
import json from "@eslint/json";
43
import markdown from "@eslint/markdown";
@@ -79,10 +78,4 @@ export default defineConfig([
7978
language: "markdown/gfm",
8079
extends: ["markdown/recommended"],
8180
},
82-
{
83-
files: ["**/*.css"],
84-
plugins: { css },
85-
language: "css/css",
86-
extends: ["css/recommended"],
87-
},
8881
]);

‎components/jest.config.mjs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/** @type {import('ts-jest').JestConfigWithTsJest} */
2+
export default {
3+
preset: "ts-jest/presets/js-with-ts-esm",
4+
testEnvironment: "jsdom",
5+
transform: {
6+
"^.+\\.(ts|tsx)?$": "ts-jest",
7+
},
8+
testMatch: ["<rootDir>/src/**/*.spec.ts"],
9+
};

‎components/package.json‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@schematichq/schematic-components",
3-
"version": "1.0.7",
3+
"version": "1.1.0",
44
"main": "dist/schematic-components.cjs.js",
55
"module": "dist/schematic-components.esm.js",
66
"types": "dist/schematic-components.d.ts",
@@ -17,63 +17,59 @@
1717
},
1818
"scripts": {
1919
"dev": "yarn dev:esm",
20-
"dev:esm": "npx esbuild src/index.ts --watch --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
20+
"dev:cjs": "npx esbuild src/index.ts --watch --bundle --external:react --external:react-dom --external:@stripe/react-stripe-js --format=cjs --outfile=dist/schematic-components.cjs.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
21+
"dev:esm": "npx esbuild src/index.ts --watch --bundle --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
2122
"build": "yarn tsc && yarn openapi && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
22-
"build:cjs": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=cjs --outfile=dist/schematic-components.cjs.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
23-
"build:esm": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
23+
"build:cjs": "npx esbuild src/index.ts --bundle --external:react --external:react-dom --external:@stripe/react-stripe-js --format=cjs --outfile=dist/schematic-components.cjs.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
24+
"build:esm": "npx esbuild src/index.ts --bundle --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
2425
"build:types": "npx tsc && npx api-extractor run",
2526
"clean": "rm -rf dist",
2627
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
2728
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
2829
"openapi": "./generate_openapi.sh -c ./src/api/config_checkoutexternal.yml && ./generate_openapi.sh -c ./src/api/config_componentspublic.yml",
29-
"test": "jest --config jest.config.js",
30+
"test": "jest --config jest.config.mjs",
3031
"tsc": "npx tsc",
3132
"test:demo": "../scripts/test-components.sh"
3233
},
3334
"dependencies": {
3435
"@schematichq/schematic-icons": "^0.5.2",
35-
"@stripe/stripe-js": "^7.4.0",
36-
"classnames": "^2.5.1",
37-
"i18next": "^25.1.3",
36+
"@stripe/stripe-js": "^7.5.0",
37+
"i18next": "^25.3.2",
3838
"lodash": "^4.17.21",
3939
"pako": "^2.1.0",
40-
"react-i18next": "^15.5.3",
40+
"react-i18next": "^15.6.0",
4141
"styled-components": "^6.1.19",
4242
"uuid": "^11.1.0"
4343
},
4444
"devDependencies": {
45-
"@craftjs/core": "^0.2.12",
46-
"@eslint/css": "^0.9.0",
47-
"@eslint/js": "^9.29.0",
48-
"@eslint/json": "^0.12.0",
49-
"@eslint/markdown": "^6.5.0",
45+
"@eslint/js": "^9.31.0",
46+
"@eslint/json": "^0.13.0",
47+
"@eslint/markdown": "^7.0.0",
5048
"@microsoft/api-extractor": "^7.52.8",
51-
"@openapitools/openapi-generator-cli": "^2.21.0",
49+
"@openapitools/openapi-generator-cli": "^2.21.2",
5250
"@stripe/react-stripe-js": "^3.7.0",
5351
"@types/jest": "^30.0.0",
54-
"@types/lodash": "^4.17.19",
52+
"@types/lodash": "^4.17.20",
5553
"@types/pako": "^2.0.3",
5654
"@types/react": "^19.1.8",
5755
"@types/react-dom": "^19.1.6",
58-
"esbuild": "^0.25.5",
59-
"esbuild-jest": "^0.5.0",
60-
"eslint": "^9.29.0",
56+
"esbuild": "^0.25.6",
57+
"eslint": "^9.31.0",
6158
"eslint-import-resolver-typescript": "^4.4.4",
6259
"eslint-plugin-import": "^2.32.0",
6360
"eslint-plugin-react": "^7.37.5",
6461
"eslint-plugin-react-hooks": "^5.2.0",
65-
"eslint-plugin-simple-import-sort": "^12.1.1",
66-
"globals": "^16.1.0",
67-
"jest": "^30.0.3",
68-
"jest-environment-jsdom": "^30.0.2",
62+
"globals": "^16.3.0",
63+
"jest": "^30.0.4",
64+
"jest-environment-jsdom": "^30.0.4",
6965
"jest-esbuild": "^0.4.0",
7066
"jest-fetch-mock": "^3.0.3",
7167
"prettier": "^3.6.2",
7268
"react": "^19.1.0",
7369
"react-dom": "^19.1.0",
7470
"ts-jest": "^29.4.0",
7571
"typescript": "^5.8.3",
76-
"typescript-eslint": "^8.34.1"
72+
"typescript-eslint": "^8.36.0"
7773
},
7874
"peerDependencies": {
7975
"@stripe/react-stripe-js": ">=3",

‎components/src/components/elements/included-features/IncludedFeatures.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { forwardRef, useMemo, useRef, useState } from "react";
22
import { useTranslation } from "react-i18next";
33

44
import { type FeatureUsageResponseData } from "../../../api/checkoutexternal";
5-
import { VISIBLE_ENTITLEMENT_COUNT } from "../../../const";
5+
import { FeatureType, VISIBLE_ENTITLEMENT_COUNT } from "../../../const";
66
import { type FontStyle } from "../../../context";
77
import {
88
useEmbed,
@@ -18,9 +18,9 @@ import {
1818
import { Element } from "../../layout";
1919
import { Box, Flex, Icon, Text } from "../../ui";
2020

21-
import { Details } from "./Details";
21+
import { UsageDetails } from "./UsageDetails";
2222

23-
export interface DesignProps {
23+
interface DesignProps {
2424
header: {
2525
isVisible: boolean;
2626
fontStyle: FontStyle;
@@ -164,12 +164,11 @@ export const IncludedFeatures = forwardRef<
164164
</Box>
165165
)}
166166

167-
{featureUsage.slice(0, showCount).map((usage, index) => {
168-
const feature = usage.feature;
167+
{featureUsage.slice(0, showCount).map((entitlement, index) => {
169168
const shouldShowDetails =
170-
feature?.name &&
171-
(feature?.featureType === "event" ||
172-
feature?.featureType === "trait");
169+
entitlement.feature?.name &&
170+
(entitlement.feature?.featureType === FeatureType.Event ||
171+
entitlement.feature?.featureType === FeatureType.Trait);
173172

174173
return (
175174
<Flex
@@ -190,9 +189,9 @@ export const IncludedFeatures = forwardRef<
190189
$flexBasis="min-content"
191190
$gap="1rem"
192191
>
193-
{props.icons.isVisible && feature?.icon && (
192+
{props.icons.isVisible && entitlement.feature?.icon && (
194193
<Icon
195-
name={feature.icon}
194+
name={entitlement.feature.icon}
196195
color={settings.theme.primary}
197196
background={
198197
isLightBackground
@@ -203,29 +202,31 @@ export const IncludedFeatures = forwardRef<
203202
/>
204203
)}
205204

206-
{feature?.name && (
207-
<Text display={props.icons.fontStyle}>{feature.name}</Text>
205+
{entitlement.feature?.name && (
206+
<Text display={props.icons.fontStyle}>
207+
{entitlement.feature.name}
208+
</Text>
208209
)}
209210

210211
{props.entitlementExpiration.isVisible &&
211-
usage.entitlementExpirationDate && (
212+
entitlement.entitlementExpirationDate && (
212213
<Text
213214
display={props.entitlementExpiration.fontStyle}
214215
$leading={1}
215216
>
216217
Expires{" "}
217-
{toPrettyDate(usage.entitlementExpirationDate, {
218+
{toPrettyDate(entitlement.entitlementExpirationDate, {
218219
month: "short",
219220
})}
220221
</Text>
221222
)}
222223
</Flex>
223224

224225
{shouldShowDetails && (
225-
<Details
226-
featureUsage={usage}
226+
<UsageDetails
227+
entitlement={entitlement}
227228
shouldWrapChildren={shouldWrapChildren}
228-
{...props}
229+
layout={props}
229230
/>
230231
)}
231232
</Flex>

0 commit comments

Comments
 (0)