diff --git a/vite/src/views/customers/customer/product/multi-attach/MultiAttachDialog.tsx b/vite/src/views/customers/customer/product/multi-attach/MultiAttachDialog.tsx
index 08525a156..e83a7f650 100644
--- a/vite/src/views/customers/customer/product/multi-attach/MultiAttachDialog.tsx
+++ b/vite/src/views/customers/customer/product/multi-attach/MultiAttachDialog.tsx
@@ -38,6 +38,8 @@ import { Separator } from "@/components/ui/separator";
import { getStripeInvoiceLink } from "@/utils/linkUtils";
import { formatAmount } from "@/utils/product/productItemUtils";
import { formatUnixToDate } from "@/utils/formatUtils/formatDateUtils";
+import { AddRewardButton, MultiAttachRewards } from "./MultiAttachRewards";
+import { useAxiosSWR } from "@/services/useAxiosSwr";
export const MultiAttachDialog = ({
open,
@@ -50,6 +52,7 @@ export const MultiAttachDialog = ({
const axiosInstance = useAxiosInstance();
+ const [attachRewards, setAttachRewards] = useState
([]);
const [checkoutLoading, setCheckoutLoading] = useState(false);
const [productOptions, setProductOptions] = useState([]);
const [checkoutResult, setCheckoutResult] = useState(
@@ -58,6 +61,12 @@ export const MultiAttachDialog = ({
const defaultCurrency = org?.default_currency || "usd";
+ const { data: subData } = useAxiosSWR({
+ url: `/customers/${customer.id}/sub`,
+ });
+
+ const subDiscounts = subData?.sub.discounts || [];
+
const getDefaultProductOptions = () => {
return [{ product_id: null, quantity: 1 }];
};
@@ -71,7 +80,7 @@ export const MultiAttachDialog = ({
if (open) {
handleChange();
}
- }, [productOptions]);
+ }, [productOptions, attachRewards]);
const isValidAttach = () => {
if (productOptions.length === 0) {
@@ -88,6 +97,13 @@ export const MultiAttachDialog = ({
}
}
+ console.log("attachRewards", attachRewards);
+ for (const reward of attachRewards) {
+ if (!reward.reward_id) {
+ return false;
+ }
+ }
+
return true;
};
@@ -98,6 +114,7 @@ export const MultiAttachDialog = ({
const { data } = await axiosInstance.post("/v1/checkout", {
customer_id: customer.id,
products: productOptions,
+ reward: attachRewards.map((r) => r.reward_id),
});
setCheckoutResult(data);
@@ -163,8 +180,6 @@ export const MultiAttachDialog = ({
}
};
- console.log("Checkout result", checkoutResult);
-
return (
diff --git a/vite/src/views/customers/customer/product/multi-attach/MultiAttachRewards.tsx b/vite/src/views/customers/customer/product/multi-attach/MultiAttachRewards.tsx
new file mode 100644
index 000000000..5ad86dffb
--- /dev/null
+++ b/vite/src/views/customers/customer/product/multi-attach/MultiAttachRewards.tsx
@@ -0,0 +1,186 @@
+import FieldLabel from "@/components/general/modal-components/FieldLabel";
+import { Button } from "@/components/ui/button";
+import { Plus, X } from "lucide-react";
+import { useCustomerContext } from "../../CustomerContext";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
+import { Reward, RewardType } from "@autumn/shared";
+
+export const AddRewardButton = ({
+ setAttachRewards,
+}: {
+ setAttachRewards: (rewards: any) => void;
+}) => {
+ return (
+
}
+ onClick={() => {
+ setAttachRewards((prev: any) => [
+ ...prev,
+ { reward_id: null, quantity: 1 },
+ ]);
+ }}
+ >
+ Add Rewards
+
+ );
+};
+
+export const MultiAttachRewards = ({
+ attachRewards,
+ setAttachRewards,
+ sub,
+}: {
+ attachRewards: any;
+ setAttachRewards: (rewards: any) => void;
+ sub: any;
+}) => {
+ const { rewards, org } = useCustomerContext();
+ const subDiscounts = sub?.discounts || [];
+
+ const noRewards = attachRewards.length === 0 && subDiscounts.length === 0;
+
+ if (!rewards || !attachRewards || noRewards) return null;
+
+ const formatReward = (reward: Reward) => {
+ if (reward.type === RewardType.PercentageDiscount) {
+ return (
+ <>
+ {reward.name}{" "}
+
+ - {reward.discount_config?.discount_value}% off
+
+
+ );
+ } else if (reward.type === RewardType.FixedDiscount) {
+ return (
+ <>
+ {reward.name}{" "}
+
+ - {reward.discount_config?.discount_value}{" "}
+ {(org.default_currency || "usd").toUpperCase()} off
+
+
+ );
+ }
+ };
+
+ const getSubDiscountName = (subDiscount: any) => {
+ const correspondingReward = rewards.find(
+ (r: Reward) => r.id === subDiscount.coupon.id
+ );
+
+ const name =
+ correspondingReward?.name ||
+ subDiscount.coupon.name ||
+ subDiscount.coupon.id;
+
+ const amountOff = subDiscount.coupon.percent_off
+ ? `${subDiscount.coupon.percent_off}% off`
+ : `${subDiscount.coupon.amount_off} ${org.default_currency?.toUpperCase()} off`;
+
+ return `${name} - ${amountOff}`;
+ };
+
+ const filteredRewards = rewards.filter((r: Reward) => {
+ if (
+ r.type === RewardType.PercentageDiscount ||
+ r.type === RewardType.FixedDiscount
+ ) {
+ const subDiscount = subDiscounts.find((sd: any) => sd.coupon.id === r.id);
+
+ if (subDiscount) {
+ return false;
+ }
+ return true;
+ }
+
+ return false;
+ });
+
+ return (
+
+
+
Rewards
+
+ {subDiscounts.map((subDiscount: any, index: number) => (
+
+ ))}
+ {attachRewards.map((attachReward: any, index: number) => (
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/vite/src/views/customers/customer/product/multi-attach/useMultiAttachProvider.tsx b/vite/src/views/customers/customer/product/multi-attach/useMultiAttachProvider.tsx
new file mode 100644
index 000000000..e69de29bb