import React from "react" import Stripe from "stripe" import { Elements } from "@stripe/react-stripe-js" import { loadStripe } from "@stripe/stripe-js" import { setCookie } from "nookies" import { NextSeo, BreadcrumbJsonLd } from "next-seo" // Page components import Banner from "../components/Banner" import JobPostForm from "../components/form/JobPostForm" const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY) export const getServerSideProps = async (ctx) => { const stripe = new Stripe(process.env.STRIPE_SECRET_KEY) let paymentIntent paymentIntent = await stripe.paymentIntents.create({ amount: 2500, currency: "usd", }) setCookie(ctx, "paymentIntentId", paymentIntent.id) return { props: { paymentIntent, }, } } const NewJobPage = ({ paymentIntent }) => { return ( <Elements stripe={stripePromise}> <> <NextSeo title={`Create a new remote job post`} description="Start hiring remotely, post a new remote job and find the most qualified people for your next remote position." canonical={`https://remotebond.com/hire-remotely`} openGraph={{ url: `https://remotebond.com/hire-remotely`, title: `Create a new remote job post`, description: `Start hiring remotely, post a new remote job and find the most qualified people for your next remote position.`, }} /> <BreadcrumbJsonLd itemListElements={[ { position: 1, name: "remotebond.com", item: "https://remotebond.com", }, { position: 2, name: "Hire Remotely", }, ]} /> <Banner message={`Launch deal! Base job ad is now priced at $25`} /> <div className="relative overflow-hidden bg-black"> <div className="max-w-screen-xl mx-auto py-16 px-4 sm:px-6 lg:py-12 lg:px-8"> <div> <h1 className="text-center text-3xl leading-9 font-extrabold text-white"> Hire remotely </h1> <h2 className="text-rb-gray-4 text-center w-full"> Create your remote job post and reach remote workers all around the world. </h2> </div> </div> </div> <JobPostForm paymentIntentSSR={paymentIntent} /> </> </Elements> ) } export default NewJobPage