comi-logic/cfw-autumn
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: replaced fontawesome icons with lucide

Browse Source
This commit is contained in:
John Yeo
2025-03-21 16:48:54 +08:00
parent 8d0d8931a6
commit f8e8141998
40 changed files with 260 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@@ -14506,6 +14506,15 @@
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/lucide-solid": {
"version": "0.483.0",
"resolved": "https://registry.npmjs.org/lucide-solid/-/lucide-solid-0.483.0.tgz",
"integrity": "sha512-eIDOr1FtctYkqOOlpt/0aCmM48cRJsyU+jdVGqxpMv+M27f2xN4ty09vQfZc/xt+JtWGBTmVtZjNAczIeXC+KQ==",
"license": "ISC",
"peerDependencies": {
"solid-js": "^1.4.7"
}
},
"node_modules/luxon": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
@@ -18530,6 +18539,29 @@
"randombytes": "^2.1.0"
}
},
"node_modules/seroval": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/seroval/-/seroval-1.2.1.tgz",
"integrity": "sha512-yBxFFs3zmkvKNmR0pFSU//rIsYjuX418TnlDmc2weaq5XFDqDIV/NOMPBoLrbxjLH42p4UzRuXHryXh9dYcKcw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=10"
}
},
"node_modules/seroval-plugins": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.2.1.tgz",
"integrity": "sha512-H5vs53+39+x4Udwp4J5rNZfgFuA+Lt+uU+09w1gYBVWomtAl98B+E9w7yC05Xc81/HgLvJdlyqJbU0fJCKCmdw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=10"
},
"peerDependencies": {
"seroval": "^1.0"
}
},
"node_modules/server-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
@@ -18908,6 +18940,18 @@
"node": ">= 14"
}
},
"node_modules/solid-js": {
"version": "1.9.5",
"resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.5.tgz",
"integrity": "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw==",
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.1.0",
"seroval": "^1.1.0",
"seroval-plugins": "^1.1.0"
}
},
"node_modules/sonic-boom": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.0.tgz",
@@ -22992,6 +23036,7 @@
"hast-util-to-html": "^9.0.5",
"lodash": "^4.17.21",
"lucide-react": "^0.479.0",
"lucide-solid": "^0.483.0",
"next-themes": "^0.4.6",
"posthog-js": "^1.230.4",
"react": "^18.2.0",

18
server/src/external/stripe/utils.ts vendored
View File

@@ -11,6 +11,23 @@ import {
import { AppEnv } from "@autumn/shared";
import Stripe from "stripe";
import { createSupabaseClient } from "../supabaseUtils.js";
import { OrgService } from "@/internal/orgs/OrgService.js";
export const orgIdToStripeCli = async ({
orgId,
env,
}: {
orgId: string;
env: AppEnv;
}) => {
const sb = createSupabaseClient();
const org = await OrgService.getFullOrg({
sb,
orgId,
});
return createStripeCli({ org, env });
};
export const createStripeCli = ({
org,
@@ -31,7 +48,6 @@ export const createStripeCli = ({
: org.stripe_config.live_api_key;
let decrypted = decryptData(encrypted);
return new Stripe(decrypted);
};

1
vite/package.json
View File

@@ -42,6 +42,7 @@
"hast-util-to-html": "^9.0.5",
"lodash": "^4.17.21",
"lucide-react": "^0.479.0",
"lucide-solid": "^0.483.0",
"next-themes": "^0.4.6",
"posthog-js": "^1.230.4",
"react": "^18.2.0",

5
vite/src/components/general/OnboardingStep.tsx
View File

@@ -1,7 +1,6 @@
import React from "react";
import { cn } from "@/lib/utils";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoin } from "@fortawesome/pro-duotone-svg-icons";
import { Wallet } from "lucide-react";
interface StepProps {
title: string;
@@ -19,7 +18,7 @@ function Step({ title, children, className, description }: StepProps) {
)}
>
<div className="absolute -left-[17px] -top-1 flex items-center justify-center w-8 h-8 rounded-full bg-stone-50">
<FontAwesomeIcon icon={faCoin} className="text-zinc-500 w-5 h-5" />
<Wallet size={16} className="text-t3" />
</div>
<div className="flex flex-col gap-1">
<h1 className="text-t1 text-lg font-medium">{title}</h1>

5
vite/src/components/general/table-components/ToolbarButton.tsx
View File

@@ -1,8 +1,7 @@
import { Button, ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsisVertical } from "@fortawesome/pro-regular-svg-icons";
import { forwardRef } from "react";
import { EllipsisVertical } from "lucide-react";
export const ToolbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
@@ -17,7 +16,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
)}
{...props}
>
<FontAwesomeIcon icon={faEllipsisVertical} size="sm" className="w-3" />
<EllipsisVertical size={12} />
</Button>
);
}

2
vite/src/components/ui/button.tsx
View File

