-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Stripe Connect Listing Payments (#568)
* Base for stripe connect listing integration * Fixed onboarding flow * Improve onboarding flow and adjust to new styling * Updated styling for bot listing flow * Checkout from listing page working * Updated orders to work wiht new stripe listings
- Loading branch information
1 parent
3748c37
commit 20043e6
Showing
28 changed files
with
1,676 additions
and
394 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import CheckoutButton from "@/components/stripe/CheckoutButton"; | ||
| import { formatPrice } from "@/lib/utils/formatNumber"; | ||
|
|
||
| interface Props { | ||
| listingId: string; | ||
| stripeProductId: string; | ||
| priceAmount: number; | ||
| inventoryType: "finite" | "infinite" | "preorder"; | ||
| inventoryQuantity?: number; | ||
| preorderReleaseDate?: number; | ||
| isReservation: boolean; | ||
| reservationDepositAmount?: number; | ||
| } | ||
|
|
||
| const ListingPayment = ({ | ||
| listingId, | ||
| stripeProductId, | ||
| priceAmount, | ||
| inventoryType, | ||
| inventoryQuantity, | ||
| preorderReleaseDate, | ||
| isReservation, | ||
| reservationDepositAmount, | ||
| }: Props) => { | ||
| return ( | ||
| <div className="p-4"> | ||
| <h3 className="text-lg font-semibold mb-2">Purchase Information</h3> | ||
|
|
||
| <div className="space-y-2 mb-4"> | ||
| <div className="flex justify-between"> | ||
| <span>Price:</span> | ||
| <span className="font-semibold">{formatPrice(priceAmount)}</span> | ||
| </div> | ||
|
|
||
| {isReservation && reservationDepositAmount && ( | ||
| <div className="flex justify-between text-sm text-gray-2"> | ||
| <span>Reservation Deposit:</span> | ||
| <span>{formatPrice(reservationDepositAmount)}</span> | ||
| </div> | ||
| )} | ||
|
|
||
| {inventoryType === "finite" && inventoryQuantity !== undefined && ( | ||
| <div className="flex justify-between text-sm text-gray-2"> | ||
| <span>Available Units:</span> | ||
| <span>{inventoryQuantity}</span> | ||
| </div> | ||
| )} | ||
|
|
||
| {inventoryType === "preorder" && preorderReleaseDate && ( | ||
| <div className="flex justify-between text-sm text-gray-2"> | ||
| <span>Release Date:</span> | ||
| <span> | ||
| {new Date(preorderReleaseDate * 1000).toLocaleDateString()} | ||
| </span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div className="flex justify-end"> | ||
| <CheckoutButton | ||
| listingId={listingId} | ||
| stripeProductId={stripeProductId} | ||
| label="Purchase Now" | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ListingPayment; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { useNavigate } from "react-router-dom"; | ||
|
|
||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog"; | ||
| import { useAuthentication } from "@/hooks/useAuth"; | ||
| import ROUTES from "@/lib/types/routes"; | ||
| import { Share2, ShoppingBag } from "lucide-react"; | ||
|
|
||
| interface Props { | ||
| isOpen: boolean; | ||
| onOpenChange: (open: boolean) => void; | ||
| } | ||
|
|
||
| export const CreateListingModal = ({ isOpen, onOpenChange }: Props) => { | ||
| const navigate = useNavigate(); | ||
| const auth = useAuthentication(); | ||
| const canSell = auth.currentUser?.stripe_connect_onboarding_completed; | ||
|
|
||
| const handleOptionClick = (path: string) => { | ||
| onOpenChange(false); | ||
| navigate(path); | ||
| }; | ||
|
|
||
| return ( | ||
| <Dialog open={isOpen} onOpenChange={onOpenChange}> | ||
| <DialogContent className="sm:max-w-[600px] bg-gray-12 text-gray-1 border border-gray-1 rounded-lg shadow-lg"> | ||
| <DialogHeader> | ||
| <DialogTitle>What would you like to do?</DialogTitle> | ||
| </DialogHeader> | ||
| <div className="grid grid-cols-2 gap-4 p-4"> | ||
| <div | ||
| onClick={() => | ||
| handleOptionClick( | ||
| `${ROUTES.BOTS.path}/${ROUTES.BOTS.$.CREATE.relativePath}`, | ||
| ) | ||
| } | ||
| className="flex flex-col items-center justify-center p-6 rounded-lg border border-gray-7 hover:border-gray-1 hover:bg-gray-11 cursor-pointer transition-all" | ||
| > | ||
| <Share2 className="w-12 h-12 mb-4" /> | ||
| <h3 className="text-lg font-semibold">Share a Robot</h3> | ||
| <p className="text-sm text-gray-7 text-center mt-2"> | ||
| Share your Robot with the community | ||
| </p> | ||
| </div> | ||
|
|
||
| <div | ||
| onClick={() => | ||
| canSell && | ||
| handleOptionClick( | ||
| `${ROUTES.BOTS.path}/${ROUTES.BOTS.$.SELL.relativePath}`, | ||
| ) | ||
| } | ||
| className={`flex flex-col items-center justify-center p-6 rounded-lg border ${ | ||
| canSell | ||
| ? "border-gray-7 hover:border-gray-1 hover:bg-gray-11 cursor-pointer" | ||
| : "border-gray-4 opacity-50 cursor-not-allowed" | ||
| } transition-all`} | ||
| > | ||
| <ShoppingBag className="w-12 h-12 mb-4" /> | ||
| <h3 className="text-lg font-semibold">Sell a Robot</h3> | ||
| <p className="text-sm text-gray-7 text-center mt-2"> | ||
| {canSell | ||
| ? "List your Robot for sale" | ||
| : "Complete Seller onboarding to sell"} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export default CreateListingModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.