@@ -82,7 +82,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
className={cn(
buttonVariants({ variant, size, className }),
isIcon && `w-${dim} h-${dim}`
isIcon && `w-${dim} h-${dim} p-0`
)}
ref={ref}
onClick={(e) => {

110
vite/src/views/credits/CreateCreditSystem.tsx
View File

@@ -1,7 +1,3 @@
import FieldLabel from "@/components/general/modal-components/FieldLabel";
import { SelectContent } from "@/components/ui/select";
import { SelectTrigger, SelectValue } from "@/components/ui/select";
import { SelectItem } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import {
Dialog,
@@ -110,112 +106,6 @@ function CreateCreditSystem() {
setCreditSystem={setCreditSystem}
/>
{/* <div className="flex flex-col gap-4">
<div className="flex gap-4 w-full">
<div className="w-full">
<FieldLabel>Name</FieldLabel>
<Input
placeholder="Name"
value={fields.name}
onChange={(e) => {
const newFields: any = { ...fields, name: e.target.value };
if (!idChanged) {
newFields.id = slugify(e.target.value);
}
setFields(newFields);
}}
/>
</div>
<div className="w-full">
<FieldLabel>ID</FieldLabel>
<Input
placeholder="ID"
value={fields.id}
onChange={(e) => {
setFields({ ...fields, id: e.target.value });
setIdChanged(true);
}}
/>
</div>
</div>
<div>
<FieldLabel>Schema</FieldLabel>
<div className="grid grid-cols-10 gap-2 gap-y-1 mb-4">
<FieldLabel className="!mb-0 col-span-3">Meter</FieldLabel>
<FieldLabel className="!mb-0 col-span-3">
Metered Amount
</FieldLabel>
<FieldLabel className="!mb-0 col-span-3">
Credit Amount
</FieldLabel>
<p className="col-span-1"></p>
{creditSystemConfig.schema.map((item, index) => (
<React.Fragment key={index}>
<Select
onValueChange={(value) => {
handleSchemaChange(index, "metered_feature_id", value);
}}
>
<SelectTrigger className="col-span-3">
<SelectValue placeholder="eg. API Calls" />
</SelectTrigger>
<SelectContent>
{features
?.filter(
(feature: Feature) =>
feature.type === FeatureType.Metered
)
.map((feature: Feature) => (
<SelectItem key={feature.id} value={feature.id!}>
{feature.name}
</SelectItem>
))}
</SelectContent>
</Select>
<Input
className="col-span-3"
type="number"
value={item.feature_amount}
onChange={(e) =>
handleSchemaChange(
index,
"feature_amount",
e.target.value
)
}
/>
<Input
className="col-span-3"
type="number"
value={item.credit_amount}
onChange={(e) =>
handleSchemaChange(index, "credit_amount", e.target.value)
}
/>
<div className="col-span-1 flex items-center justify-end">
<Button
variant="ghost"
onClick={() => removeSchemaItem(index)}
isIcon
dim={6}
className="text-t3"
>
<FontAwesomeIcon icon={faXmark} />
</Button>
</div>
</React.Fragment>
))}
</div>
<Button variant="secondary" onClick={addSchemaItem}>
Add
</Button>
</div>
</div> */}
<DialogFooter>
<Button
onClick={handleCreateCreditSystem}

13
vite/src/views/credits/CreditSystemConfig.tsx
View File

@@ -1,13 +1,7 @@
import FieldLabel from "@/components/general/modal-components/FieldLabel";
import { slugify } from "@/utils/formatUtils/formatTextUtils";
import {
CreditSchemaItem,
CreditSystem,
Feature,
FeatureType,
} from "@autumn/shared";
import { CreditSchemaItem, Feature, FeatureType } from "@autumn/shared";
import { faXmark } from "@fortawesome/pro-duotone-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
Select,
@@ -21,6 +15,7 @@ import { Input } from "@/components/ui/input";
import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { useFeaturesContext } from "../features/FeaturesContext";
import { X } from "lucide-react";
function CreditSystemConfig({
creditSystem,
@@ -180,10 +175,10 @@ function CreditSystemConfig({
variant="ghost"
onClick={() => removeSchemaItem(index)}
isIcon
dim={6}
dim={5}
className="text-t3"
>
<FontAwesomeIcon icon={faXmark} />
<X size={14} />
</Button>
</div>
</div>

5
vite/src/views/credits/CreditSystemRowToolbar.tsx
View File

@@ -1,6 +1,4 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -16,6 +14,7 @@ import { FeatureService } from "@/services/FeatureService";
import { getBackendErr } from "@/utils/genUtils";
import { useFeaturesContext } from "../features/FeaturesContext";
import { ToolbarButton } from "@/components/general/table-components/ToolbarButton";
import { Delete } from "lucide-react";
export const CreditSystemRowToolbar = ({
creditSystem,
@@ -59,7 +58,7 @@ export const CreditSystemRowToolbar = ({
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
<Delete size={14} className="text-t3" />
)}
</div>
</DropdownMenuItem>

46
vite/src/views/customers/FilterButton.tsx
View File

@@ -9,17 +9,12 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
faBarsFilter,
faCheck,
faXmark,
} from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCustomersContext } from "./CustomersContext";
import { keyToTitle } from "@/utils/formatUtils/formatTextUtils";
import { Check, ListFilter, X } from "lucide-react";
function FilterButton() {
const { filters, setFilters, products } = useCustomersContext();
const { setFilters } = useCustomersContext();
return (
<DropdownMenu>
@@ -41,7 +36,7 @@ function FilterButton() {
onClick={() => setFilters({})}
className="cursor-pointer"
>
<FontAwesomeIcon icon={faXmark} className="mr-2 text-t3" />
<X size={14} className="text-t3" />
Clear
</DropdownMenuItem>
</DropdownMenuGroup>
@@ -76,9 +71,7 @@ export const FilterStatus = () => {
className="flex items-center justify-between cursor-pointer text-sm"
>
{keyToTitle(status)}
{isActive && (
<FontAwesomeIcon size="sm" icon={faCheck} className="text-t3" />
)}
{isActive && <Check size={13} className="text-t3" />}
</DropdownMenuItem>
);
})}
@@ -108,9 +101,7 @@ export const ProductStatus = () => {
className="flex items-center justify-between cursor-pointer"
>
{product.name}
{isActive && (
<FontAwesomeIcon size="sm" icon={faCheck} className="text-t3" />
)}
{isActive && <Check size={13} className="text-t3" />}
</DropdownMenuItem>
);
})}
@@ -122,34 +113,9 @@ export const RenderFilterTrigger = ({ setOpen }: any) => {
return (
<DropdownMenuTrigger asChild>
<Button variant="outline" className="text-t3">
<FontAwesomeIcon icon={faBarsFilter} className="mr-2 text-t3" />
<ListFilter size={13} className="mr-2 text-t3" />
Filter
</Button>
</DropdownMenuTrigger>
);
};
// export const FilterField = ({ field, type, options }: any) => {
// // TODO: Create function to get field name
// const { filter, setFilter } = useCustomersContext();
// if (type == "select") {
// return (
// <DropdownMenuSub>
// <DropdownMenuSubTrigger>{field}</DropdownMenuSubTrigger>
// <DropdownMenuPortal>
// <DropdownMenuSubContent>
// {options.map((option: any) => (
// <DropdownMenuItem
// key={option}
// onClick={() => setFilter({ [field]: option })}
// >
// {keyToTitle(option)}
// </DropdownMenuItem>
// ))}
// </DropdownMenuSubContent>
// </DropdownMenuPortal>
// </DropdownMenuSub>
// );
// }
// };

25
vite/src/views/customers/SearchBar.tsx
View File

@@ -1,8 +1,7 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faMagnifyingGlass } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { debounce } from "lodash";
import { useMemo, useRef, useState } from "react";
import { Search } from "lucide-react";
export function SearchBar({
query,
@@ -42,11 +41,7 @@ export function SearchBar({
className="rounded-sm border-1 shadow-sm py-1 h-8 px-2 text-sm
flex items-center w-full bg-white"
>
<FontAwesomeIcon
icon={faMagnifyingGlass}
className="text-t3 mr-2"
size="sm"
/>
<Search size={13} className="text-t3 mr-2" />
<input
onChange={handleChange}
className="outline-none w-full bg-transparent"
@@ -54,21 +49,5 @@ export function SearchBar({
></input>
{loading && <SmallSpinner />}
</div>
// <Input
// type="text"
// placeholder="Search customers..."
// value={query}
// onChange={handleChange}
// // autoFocus
// className="pr-8 max-w-md"
// ref={inputRef}
// endContent={
// loading && (
// <div className="absolute right-2 top-2">
// <Loader2 className="h-5 w-5 animate-spin text-primary" />
// </div>
// )
// }
// />
);
}

25
vite/src/views/customers/customer/CustomerDetails.tsx
View File

@@ -2,12 +2,9 @@ import { useCustomerContext } from "./CustomerContext";
import { getStripeCusLink } from "@/utils/linkUtils";
import { Product } from "@autumn/shared";
import { faStripe } from "@fortawesome/free-brands-svg-icons";
import {
faArrowUpRightFromSquare,
faCheck,
faCopy,
} from "@fortawesome/pro-duotone-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ArrowUpRightFromSquare, Check } from "lucide-react";
import { Copy } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router";
@@ -74,14 +71,15 @@ export const CustomerDetails = () => {
{customer.id}
</p>
{(idCopied || idHover) && (
<FontAwesomeIcon
icon={idCopied ? faCheck : faCopy}
size="xs"
<div
className="flex items-center justify-center"
onClick={() => {
navigator.clipboard.writeText(customer.id);
setIdCopied(true);
}}
/>
>
{idCopied ? <Check size={13} /> : <Copy size={13} />}
</div>
)}
</div>
@@ -127,14 +125,9 @@ export const CustomerDetails = () => {
<div className="flex justify-center items-center w-fit gap-2">
<FontAwesomeIcon
icon={faStripe}
className="text-[#675DFF]"
size="lg"
/>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="text-[#675DFF]"
size="xs"
className="!h-5 text-[#675DFF]"
/>
<ArrowUpRightFromSquare size={10} className="text-[#675DFF]" />
</div>
</Link>
)}

9
vite/src/views/customers/customer/CustomerProductList.tsx
View File

@@ -20,9 +20,6 @@ import {
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsisVertical } from "@fortawesome/pro-regular-svg-icons";
import { faArrowUpRightFromSquare } from "@fortawesome/pro-duotone-svg-icons";
import { keyToTitle } from "@/utils/formatUtils/formatTextUtils";
import { CusService } from "@/services/customers/CusService";
import { useAxiosInstance } from "@/services/useAxiosInstance";
@@ -35,6 +32,7 @@ import { getStripeSubLink } from "@/utils/linkUtils";
import React from "react";
import { cn } from "@/lib/utils";
import { ToolbarButton } from "@/components/general/table-components/ToolbarButton";
import { ArrowUpRightFromSquare } from "lucide-react";
export const CustomerProductList = ({
customer,
@@ -129,10 +127,9 @@ export const CustomerProductList = ({
}}
>
<div className="flex justify-center items-center w-fit px-2 gap-2 h-6">
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
<ArrowUpRightFromSquare
size={12}
className="text-[#665CFF]"
size="xs"
/>
</div>
</Link>

25
vite/src/views/customers/customer/CustomerToolbar.tsx
View File

@@ -1,6 +1,4 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faPen, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
DropdownMenu,
@@ -16,7 +14,7 @@ import { Customer } from "@autumn/shared";
import { useCustomerContext } from "./CustomerContext";
import { CusService } from "@/services/customers/CusService";
import { useNavigate } from "react-router";
import { faCog, faTicket } from "@fortawesome/pro-duotone-svg-icons";
import { navigateTo } from "@/utils/genUtils";
import React from "react";
@@ -24,6 +22,15 @@ import { Dialog, DialogTrigger } from "@/components/ui/dialog";
import AddCouponDialogContent from "./add-coupon/AddCouponDialogContent";
import { cn } from "@/lib/utils";
import UpdateCustomerDialog from "./UpdateCustomerDialog";
import {
Delete,
Pen,
Pencil,
Settings,
Settings2,
Ticket,
Trash,
} from "lucide-react";
export const CustomerToolbar = ({
className,
@@ -80,7 +87,7 @@ export const CustomerToolbar = ({
dim={6}
className={cn("rounded-full", className)}
>
<FontAwesomeIcon icon={faCog} size="lg" />
<Settings size={14} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-t2 w-[150px]" align="end">
@@ -93,7 +100,7 @@ export const CustomerToolbar = ({
>
<div className="flex text-sm items-center justify-between w-full gap-2">
<p className="text-t2">Add Coupon</p>
<FontAwesomeIcon icon={faTicket} size="sm" />
<Ticket size={12} className="text-t3" />
</div>
</DropdownMenuItem>
<DropdownMenuItem
@@ -104,7 +111,7 @@ export const CustomerToolbar = ({
>
<div className="flex text-sm items-center justify-between w-full gap-2">
<p className="text-t2">Update</p>
<FontAwesomeIcon icon={faPen} size="sm" />
<Settings2 size={12} className="text-t3" />
</div>
</DropdownMenuItem>
</DialogTrigger>
@@ -118,11 +125,7 @@ export const CustomerToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Delete
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
)}
{deleteLoading ? <SmallSpinner /> : <Delete size={12} />}
</div>
</DropdownMenuItem>
</DropdownMenuContent>

39
vite/src/views/customers/customer/add-product/AddProductButton.tsx
View File

@@ -5,11 +5,6 @@ import {
TooltipContent,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faFileInvoiceDollar,
faUpload,
} from "@fortawesome/pro-duotone-svg-icons";
import { useState } from "react";
import {
@@ -18,8 +13,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { faCartShopping } from "@fortawesome/pro-duotone-svg-icons/faCartShopping";
import { ProductActionState } from "@/utils/models";
import { File, ShoppingCart, Upload } from "lucide-react";
export const AddProductButton = ({
setUseInvoice,
@@ -74,7 +69,7 @@ export const AddProductButton = ({
className="w-fit gap-2"
isLoading={loading}
disabled={actionState.disabled}
startIcon={<FontAwesomeIcon icon={faUpload} />}
startIcon={<Upload size={12} />}
>
{actionState.buttonText}
</Button>
@@ -91,7 +86,7 @@ export const AddProductButton = ({
onClick={() => setOpen(true)}
variant="gradientPrimary"
className="w-fit gap-2"
startIcon={<FontAwesomeIcon icon={faUpload} />}
startIcon={<Upload size={12} />}
disabled={actionState.disabled}
>
{actionState.buttonText}
@@ -108,11 +103,8 @@ export const AddProductButton = ({
className="h-8 flex items-center justify-between"
>
<div className="flex items-center gap-2">
<FontAwesomeIcon
icon={faCartShopping}
size="xs"
className="!h-3 w-3"
/>
<ShoppingCart size={12} className="text-t3" />
<p className="text-xs text-t2">Checkout</p>
</div>
</DropdownMenuItem>
@@ -122,11 +114,7 @@ export const AddProductButton = ({
className="h-8 flex items-center justify-between"
>
<div className="flex items-center gap-2">
<FontAwesomeIcon
icon={faFileInvoiceDollar}
size="xs"
className="!h-3 w-3"
/>
<File size={12} className="text-t3" />
<p className="text-xs text-t2">Invoice</p>
</div>
</DropdownMenuItem>
@@ -134,18 +122,3 @@ export const AddProductButton = ({
</DropdownMenu>
);
};
{
/* <div>
<Button
onClick={handleClick}
variant="gradientPrimary"
className="w-fit gap-2"
startIcon={<FontAwesomeIcon icon={faUpload} />}
isLoading={createLoading}
disabled={actionState.disabled}
>
{actionState.buttonText}
</Button>
</div> */
}

5
vite/src/views/customers/customer/add-product/NewProductDropdown.tsx
View File

@@ -11,7 +11,7 @@ import { useCustomerContext } from "../CustomerContext";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { AddProductContext } from "./CreateCheckoutContext";
import { Input } from "@/components/ui/input";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/pro-solid-svg-icons";
import { useNavigate } from "react-router";
import { getRedirectUrl, navigateTo } from "@/utils/genUtils";
@@ -19,6 +19,7 @@ import { toast } from "sonner";
import { OrgService } from "@/services/OrgService";
import { Product } from "@autumn/shared";
import SmallSpinner from "@/components/general/SmallSpinner";
import { Search } from "lucide-react";
function AddProduct() {
const { products, customer, env, org } = useCustomerContext();
@@ -76,7 +77,7 @@ function AddProduct() {
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)] p-0">
<div className="flex items-center border-b px-2">
<FontAwesomeIcon icon={faSearch} className="h-3 w-3 text-t3" />
<Search size={12} className="text-t3" />
<Input
type="search"
placeholder="Search products"

11
vite/src/views/customers/customer/entitlements/CustomerEntitlementToolbar.tsx
View File

@@ -1,6 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
DropdownMenu,
@@ -14,6 +13,8 @@ import { Button } from "@/components/ui/button";
import { Entitlement } from "@autumn/shared";
import { cn } from "@/lib/utils";
import { EllipsisVertical } from "lucide-react";
import { Delete } from "lucide-react";
export const CustomerEntitlementToolbar = ({
className,
@@ -47,7 +48,7 @@ export const CustomerEntitlementToolbar = ({
dim={6}
className={cn("rounded-full", className)}
>
<FontAwesomeIcon icon={faEllipsisVertical} size="sm" />
<EllipsisVertical size={12} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-t2">
@@ -61,11 +62,7 @@ export const CustomerEntitlementToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Delete
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
)}
{deleteLoading ? <SmallSpinner /> : <Delete size={12} />}
</div>
</DropdownMenuItem>
</DropdownMenuContent>

15
vite/src/views/customers/customer/product/ProductOptionsButton.tsx
View File

@@ -1,12 +1,17 @@
import { faCircleDollar } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { useProductContext } from "@/views/products/product/ProductContext";
import { DollarSign } from "lucide-react";
export const ProductOptionsButton = () => {
const { product } = useProductContext();
// console.log(product);
// console.log(product);
return (
<Dialog>
@@ -14,7 +19,7 @@ export const ProductOptionsButton = () => {
<Button
variant="gradientSecondary"
className="w-fit gap-2"
startIcon={<FontAwesomeIcon icon={faCircleDollar} />}
startIcon={<DollarSign size={12} />}
>
Configure Product Options
</Button>

24
vite/src/views/developer/APIKeyTable.tsx
View File

@@ -3,7 +3,14 @@ import { ApiKey } from "@autumn/shared";
import React from "react";
import { APIKeyToolbar } from "./APIKeyToolbar";
import { Table, TableHead, TableHeader, TableRow, TableBody, TableCell } from "@/components/ui/table";
import {
Table,
TableHead,
TableHeader,
TableRow,
TableBody,
TableCell,
} from "@/components/ui/table";
export const APIKeyTable = ({ apiKeys }: { apiKeys: ApiKey[] }) => {
// let { org } = useHomeContext();
@@ -22,12 +29,17 @@ export const APIKeyTable = ({ apiKeys }: { apiKeys: ApiKey[] }) => {
{apiKeys.map((key) => (
<TableRow key={key.id}>
<TableCell className="min-w-32 font-medium">{key.name}</TableCell>
<TableCell className="min-w-32 font-mono text-t2 w-full">{key.prefix}</TableCell>
<TableCell className="min-w-32 font-mono text-t2 w-full">
{key.prefix}
</TableCell>
<TableCell className="min-w-48">
{formatUnixToDateTime(key.created_at).date}
<span className="text-t3"> {formatUnixToDateTime(key.created_at).time} </span>
</TableCell>
<TableCell className="w-20 ">
{formatUnixToDateTime(key.created_at).date}
<span className="text-t3">
{" "}
{formatUnixToDateTime(key.created_at).time}{" "}
</span>
</TableCell>
<TableCell className="w-full flex justify-end">
<APIKeyToolbar apiKey={key} />
</TableCell>
</TableRow>

21
vite/src/views/developer/APIKeyToolbar.tsx
View File

@@ -1,7 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -10,20 +8,15 @@ import {
} from "@/components/ui/dropdown-menu";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { useDevContext } from "./DevContext";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { DevService } from "@/services/DevService";
import { ApiKey } from "@autumn/shared";
import { ToolbarButton } from "@/components/general/table-components/ToolbarButton";
import { Delete } from "lucide-react";
export const APIKeyToolbar = ({
className,
apiKey,
}: {
className?: string;
apiKey: ApiKey;
}) => {
export const APIKeyToolbar = ({ apiKey }: { apiKey: ApiKey }) => {
const { mutate, env } = useDevContext();
const axiosInstance = useAxiosInstance({ env });
const [deleteLoading, setDeleteLoading] = useState(false);
@@ -56,11 +49,7 @@ export const APIKeyToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Delete
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
)}
{deleteLoading ? <SmallSpinner /> : <Delete size={12} />}
</div>
</DropdownMenuItem>
</DropdownMenuContent>

23
vite/src/views/developer/DevView.tsx
View File

@@ -4,7 +4,7 @@ import { useAxiosSWR } from "@/services/useAxiosSwr";
import LoadingScreen from "../general/LoadingScreen";
import CreateAPIKey from "./CreateAPIKey";
import { AppEnv } from "@autumn/shared";
import { Toaster } from "sonner";
import { DevContext } from "./DevContext";
import { APIKeyTable } from "./APIKeyTable";
import CopyButton from "@/components/general/CopyButton";
@@ -24,13 +24,6 @@ export default function DevScreen({ env }: { env: AppEnv }) {
return (
<DevContext.Provider value={{ env, mutate, ...data }}>
<Toaster
position="bottom-center"
toastOptions={{
duration: 2000,
style: { fontSize: "14px" },
}}
/>
<h1 className="text-xl font-medium">Developer</h1>
<div>
<h2 className="text-lg font-medium">Secret API Keys</h2>
@@ -69,20 +62,6 @@ export default function DevScreen({ env }: { env: AppEnv }) {
)}
</div>
</div>
{/* <div className="mt-4">
<h1 className="text-lg font-medium mb-4">Webhooks</h1>
<div className="h-fit w-full -translate-x-6">
<AppPortal
url={data?.svix_dashboard_url}
style={{
width: "105%",
height: "100%",
}}
fullSize={true}
/>
</div>
</div> */}
</DevContext.Provider>
);
}

12
vite/src/views/features/FeatureRowToolbar.tsx
View File

@@ -1,7 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -10,7 +8,6 @@ import {
} from "@/components/ui/dropdown-menu";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { Feature } from "@autumn/shared";
@@ -18,6 +15,7 @@ import { useFeaturesContext } from "./FeaturesContext";
import { FeatureService } from "@/services/FeatureService";
import { getBackendErr } from "@/utils/genUtils";
import { ToolbarButton } from "@/components/general/table-components/ToolbarButton";
import { Delete } from "lucide-react";
export const FeatureRowToolbar = ({
className,
@@ -59,11 +57,7 @@ export const FeatureRowToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Delete
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
)}
{deleteLoading ? <SmallSpinner /> : <Delete size={12} />}
</div>
</DropdownMenuItem>
</DropdownMenuContent>

9
vite/src/views/features/FeaturesView.tsx
View File

@@ -9,16 +9,11 @@ import { AppEnv } from "@autumn/shared";
import LoadingScreen from "../general/LoadingScreen";
import { FeaturesTable } from "./FeaturesTable";
import { CustomToaster } from "@/components/general/CustomToaster";
import { Button } from "@/components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDollarCircle } from "@fortawesome/pro-duotone-svg-icons";
import { cn } from "@/lib/utils";
import { CreditSystemsTable } from "../credits/CreditSystemsTable";
import CreateCreditSystem from "../credits/CreateCreditSystem";
import { ToggleDisplayButton } from "@/components/general/ToggleDisplayButton";
import ErrorScreen from "../general/ErrorScreen";
import { Banknote, DollarSign } from "lucide-react";
function FeaturesView({ env }: { env: AppEnv }) {
const [showCredits, setShowCredits] = useState(false);
@@ -74,7 +69,7 @@ function FeaturesView({ env }: { env: AppEnv }) {
disabled={creditSystems.length > 0}
onClick={() => setShowCredits(!showCredits)}
>
<FontAwesomeIcon icon={faDollarCircle} className="mr-2" />
<Banknote size={14} />
Credit Systems
</ToggleDisplayButton>
</div>

2
vite/src/views/general/ErrorScreen.tsx
View File

@@ -3,8 +3,6 @@ import { useEnv } from "@/utils/envUtils";
import { Link } from "react-router";
import React from "react";
import { getRedirectUrl } from "@/utils/genUtils";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/pro-regular-svg-icons";
function ErrorScreen({
children,

10
vite/src/views/main-sidebar/EnvDropdown.tsx
View File

@@ -9,11 +9,11 @@ import {
import { AppEnv } from "@autumn/shared";
import { envToPath } from "@/utils/genUtils";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faChevronDown } from "@fortawesome/pro-regular-svg-icons";
import { useLocation } from "react-router";
import { useSidebarContext } from "./SidebarContext";
import { cn } from "@/lib/utils";
import { Check, ChevronDown } from "lucide-react";
export const EnvDropdown = ({ env }: { env: AppEnv }) => {
const location = useLocation();
@@ -44,7 +44,7 @@ export const EnvDropdown = ({ env }: { env: AppEnv }) => {
{state == "expanded" ? (
<div className="flex items-center justify-between w-full gap-1">
<p className="text-sm">{envText}</p>
<FontAwesomeIcon icon={faChevronDown} className="ml-auto" />
<ChevronDown className="ml-auto" size={14} />
</div>
) : (
<p className="text-sm">{envText.slice(0, 1)}</p>
@@ -62,7 +62,7 @@ export const EnvDropdown = ({ env }: { env: AppEnv }) => {
>
<span>Sandbox</span>
{env === AppEnv.Sandbox && (
<FontAwesomeIcon icon={faCheck} className="text-t3" />
<Check size={12} className="!h-4 text-t3" />
)}
</DropdownMenuItem>
@@ -74,7 +74,7 @@ export const EnvDropdown = ({ env }: { env: AppEnv }) => {
>
<span>Production</span>
{env === AppEnv.Live && (
<FontAwesomeIcon icon={faCheck} className="text-t3" />
<Check size={12} className="!h-4 text-t3" />
)}
</DropdownMenuItem>
</DropdownMenuContent>

25
vite/src/views/main-sidebar/MainSidebar.tsx
View File

@@ -1,14 +1,3 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCode,
faFileLines,
faFlag,
faTag,
faToggleOff,
faUser,
faUsers,
} from "@fortawesome/pro-duotone-svg-icons";
import { NavButton } from "./NavButton";
import { SidebarTop } from "./SidebarTop";
@@ -18,6 +7,7 @@ import { useState } from "react";
import { cn } from "@/lib/utils";
import { SidebarContext } from "./SidebarContext";
import { useHotkeys } from "react-hotkeys-hook";
import { Code, Flag, Tag, User } from "lucide-react";
export const MainSidebar = () => {
const env = useEnv();
@@ -42,23 +32,28 @@ export const MainSidebar = () => {
<div className="flex flex-col mt-4 px-4">
<NavButton
value="features"
icon={faFlag}
icon={<Flag size={15} />}
title="Features"
env={env}
/>
<NavButton
value="products"
icon={faTag}
icon={<Tag size={14} />}
title="Products"
env={env}
/>
<NavButton
value="customers"
icon={faUser}
icon={<User size={20} />}
title="Customers"
env={env}
/>
<NavButton value="dev" icon={faCode} title="Developer" env={env} />
<NavButton
value="dev"
icon={<Code size={15} />}
title="Developer"
env={env}
/>
</div>
</div>
{/* Sidebar bottom */}

5
vite/src/views/main-sidebar/NavButton.tsx
View File

@@ -1,13 +1,10 @@
import { useTab } from "@/hooks/useTab";
import { cn } from "@/lib/utils";
import { getRedirectUrl } from "@/utils/genUtils";
import { AppEnv } from "@autumn/shared";
import { Link } from "react-router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import { useSidebarContext } from "./SidebarContext";
import posthog from "posthog-js";
export const NavButton = ({
value,
@@ -51,7 +48,7 @@ export const NavButton = ({
isHovered && "translate-x-[-1px]"
)}
>
<FontAwesomeIcon icon={icon} size="sm" />
{icon}
</div>
{state == "expanded" && <span className=" font-semibold">{title}</span>}
</Link>

9
vite/src/views/main-sidebar/SidebarBottom.tsx
View File

@@ -1,13 +1,13 @@
"use client";
import { UserButton, useUser } from "@clerk/clerk-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBook, faCircleNodes } from "@fortawesome/pro-duotone-svg-icons";
import { NavButton } from "./NavButton";
import { useEnv } from "@/utils/envUtils";
import { SidebarContact } from "./SidebarContact";
import { useSidebarContext } from "./SidebarContext";
import { cn } from "@/lib/utils";
import { Blocks, Book } from "lucide-react";
export default function SidebarBottom() {
const env = useEnv();
@@ -20,20 +20,19 @@ export default function SidebarBottom() {
<div className="px-4">
<NavButton
value="integrations/stripe"
icon={faCircleNodes}
icon={<Blocks size={14} />}
title="Connect to Stripe"
env={env}
/>
<NavButton
value="docs"
icon={faBook}
icon={<Book size={14} />}
title="Documentation"
env={env}
href="https://docs.useautumn.com"
/>
<SidebarContact />
</div>
{/* <SidebarContact /> */}
<div
className={cn(

19
vite/src/views/main-sidebar/SidebarContact.tsx
View File

@@ -8,11 +8,13 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faComments, faCopy } from "@fortawesome/pro-duotone-svg-icons";
import { faCopy } from "@fortawesome/pro-duotone-svg-icons";
import { toast } from "sonner";
import { NavButton } from "./NavButton";
import { useEnv } from "@/utils/envUtils";
import { Copy, MessageCircle } from "lucide-react";
import CopyButton from "@/components/general/CopyButton";
export function SidebarContact() {
const email = "hey@useautumn.com";
@@ -31,7 +33,7 @@ export function SidebarContact() {
<NavButton
env={env}
value="chat"
icon={faComments}
icon={<MessageCircle size={14} />}
title="Chat with us"
/>
</div>
@@ -45,18 +47,15 @@ export function SidebarContact() {
onClick={() => (window.location.href = `mailto:${email}`)}
className="cursor-pointer"
>
<span>{email}</span>
<FontAwesomeIcon
icon={faCopy}
className="ml-2 cursor-pointer hover:text-primary"
onClick={handleCopy}
/>
<div className="flex items-center justify-between w-full">
<span>{email}</span>
<Copy size={12} />
</div>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => window.open("https://cal.com/ayrod", "_blank")}
className="cursor-pointer"
>
{/* <FontAwesomeIcon icon={faCalendar} className="mr-2" /> */}
Book a call
</DropdownMenuItem>
<DropdownMenuItem className="cursor-progress h-[30px] flex justify-between">

26
vite/src/views/main-sidebar/SidebarTop.tsx
View File

@@ -6,14 +6,7 @@ import {
} from "@clerk/clerk-react";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCheck,
faChevronLeft,
faChevronRight,
faCopy,
} from "@fortawesome/pro-regular-svg-icons";
import CopyButton from "@/components/general/CopyButton";
import { EnvDropdown } from "./EnvDropdown";
import { useEnv } from "@/utils/envUtils";
@@ -24,6 +17,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Check, ChevronLeft, ChevronRight, Copy } from "lucide-react";
export const SidebarTop = () => {
const { isLoaded, user } = useUser();
@@ -108,9 +102,11 @@ export const SidebarTop = () => {
variant="ghost"
className="p-0 w-5 h-5 text-t3 m-0"
>
<FontAwesomeIcon
icon={state == "expanded" ? faChevronLeft : faChevronRight}
/>
{state == "expanded" ? (
<ChevronLeft size={14} />
) : (
<ChevronRight size={14} />
)}
</Button>
</div>
<EnvDropdown env={env} />
@@ -141,14 +137,14 @@ const CopyText = ({ text }: { text: string }) => {
{text}
</p>
{(isCopied || isHover) && (
<FontAwesomeIcon
icon={isCopied ? faCheck : faCopy}
size="xs"
<div
onClick={() => {
navigator.clipboard.writeText(text);
setIsCopied(true);
}}
/>
>
{isCopied ? <Check size={10} /> : <Copy size={10} />}
</div>
)}
</div>
);

25
vite/src/views/onboarding/OnboardingView.tsx
View File

@@ -26,7 +26,7 @@ import CreateProduct from "../products/CreateProduct";
import CreateAPIKey from "../developer/CreateAPIKey";
import { DevContext } from "../developer/DevContext";
import { CodeDisplay } from "@/components/general/CodeDisplay";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faBuilding,
faExternalLinkAlt,
@@ -34,8 +34,12 @@ import {
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { CopyPublishableKey } from "../developer/DevView";
import { useEnv } from "@/utils/envUtils";
import LoadingScreen from "../general/LoadingScreen";
import { navigateTo } from "@/utils/genUtils";
import {
ArrowUpRight,
ArrowUpRightFromSquare,
Book,
Building,
} from "lucide-react";
function OnboardingView() {
const env = useEnv();
@@ -178,9 +182,7 @@ function OnboardingView() {
onClick={handleCreateOrg}
isLoading={loading}
variant="gradientPrimary"
startIcon={
<FontAwesomeIcon icon={faBuilding} className="mr-2" />
}
startIcon={<Building size={12} />}
>
Create Organization
</Button>
@@ -229,9 +231,9 @@ function OnboardingView() {
rel="noopener noreferrer"
>
Stripe Test Key
<FontAwesomeIcon
className="ml-1 h-2.5 w-2.5"
icon={faExternalLinkAlt}
<ArrowUpRightFromSquare
size={12}
className="inline ml-1"
/>
</a>{" "}
</span>
@@ -462,10 +464,7 @@ window.location.href = checkoutUrl;
rel="noopener noreferrer"
>
Documentation
<FontAwesomeIcon
className="ml-1 h-2.5 w-2.5"
icon={faExternalLinkAlt}
/>
<Book size={12} className="inline ml-1" />
</a>{" "}
to learn more about what you can do with Autumn.
</p>

10
vite/src/views/products/ProductRowToolbar.tsx
View File

@@ -1,6 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faClone, faPencil, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
DropdownMenu,
@@ -11,7 +10,7 @@ import {
import { useState } from "react";
import { toast } from "sonner";
import { AppEnv, Product } from "@autumn/shared";
import { Product } from "@autumn/shared";
import { ProductService } from "@/services/products/ProductService";
import { useProductsContext } from "./ProductsContext";
import { useAxiosInstance } from "@/services/useAxiosInstance";
@@ -20,6 +19,7 @@ import { ToolbarButton } from "@/components/general/table-components/ToolbarButt
import { Dialog, DialogTrigger } from "@/components/ui/dialog";
import { UpdateProductDialog } from "./UpdateProduct";
import { CopyDialog } from "./CopyDialog";
import { Copy, Delete, Pen } from "lucide-react";
export const ProductRowToolbar = ({
product,
@@ -84,7 +84,7 @@ export const ProductRowToolbar = ({
{copyLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faClone} size="sm" />
<Copy size={12} className="text-t3" />
)}
</div>
</DropdownMenuItem>
@@ -102,7 +102,7 @@ export const ProductRowToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Edit
<FontAwesomeIcon icon={faPencil} size="sm" />
<Pen size={12} className="text-t3" />
</div>
</DropdownMenuItem>
</DialogTrigger>
@@ -119,7 +119,7 @@ export const ProductRowToolbar = ({
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
<Delete size={12} className="text-t3" />
)}
</div>
</DropdownMenuItem>

6
vite/src/views/products/ProductsView.tsx
View File

@@ -11,8 +11,8 @@ import { ProductsTable } from "./ProductsTable";
import { CouponsTable } from "./coupons/CouponsTable";
import CreateCoupon from "./coupons/CreateCoupon";
import { ToggleDisplayButton } from "@/components/general/ToggleDisplayButton";
import { faTicketSimple } from "@fortawesome/pro-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Ticket } from "lucide-react";
function ProductsView({ env }: { env: AppEnv }) {
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
@@ -57,7 +57,7 @@ function ProductsView({ env }: { env: AppEnv }) {
disabled={data?.coupons.length > 0}
onClick={() => setShowCoupons((prev) => !prev)}
>
<FontAwesomeIcon icon={faTicketSimple} className="mr-2" />
<Ticket size={12} className="mr-2" />
Coupons
</ToggleDisplayButton>
</div>

56
vite/src/views/products/coupons/CouponConfig.tsx
View File

@@ -26,11 +26,9 @@ import {
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Check, ChevronsUpDown, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown, Trash2, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { faCheck, faXmark } from "@fortawesome/pro-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ScrollArea } from "@/components/ui/scroll-area";
export const CouponConfig = ({
@@ -233,7 +231,7 @@ const ProductPriceSelector = ({
}}
className="bg-transparent hover:bg-transparent p-0 w-5 h-5"
>
<FontAwesomeIcon icon={faXmark} size="sm" />
<X size={12} className="text-t3" />
</Button>
</div>
))}
@@ -258,44 +256,34 @@ const ProductPriceSelector = ({
}}
className="cursor-pointer"
>
{/* <Checkbox
id="apply-to-all"
checked={coupon.apply_to_all}
onCheckedChange={(checked) =>
setCoupon({ ...coupon, apply_to_all: checked === true })
}
className="text-white"
/> */}
<p>Apply to all products</p>
{coupon.apply_to_all && (
<FontAwesomeIcon
icon={faCheck}
className="ml-auto"
size="sm"
/>
<Check size={12} className="text-t3" />
)}
</CommandItem>
</CommandGroup>
{!coupon.apply_to_all &&
products.map((product: any) => (
<CommandGroup key={product.id} heading={product.name}>
{product.prices?.map((price: any) => (
<CommandItem
key={price.id}
value={price.id}
onSelect={() => handlePriceToggle(price.id)}
className="cursor-pointer"
>
<div className="flex items-center">{price.name}</div>
{coupon.price_ids.includes(price.id) && (
<FontAwesomeIcon
icon={faCheck}
className="ml-auto"
size="sm"
/>
)}
{product.prices.length > 0 ? (
product.prices?.map((price: any) => (
<CommandItem
key={price.id}
value={price.id}
onSelect={() => handlePriceToggle(price.id)}
className="cursor-pointer"
>
<div className="flex items-center">{price.name}</div>
{coupon.price_ids.includes(price.id) && (
<Check size={12} className="text-t3" />
)}
</CommandItem>
))
) : (
<CommandItem disabled>
<p className="text-sm text-t3">No prices available</p>
</CommandItem>
))}
)}
</CommandGroup>
))}
</ScrollArea>

8
vite/src/views/products/coupons/CouponRowToolbar.tsx
View File

@@ -1,7 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -10,7 +8,6 @@ import {
} from "@/components/ui/dropdown-menu";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { Coupon } from "@autumn/shared";
@@ -18,6 +15,7 @@ import { getBackendErr } from "@/utils/genUtils";
import { useProductsContext } from "../ProductsContext";
import { CouponService } from "@/services/products/CouponService";
import { ToolbarButton } from "@/components/general/table-components/ToolbarButton";
import { Delete } from "lucide-react";
export const CouponRowToolbar = ({
className,
@@ -66,7 +64,7 @@ export const CouponRowToolbar = ({
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
<Delete size={12} className="text-t3" />
)}
</div>
</DropdownMenuItem>

8
vite/src/views/products/product/EditFreeTrialToolbar.tsx
View File

@@ -1,6 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
@@ -15,6 +14,7 @@ import { Product } from "@autumn/shared";
import { useNavigate } from "react-router";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { useProductContext } from "./ProductContext";
import { Delete, EllipsisVertical } from "lucide-react";
export const EditFreeTrialToolbar = ({
className,
@@ -42,7 +42,7 @@ export const EditFreeTrialToolbar = ({
dim={6}
className={cn("rounded-full", className)}
>
<FontAwesomeIcon icon={faEllipsisVertical} />
<EllipsisVertical size={12} className="text-t3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-t2">
@@ -59,7 +59,7 @@ export const EditFreeTrialToolbar = ({
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
<Delete size={12} className="text-t3" />
)}
</div>
</DropdownMenuItem>

13
vite/src/views/products/product/EditProductToolbar.tsx
View File

@@ -1,6 +1,4 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
@@ -13,12 +11,13 @@ import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Product } from "@autumn/shared";
import { faCog } from "@fortawesome/pro-duotone-svg-icons";
import { ProductService } from "@/services/products/ProductService";
import { useNavigate } from "react-router";
import { useAxiosInstance } from "@/services/useAxiosInstance";
import { useProductContext } from "./ProductContext";
import { navigateTo } from "@/utils/genUtils";
import { Delete, Settings } from "lucide-react";
export const EditProductToolbar = ({
className,
@@ -54,7 +53,7 @@ export const EditProductToolbar = ({
dim={6}
className={cn("rounded-full", className)}
>
<FontAwesomeIcon icon={faCog} size="lg" />
<Settings size={14} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-t2">
@@ -68,11 +67,7 @@ export const EditProductToolbar = ({
>
<div className="flex items-center justify-between w-full gap-2">
Delete
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
)}
{deleteLoading ? <SmallSpinner /> : <Delete size={12} />}
</div>
</DropdownMenuItem>
</DropdownMenuContent>

5
vite/src/views/products/product/prices/CreateFixedPrice.tsx
View File

@@ -9,10 +9,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { keyToTitle } from "@/utils/formatUtils/formatTextUtils";
import { Button } from "@/components/ui/button";
import { Plus, X } from "lucide-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faXmark } from "@fortawesome/pro-solid-svg-icons";
import FieldLabel from "@/components/general/modal-components/FieldLabel";
import { useProductContext } from "../ProductContext";

5
vite/src/views/products/product/prices/CreateUsagePrice.tsx
View File

@@ -21,12 +21,11 @@ import { useEffect } from "react";
import { keyToTitleFirstCaps } from "@/utils/formatUtils/formatTextUtils";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { faXmark } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useProductContext } from "../ProductContext";
import { getFeature } from "@/utils/product/entitlementUtils";
import { getBillingUnits } from "@/utils/product/priceUtils";
import { Checkbox } from "@/components/ui/checkbox";
import { X } from "lucide-react";
function CreateUsagePrice({
config,
@@ -327,7 +326,7 @@ function CreateUsagePrice({
onClick={() => handleRemoveTier(index)}
dim={6}
>
<FontAwesomeIcon icon={faXmark} />
<X size={12} className="text-t3" />
</Button>
)}
</div>

8
vite/src/views/products/product/prices/PriceToolbar.tsx
View File

@@ -1,6 +1,5 @@
import SmallSpinner from "@/components/general/SmallSpinner";
import { faEllipsisVertical, faTrash } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -16,6 +15,7 @@ import { PriceService } from "@/services/products/PriceService";
import { useNavigate } from "react-router";
import { useProductContext } from "../ProductContext";
import { cn } from "@/lib/utils";
import { Delete, EllipsisVertical } from "lucide-react";
export const PriceToolbar = ({
className,
@@ -54,7 +54,7 @@ export const PriceToolbar = ({
dim={6}
className={cn("rounded-full", className)}
>
<FontAwesomeIcon icon={faEllipsisVertical} size="sm" />
<EllipsisVertical size={12} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-t2">
@@ -71,7 +71,7 @@ export const PriceToolbar = ({
{deleteLoading ? (
<SmallSpinner />
) : (
<FontAwesomeIcon icon={faTrash} size="sm" />
<Delete size={12} className="text-t3" />
)}
</div>
</DropdownMenuItem>