diff --git a/encore-saas-template/.gitignore b/encore-saas-template/.gitignore new file mode 100644 index 00000000..45a51876 --- /dev/null +++ b/encore-saas-template/.gitignore @@ -0,0 +1,45 @@ +/.encore +encore.gen.go +encore.gen.cue +/encore.gen +# Logs +logs +*.log +npm-debug.log* + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history +.next + +.cursorignore +.cursorrules \ No newline at end of file diff --git a/encore-saas-template/README.md b/encore-saas-template/README.md new file mode 100644 index 00000000..b0fe03d5 --- /dev/null +++ b/encore-saas-template/README.md @@ -0,0 +1,160 @@ +# EncoreKit: Encore SaaS Template + +## Features + +- Landing page with feature promotion +- Pricing page (/pricing) which connects to Stripe Checkout +- Dashboard pages with CRUD operations to modify user +- Admin role in firebase claims (admins sees activity) +- Subscription management with Stripe Customer Portal +- Authentication with firebase +- Activity logging system for any user events + +## Tech stack + +- Frontend Framework: [Next.js](https://nextjs.org/) +- Backend Framework [Encore.go](https://encore.dev/go) + +- ORM: [gorm go](https://gorm.io/) +- Payments: [Stripe](https://stripe.com/) +- UI Library: [shadcn/ui](https://ui.shadcn.com/) + +## Developing locally + +When you have [installed Encore](https://encore.dev/docs/install), you can create a new Encore application and clone this example with this command. + +```bash +encore app create my-app-name --example=encore-saas-template +``` + +## Running locally + +### Backend + +Running the backend requires the following scripts: + +```bash +encore run # This has to be run to setup the postgres docker db and volume for later steps +``` + +```bash +pnpm i +``` + +Seeding the users in Firebase and Postgres. Find service-account.json in Firebase Console > Project Setting > Service Accounts > **Generate new private key**. (note: run script setup-firebase-and-users:clean to remove users) + +```bash +pnpm setup-firebase-and-users --service-account "/path/to/service-account.json" +``` +#### Listen to the webhook to get subscription events +Set Stripe secrets and setup a stripe webhook (requires [Stripe CLI](https://docs.stripe.com/stripe-cli) is installed) + +This command also runs stripe listen to forward stripe webhooks to our backend locally. + +```bash +pnpm run setup-stripe +``` + +### Frontend + +```bash +cd frontend +pnpm i +pnpm gen:local # generate a client for the frontend to encores cli with +pnpm dev +``` + +## Testing Payments + +To test Stripe payments, use the following test card details: + +Card Number: 4242 4242 4242 4242 +Expiration: Any future date +CVC: Any 3-digit number + +## Local Development Dashboard + +While `encore run` is running, open to access Encore's [local developer dashboard](https://encore.dev/docs/observability/dev-dash). + +Here you can see API docs, make requests in the API explorer, and view traces of the responses. + +## Deploying to Encore + +Deploy your application to a staging environment in Encore's free development cloud: + +```bash +git add . +git commit -m "first commit" +git push encore +``` + +### Allow Vercel domain to access Encore + +Modify encore.app to look like: + +``` +{ + "id": "", + "global_cors": { + "allow_origins_with_credentials": [ + "http://127.0.0.1:3000", + "http://localhost:3000", + "https://.vercel.app" + ] + } +} +``` + +Then head over to the [Cloud Dashboard](https://app.encore.dev) to monitor your deployment and find your production URL. + +From there you can also connect your own AWS or GCP account to use for deployment. + +## Deploying to Vercel + +1. Push your code to a GitHub repository. +2. Connect your repository to Vercel and deploy it. +3. Follow the Vercel deployment process, which will guide you through setting up your project. +4. **Remember to setup the env variables in Vercel** + +### Allow Vercel domain to access Firebase authentication + +1. Go to [Firebase Console](https://console.firebase.google.com/) +2. Go to Authentication -> Settings +3. Add the vercel domain to authorized domains. + +# Getting ready for production + +## Stripe + +### Set up a production Stripe webhook + +1. Go to the Stripe Dashboard and create a new webhook for your production environment. +2. Set the endpoint URL to your production API route (e.g., `https://yourdomain.com/api/stripe/webhook`). +3. Select the events you want to listen for (e.g., `checkout.session.completed`, `customer.subscription.updated`). + +### Configure Stripe secrets + +```bash +encore secret set --type production StripeSecretKey +encore secret set --type production StripeWebhookSecret +encore secret set --type production CallbackURL +``` + +## Encore + +Setup a production environment in [Encore's cloud dashboard](https://app.encore.cloud) and link to the branch of choice. +Then on the production branch: + +```bash +git commit encore +``` + +### Secrets required in Encore + +```bash +encore secret set --type production FirebasePrivateKey < "/path/to/service-account.json" +``` + +## Vercel + +Remember to setup the environment variables required in Vercel. diff --git a/encore-saas-template/backend/activity/activity.go b/encore-saas-template/backend/activity/activity.go new file mode 100644 index 00000000..3fb398d3 --- /dev/null +++ b/encore-saas-template/backend/activity/activity.go @@ -0,0 +1,86 @@ +package activity + +import ( + "context" + "time" + + "encore.app/backend/user" + "encore.dev/beta/errs" + "encore.dev/rlog" + "github.com/google/uuid" +) + +type ActivityResponse struct { + ID string `json:"id"` + UserID string `json:"user_id"` + Event string `json:"event"` + CreatedAt time.Time `json:"created_at"` +} + +type ActivitiesResponse struct { + Activities []*ActivityResponse `json:"activities"` +} + +type FilterActivitiesRequest struct { + Offset int `json:"offset"` + Limit int `json:"limit"` +} + +type CreateActivityRequest struct { + UserID string `json:"user_id"` + Event string `json:"event"` +} + +//encore:api auth method=GET path=/v1/activities tag:admin +func (s *Service) GetActivities(ctx context.Context, p *FilterActivitiesRequest) (*ActivitiesResponse, error) { + eb := errs.B() + + offset := p.Offset + limit := p.Limit + + if offset < 0 { + eb = eb.Code(errs.InvalidArgument).Msg("offset must be greater than 0") + } + + if limit < 0 { + eb = eb.Code(errs.InvalidArgument).Msg("limit must be greater than 0") + } + + activities := make([]*Activity, 0) + err := s.db.Find(&Activity{}).Offset(offset).Limit(limit).Find(&activities).Error + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to get activities").Err() + } + + activitiesResponse := make([]*ActivityResponse, 0) + for _, activity := range activities { + activitiesResponse = append(activitiesResponse, &ActivityResponse{ + ID: activity.ID, + UserID: activity.UserID, + Event: activity.Event, + CreatedAt: activity.CreatedAt, + }) + } + + return &ActivitiesResponse{ + Activities: activitiesResponse, + }, nil +} + +func (s *Service) HandleSignupEvents(ctx context.Context, p *user.SignupEvent) error { + eb := errs.B() + rlog.Info("signup event", "user_id", p.UserID) + + activity := Activity{ + ID: uuid.NewString(), + UserID: p.UserID, + Event: "signup", + CreatedAt: time.Now(), + } + + if err := s.db.Create(&activity).Error; err != nil { + return eb.Cause(err).Code(errs.Internal).Msg("failed to create activity").Err() + } + + return nil +} diff --git a/encore-saas-template/backend/activity/middleware.go b/encore-saas-template/backend/activity/middleware.go new file mode 100644 index 00000000..5d548b42 --- /dev/null +++ b/encore-saas-template/backend/activity/middleware.go @@ -0,0 +1,24 @@ +package activity + +import ( + "errors" + + a "encore.app/backend/auth" + "encore.dev/beta/auth" + "encore.dev/beta/errs" + "encore.dev/middleware" +) + +// ValidateAdmin validates the roles of the user. +// +//encore:middleware target=tag:admin +func ValidateAdmin(req middleware.Request, next middleware.Next) middleware.Response { + userData := auth.Data().(*a.UserData) + + if userData.Role != "admin" { + err := errs.WrapCode(errors.New("permission denied"), errs.PermissionDenied, "user is not an admin") + return middleware.Response{Err: err} + } + + return next(req) +} diff --git a/encore-saas-template/backend/activity/migrations/0001_create_table_activities.up.sql b/encore-saas-template/backend/activity/migrations/0001_create_table_activities.up.sql new file mode 100644 index 00000000..e264390f --- /dev/null +++ b/encore-saas-template/backend/activity/migrations/0001_create_table_activities.up.sql @@ -0,0 +1,6 @@ +CREATE TABLE activities ( + id TEXT PRIMARY KEY, + user_id VARCHAR(255) NOT NULL, + event VARCHAR(255) NOT NULL, + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP +); diff --git a/encore-saas-template/backend/activity/service.go b/encore-saas-template/backend/activity/service.go new file mode 100644 index 00000000..c2777bc4 --- /dev/null +++ b/encore-saas-template/backend/activity/service.go @@ -0,0 +1,44 @@ +package activity + +import ( + "time" + + "encore.app/backend/user" + "encore.dev/pubsub" + "encore.dev/storage/sqldb" + "gorm.io/driver/postgres" + "gorm.io/gorm" +) + +type Activity struct { + ID string `gorm:"primaryKey;type:text" json:"id"` + UserID string `gorm:"not null;type:text" json:"user_id"` + Event string `gorm:"not null;type:text" json:"event"` + CreatedAt time.Time `gorm:"not null;type:timestamp" json:"created_at"` +} + +//encore:service +type Service struct { + db *gorm.DB +} + +var db = sqldb.NewDatabase("activities", sqldb.DatabaseConfig{ + Migrations: "./migrations", +}) + +func initService() (*Service, error) { + db, err := gorm.Open(postgres.New(postgres.Config{ + Conn: db.Stdlib(), + })) + if err != nil { + return nil, err + } + return &Service{db: db}, nil +} + +var _ = pubsub.NewSubscription( + user.Signups, "signups", + pubsub.SubscriptionConfig[*user.SignupEvent]{ + Handler: pubsub.MethodHandler((*Service).HandleSignupEvents), + }, +) diff --git a/encore-saas-template/backend/auth/auth.go b/encore-saas-template/backend/auth/auth.go new file mode 100644 index 00000000..4e9342b2 --- /dev/null +++ b/encore-saas-template/backend/auth/auth.go @@ -0,0 +1,87 @@ +package auth + +import ( + "context" + + "encore.dev/beta/auth" + firebase "firebase.google.com/go/v4" + fbauth "firebase.google.com/go/v4/auth" + "go4.org/syncutil" + "google.golang.org/api/option" +) + +// Data represents the user's data stored in Firebase Auth. +type UserData struct { + Email string + Name string + Picture string + Role string +} + +// ValidateToken validates an auth token against Firebase Auth. +// +//encore:authhandler +func ValidateToken(ctx context.Context, token string) (auth.UID, *UserData, error) { + if err := setupFB(); err != nil { + return "", nil, err + } + tok, err := fbAuth.VerifyIDToken(ctx, token) + if err != nil { + return "", nil, err + } + + email, _ := tok.Claims["email"].(string) + name, _ := tok.Claims["name"].(string) + picture, _ := tok.Claims["picture"].(string) + role, _ := tok.Claims["role"].(string) + uid := auth.UID(tok.UID) + + usr := &UserData{ + Email: email, + Name: name, + Picture: picture, + Role: role, + } + return uid, usr, nil +} + +var ( + fbAuth *fbauth.Client + setupOnce syncutil.Once +) + +// setupFB ensures Firebase Auth is setup. +func setupFB() error { + return setupOnce.Do(func() error { + opt := option.WithCredentialsJSON([]byte(secrets.FirebasePrivateKey)) + app, err := firebase.NewApp(context.Background(), nil, opt) + if err == nil { + fbAuth, err = app.Auth(context.Background()) + } + return err + }) +} + +// Update user in firebase +func UpdateUser(ctx context.Context, uid string, email *string, password *string) error { + if err := setupFB(); err != nil { + return err + } + + params := (&fbauth.UserToUpdate{}) + + if email != nil { + params.Email(*email) + } + if password != nil { + params.Password(*password) + } + + _, err := fbAuth.UpdateUser(ctx, uid, params) + return err +} + +var secrets struct { + // FirebasePrivateKey is the JSON credentials for calling Firebase. + FirebasePrivateKey string +} diff --git a/encore-saas-template/backend/product/middleware.go b/encore-saas-template/backend/product/middleware.go new file mode 100644 index 00000000..aadbf763 --- /dev/null +++ b/encore-saas-template/backend/product/middleware.go @@ -0,0 +1,57 @@ +package product + +import ( + "sync" + "time" + + "encore.dev/middleware" +) + +type cacheEntry struct { + value interface{} + expiration time.Time +} + +var ( + cache = &sync.Map{} + cacheTTL = 15 * time.Minute +) + +func loadFromCache(cacheKey string, responseType interface{}) (interface{}, error) { + value, ok := cache.Load(cacheKey) + if !ok { + return nil, nil + } + + entry := value.(cacheEntry) + if time.Now().After(entry.expiration) { + cache.Delete(cacheKey) + return nil, nil + } + + return entry.value, nil +} + +func saveToCache(cacheKey string, value interface{}) { + cache.Store(cacheKey, cacheEntry{ + value: value, + expiration: time.Now().Add(cacheTTL), + }) +} + +//encore:middleware target=tag:cache +func CachingMiddleware(req middleware.Request, next middleware.Next) middleware.Response { + data := req.Data() + + cacheKey := data.Path + if cached, err := loadFromCache(cacheKey, data.API.ResponseType); err == nil && cached != nil { + return middleware.Response{Payload: cached} + } + + resp := next(req) + if resp.Err == nil && resp.Payload != nil { + saveToCache(cacheKey, resp.Payload) + } + + return resp +} diff --git a/encore-saas-template/backend/product/product.go b/encore-saas-template/backend/product/product.go new file mode 100644 index 00000000..a3b5b67e --- /dev/null +++ b/encore-saas-template/backend/product/product.go @@ -0,0 +1,88 @@ +package product + +import ( + "context" + + "github.com/stripe/stripe-go/v81" + "github.com/stripe/stripe-go/v81/client" +) + +var secrets struct { + StripeSecretKey string +} + +type ProductsResponse struct { + Products []*Product `json:"products"` +} + +type Product struct { + ID string `json:"id"` + Name string `json:"name"` + Description string `json:"description"` + PriceId *string `json:"price_id"` + Price *Price `json:"price"` +} + +type Price struct { + ID string `json:"id"` + UnitAmount int64 `json:"unit_amount"` + Currency string `json:"currency"` + Interval string `json:"interval"` + TrialPeriodDays int64 `json:"trial_period_days"` +} + +//encore:api public method=GET path=/v1/products tag:cache +func GetProducts(ctx context.Context) (*ProductsResponse, error) { + sc := &client.API{} + sc.Init(secrets.StripeSecretKey, nil) + + iter := sc.Products.List(&stripe.ProductListParams{}) + products := make([]*Product, 0) + + iterp := sc.Prices.List(&stripe.PriceListParams{}) + prices := make(map[string]*stripe.Price) + for iterp.Next() { + p := iterp.Price() + prices[p.Product.ID] = p + } + + for iter.Next() { + p := iter.Product() + println(p.Name, p.Active) + if !p.Active { + continue + } + + var productPrice *Price + var priceId *string + if price, ok := prices[p.ID]; ok { + priceId = &p.ID + recurring := price.Recurring + interval := "" + trialPeriodDays := int64(0) + if recurring != nil { + interval = string(recurring.Interval) + trialPeriodDays = recurring.TrialPeriodDays + } + productPrice = &Price{ + ID: price.ID, + UnitAmount: price.UnitAmount, + Currency: string(price.Currency), + Interval: interval, + TrialPeriodDays: trialPeriodDays, + } + } + + products = append(products, &Product{ + ID: p.ID, + Name: p.Name, + Description: p.Description, + PriceId: priceId, + Price: productPrice, + }) + } + + return &ProductsResponse{ + Products: products, + }, nil +} diff --git a/encore-saas-template/backend/subscription/migrations/0001_create_stripe_subscriptions.up.sql b/encore-saas-template/backend/subscription/migrations/0001_create_stripe_subscriptions.up.sql new file mode 100644 index 00000000..99194393 --- /dev/null +++ b/encore-saas-template/backend/subscription/migrations/0001_create_stripe_subscriptions.up.sql @@ -0,0 +1,13 @@ +CREATE TABLE subscriptions ( + id TEXT PRIMARY KEY, + user_id TEXT NOT NULL, + stripe_customer_id TEXT NOT NULL, + stripe_subscription_id TEXT NOT NULL, + stripe_product_id TEXT NOT NULL, + plan_name TEXT, + subscription_status TEXT NOT NULL, + subscription_updated_at TIMESTAMP NOT NULL, + cancel_at_period_end BOOLEAN NOT NULL DEFAULT FALSE, + cancel_at TIMESTAMP, + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP +); diff --git a/encore-saas-template/backend/subscription/service.go b/encore-saas-template/backend/subscription/service.go new file mode 100644 index 00000000..2ed89745 --- /dev/null +++ b/encore-saas-template/backend/subscription/service.go @@ -0,0 +1,48 @@ +package subscription + +import ( + "time" + + "encore.dev/storage/sqldb" + "gorm.io/driver/postgres" + "gorm.io/gorm" +) + +var secrets struct { + StripeSecretKey string + StripeWebhookSecret string + CallbackURL string +} + +type Subscription struct { + ID string `gorm:"primaryKey;type:text" json:"id"` + UserId string `gorm:"not null;type:text" json:"user_id"` + StripeCustomerId *string `gorm:"not null;type:text" json:"stripe_customer_id"` + StripeSubscriptionId *string `gorm:"not null;type:text" json:"stripe_subscription_id"` + StripeProductId *string `gorm:"not null;type:text" json:"stripe_product_id"` + PlanName *string `gorm:"type:text" json:"plan_name"` + SubscriptionStatus *string `gorm:"not null;type:text" json:"subscription_status"` + SubscriptionUpdatedAt time.Time `gorm:"not null;type:timestamp" json:"subscription_updated_at"` + CancelAtPeriodEnd bool `gorm:"not null;type:boolean" json:"cancel_at_period_end"` + CancelAt *time.Time `gorm:"type:timestamp" json:"cancel_at"` + CreatedAt time.Time `gorm:"default:now()" json:"created_at"` +} + +//encore:service +type Service struct { + db *gorm.DB +} + +var db = sqldb.NewDatabase("subscriptions", sqldb.DatabaseConfig{ + Migrations: "./migrations", +}) + +func initService() (*Service, error) { + db, err := gorm.Open(postgres.New(postgres.Config{ + Conn: db.Stdlib(), + })) + if err != nil { + return nil, err + } + return &Service{db: db}, nil +} diff --git a/encore-saas-template/backend/subscription/subscription.go b/encore-saas-template/backend/subscription/subscription.go new file mode 100644 index 00000000..50117b6e --- /dev/null +++ b/encore-saas-template/backend/subscription/subscription.go @@ -0,0 +1,460 @@ +package subscription + +import ( + "context" + "encoding/json" + "errors" + "fmt" + "io" + "net/http" + "time" + + "encore.app/backend/user" + "encore.dev/beta/errs" + "encore.dev/rlog" + "github.com/stripe/stripe-go/v81" + "github.com/stripe/stripe-go/v81/billingportal/configuration" + portalsession "github.com/stripe/stripe-go/v81/billingportal/session" + "github.com/stripe/stripe-go/v81/checkout/session" + "github.com/stripe/stripe-go/v81/client" + "github.com/stripe/stripe-go/v81/customer" + "github.com/stripe/stripe-go/v81/webhook" + "gorm.io/gorm" +) + +type CreateCheckoutSessionResponse struct { + URL string `json:"url"` +} + +type CreateCheckoutSessionRequest struct { + PriceID string `json:"price_id"` +} + +type SessionResponse struct { + SessionID string `json:"session_id"` +} + +type FilterSubscriptionsRequest struct { + UserId string `json:"user_id"` +} + +type SubscriptionsResponse struct { + Subscriptions []*SubscriptionResponse `json:"subscriptions"` +} + +type SubscriptionResponse struct { + ID string `json:"id"` + UserId string `json:"user_id"` + StripeProductId string `json:"stripe_product_id"` + SubscriptionStatus string `json:"subscription_status"` + SubscriptionUpdatedAt time.Time `json:"subscription_updated_at"` + SubscriptionCreatedAt time.Time `json:"subscription_created_at"` + CancelAtPeriodEnd bool `json:"cancel_at_period_end"` + CancelAt *time.Time `json:"cancel_at"` +} + +//encore:api auth method=POST path=/v1/checkout-session +func (s *Service) CreateCheckoutSession(ctx context.Context, req *CreateCheckoutSessionRequest) (*CreateCheckoutSessionResponse, error) { + stripe.Key = secrets.StripeSecretKey + loggedInUser, err := user.GetUser(ctx) + if err != nil { + return nil, err + } + + var customerId *string + if loggedInUser.StripeCustomerId != nil { + customerId = loggedInUser.StripeCustomerId + } else { + // Create a new customer + customer, err := customer.New(&stripe.CustomerParams{ + Email: stripe.String(loggedInUser.Email), + }) + if err != nil { + return nil, errs.WrapCode(err, errs.Internal, "failed to create stripe customer") + } + customerId = &customer.ID + } + + // Update the user with the customer ID + user.UpdateUser(ctx, loggedInUser.ID, &user.UpdateUserRequest{ + StripeCustomerId: *customerId, + }) + params := &stripe.CheckoutSessionParams{ + Customer: customerId, + Mode: stripe.String(string(stripe.CheckoutSessionModeSubscription)), + LineItems: []*stripe.CheckoutSessionLineItemParams{ + { + Price: stripe.String(req.PriceID), // Your price ID from Stripe + Quantity: stripe.Int64(1), + }, + }, + SuccessURL: stripe.String(secrets.CallbackURL + "/dashboard?success=true&session_id={CHECKOUT_SESSION_ID}"), + CancelURL: stripe.String(secrets.CallbackURL + "/dashboard?canceled=true"), + // Attach the user ID as metadata + ClientReferenceID: stripe.String(loggedInUser.ID), + AllowPromotionCodes: stripe.Bool(true), + SubscriptionData: &stripe.CheckoutSessionSubscriptionDataParams{ + TrialPeriodDays: stripe.Int64(14), + }, + } + + rlog.Info("Creating checkout session", "params", params) + + session, err := session.New(params) + if err != nil { + return nil, errs.WrapCode(err, errs.Internal, "failed to create checkout session") + } + + return &CreateCheckoutSessionResponse{ + URL: session.URL, + }, nil +} + +type CreateCustomerPortalSessionResponse struct { + URL string `json:"url"` +} + +//encore:api auth method=POST path=/v1/customer-portal-session +func (s *Service) CreateCustomerPortalSession(ctx context.Context) (*CreateCustomerPortalSessionResponse, error) { + eb := errs.B() + stripe.Key = secrets.StripeSecretKey + sc := &client.API{} + sc.Init(secrets.StripeSecretKey, nil) + loggedInUser, err := user.GetUser(ctx) + if err != nil { + return nil, err + } + + customerId := loggedInUser.StripeCustomerId + if customerId == nil { + return nil, eb.Code(errs.NotFound).Msg("user has no stripe customer id").Err() + } + + // Fetch products + iter := sc.Products.List(&stripe.ProductListParams{ + Active: stripe.Bool(true), + }) + products := make([]*stripe.Product, 0) + for iter.Next() { + p := iter.Product() + products = append(products, p) + } + + // Check what product the user has + subIter := sc.Subscriptions.List(&stripe.SubscriptionListParams{ + Customer: customerId, + }) + subscriptions := make([]*stripe.Subscription, 0) + for subIter.Next() { + subscriptions = append(subscriptions, subIter.Subscription()) + } + rlog.Info("subscriptions", "subscriptions", subscriptions) + productIdUserHas := subscriptions[0].Items.Data[0].Price.Product.ID + rlog.Info("productIdUserHas", "productIdUserHas", productIdUserHas) + // fetch prices + pricesIter := sc.Prices.List(&stripe.PriceListParams{ + Active: stripe.Bool(true), + }) + prices := make([]*stripe.Price, 0) + for pricesIter.Next() { + p := pricesIter.Price() + prices = append(prices, p) + } + rlog.Info("prices", "prices", prices) + + var productsUserDoesNotHave []*stripe.Product + for _, p := range products { + if p.ID != productIdUserHas { + productsUserDoesNotHave = append(productsUserDoesNotHave, p) + } + } + + rlog.Info("productsUserDoesNotHave", "productsUserDoesNotHave", productsUserDoesNotHave) + + // Create stripe.BillingPortalConfigurationFeaturesSubscriptionUpdateProductParams from productsUserDoesNotHave + productsUserDoesNotHaveParams := make([]*stripe.BillingPortalConfigurationFeaturesSubscriptionUpdateProductParams, 0) + for _, p := range productsUserDoesNotHave { + priceIds := make([]*string, 0) + for _, price := range prices { + if price.Product.ID == p.ID { + priceIds = append(priceIds, &price.ID) + } + } + if len(priceIds) > 0 { + productsUserDoesNotHaveParams = append(productsUserDoesNotHaveParams, &stripe.BillingPortalConfigurationFeaturesSubscriptionUpdateProductParams{ + Product: stripe.String(p.ID), + Prices: priceIds, + }) + } + } + + rlog.Info("productsUserDoesNotHaveParams", "productsUserDoesNotHaveParams", productsUserDoesNotHaveParams) + + // create configuration + configurationParams := &stripe.BillingPortalConfigurationParams{ + Features: &stripe.BillingPortalConfigurationFeaturesParams{ + InvoiceHistory: &stripe.BillingPortalConfigurationFeaturesInvoiceHistoryParams{ + Enabled: stripe.Bool(true), + }, + SubscriptionCancel: &stripe.BillingPortalConfigurationFeaturesSubscriptionCancelParams{ + Enabled: stripe.Bool(true), + Mode: stripe.String("at_period_end"), + }, + PaymentMethodUpdate: &stripe.BillingPortalConfigurationFeaturesPaymentMethodUpdateParams{ + Enabled: stripe.Bool(true), + }, + SubscriptionUpdate: &stripe.BillingPortalConfigurationFeaturesSubscriptionUpdateParams{ + Enabled: stripe.Bool(true), + Products: productsUserDoesNotHaveParams, + DefaultAllowedUpdates: []*string{ + stripe.String("price"), + stripe.String("quantity"), + stripe.String("promotion_code"), + }, + }, + }, + } + result, err := configuration.New(configurationParams) + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to create billing portal configuration").Err() + } + + rlog.Info("Billing portal configuration created", "configuration", result) + + params := &stripe.BillingPortalSessionParams{ + Customer: stripe.String(*customerId), + ReturnURL: stripe.String(secrets.CallbackURL + "/dashboard"), + Configuration: stripe.String(result.ID), + } + + session, err := portalsession.New(params) + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to create billing portal session").Err() + } + + return &CreateCustomerPortalSessionResponse{ + URL: session.URL, + }, nil +} + +//encore:api auth method=GET path=/v1/session/:sessionID +func (s *Service) GetSession(ctx context.Context, sessionID string) (*SessionResponse, error) { + stripe.Key = secrets.StripeSecretKey + loggedInUser, err := user.GetUser(ctx) + if err != nil { + return nil, err + } + + params := &stripe.CheckoutSessionParams{ + Expand: []*string{stripe.String("customer")}, + } + + session, err := session.Get(sessionID, params) + if err != nil { + return nil, errs.WrapCode(err, errs.Internal, "failed to get checkout session") + } + + rlog.Info("Updating user with customer ID", "customerID", session.Customer.ID) + + // Update the user with the session details + user.UpdateUser(ctx, loggedInUser.ID, &user.UpdateUserRequest{ + StripeCustomerId: session.Customer.ID, + }) + + rlog.Info("User updated with customer ID", "customerID", session.Customer.ID) + + return &SessionResponse{ + SessionID: session.ID, + }, nil +} + +//encore:api auth method=GET path=/v1/subscriptions +func (s *Service) GetSubscriptions(ctx context.Context, p *FilterSubscriptionsRequest) (*SubscriptionsResponse, error) { + eb := errs.B() + + var subscriptions []Subscription + err := s.db.Where("user_id = ?", p.UserId).Find(&subscriptions).Error + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to get subscriptions").Err() + } + + subscriptionsResponse := make([]*SubscriptionResponse, 0) + for _, subscription := range subscriptions { + var cancelAt *time.Time + if subscription.CancelAt != nil { + cancelAt = subscription.CancelAt + } + subscriptionsResponse = append(subscriptionsResponse, &SubscriptionResponse{ + ID: subscription.ID, + UserId: subscription.UserId, + StripeProductId: *subscription.StripeProductId, + SubscriptionStatus: *subscription.SubscriptionStatus, + SubscriptionUpdatedAt: subscription.SubscriptionUpdatedAt, + SubscriptionCreatedAt: subscription.CreatedAt, + CancelAtPeriodEnd: subscription.CancelAtPeriodEnd, + CancelAt: cancelAt, + }) + } + + return &SubscriptionsResponse{ + Subscriptions: subscriptionsResponse, + }, nil +} + +func nilIfEmpty[T comparable](value T) *T { + var zeroValue T + if value == zeroValue { + return nil + } + return &value +} + +//encore:api public raw path=/v1/stripe/webhook +func (s *Service) StripeWebhook(w http.ResponseWriter, req *http.Request) { + ctx := req.Context() + stripe.Key = secrets.StripeSecretKey + + // Read the request body + body, err := io.ReadAll(req.Body) + if err != nil { + rlog.Error("Failed to read webhook request body", "error", err) + http.Error(w, "Failed to read request body", http.StatusBadRequest) + return + } + rlog.Info("StripeWebhook secret", "secret", secrets.StripeWebhookSecret) + // Verify the webhook signature + sigHeader := req.Header.Get("Stripe-Signature") + event, err := webhook.ConstructEvent(body, sigHeader, secrets.StripeWebhookSecret) + if err != nil { + rlog.Error("Error verifying webhook signature", "error", err, "header", sigHeader) + http.Error(w, fmt.Sprintf("Error verifying webhook signature: %v", err), http.StatusBadRequest) + return + } + + rlog.Info("Received Stripe webhook event", + "eventType", event.Type, + "eventID", event.ID, + "apiVersion", event.APIVersion) + + var handlerErr error + switch event.Type { + case "customer.subscription.deleted", "customer.subscription.updated", "customer.subscription.created": + var subscription stripe.Subscription + if err := json.Unmarshal(event.Data.Raw, &subscription); err != nil { + rlog.Error("Error parsing subscription JSON", "error", err, "raw", string(event.Data.Raw)) + http.Error(w, "Error parsing webhook JSON", http.StatusBadRequest) + return + } + + handlerErr = s.handleSubscriptionEvent(ctx, subscription) + + default: + rlog.Info("Unhandled event type", "type", event.Type) + w.WriteHeader(http.StatusOK) + return + } + + if handlerErr != nil { + var errCode errs.ErrCode + if errors.As(handlerErr, &errCode) { + rlog.Error("Error handling webhook event", + "eventType", event.Type, + "error", handlerErr, + "code", errs.Code(handlerErr)) + } else { + rlog.Error("Error handling webhook event", + "eventType", event.Type, + "error", handlerErr) + } + + // Return a 500 error to trigger Stripe's retry mechanism + http.Error(w, fmt.Sprintf("Error handling %s event: %v", event.Type, handlerErr), http.StatusInternalServerError) + return + } + + w.WriteHeader(http.StatusOK) + w.Write([]byte(`{"received": true}`)) + +} + +func (s *Service) handleCheckoutSessionEvent(ctx context.Context, session stripe.CheckoutSession) error { + eb := errs.B() + userId := session.ClientReferenceID + + rlog.Info("Received event checkout session completed", "userId", userId) + + user.UpdateUser(ctx, userId, &user.UpdateUserRequest{ + StripeCustomerId: session.Customer.ID, + }) + + var stripeSubscription *Subscription + err := s.db.Where("user_id = ?", userId).First(&stripeSubscription).Error + if errors.Is(err, gorm.ErrRecordNotFound) { + return nil + } else if err != nil { + return eb.Cause(err).Code(errs.Internal).Msg("failed to find stripe subscription").Err() + } + + return nil +} + +func (s *Service) handleSubscriptionEvent(ctx context.Context, subscription stripe.Subscription) error { + eb := errs.B().Meta("subscription_id", subscription.ID).Meta("customer_id", subscription.Customer.ID) + + // Check if there is a user with the same stripe customer ID + usersByFilter, err := user.GetUsersByFilter(ctx, &user.GetUsersByFilterRequest{ + StripeCustomerId: subscription.Customer.ID, + }) + + if err != nil || len(usersByFilter.Users) == 0 { + return eb.Code(errs.NotFound).Msg("no user found for stripe customer id").Err() + } + + // We expect only one user per stripe customer ID + firstUser := usersByFilter.Users[0] + + rlog.Info("Subscription event related to user", "user", firstUser) + + status := string(subscription.Status) + rlog.Info("Processing subscription event", + "status", status, + "subscription_id", subscription.ID, + "customer_id", subscription.Customer.ID) + + var existingSubscription *Subscription + err = s.db.Where("stripe_subscription_id = ?", subscription.ID).First(&existingSubscription).Error + if err != nil { + if errors.Is(err, gorm.ErrRecordNotFound) { + stripeSubscription := Subscription{ + UserId: firstUser.ID, + ID: subscription.ID, + StripeCustomerId: &subscription.Customer.ID, + StripeSubscriptionId: &subscription.ID, + StripeProductId: nilIfEmpty(subscription.Items.Data[0].Price.Product.ID), + SubscriptionStatus: &status, + SubscriptionUpdatedAt: time.Now(), + CancelAtPeriodEnd: subscription.CancelAtPeriodEnd, + } + + if err := s.db.Create(&stripeSubscription).Error; err != nil { + return eb.Cause(err).Code(errs.Internal).Msg("failed to insert stripe subscription").Err() + } + } else { + return eb.Cause(err).Code(errs.Internal).Msg("failed to find stripe subscription").Err() + } + } else { + existingSubscription.StripeProductId = nilIfEmpty(subscription.Items.Data[0].Price.Product.ID) + existingSubscription.StripeSubscriptionId = &subscription.ID + existingSubscription.StripeCustomerId = &subscription.Customer.ID + existingSubscription.SubscriptionStatus = &status + existingSubscription.SubscriptionUpdatedAt = time.Now() + existingSubscription.CancelAtPeriodEnd = subscription.CancelAtPeriodEnd + cancelAt := time.Unix(subscription.CancelAt, 0) + existingSubscription.CancelAt = &cancelAt + if err := s.db.Save(existingSubscription).Error; err != nil { + return eb.Cause(err).Code(errs.Internal).Msg("failed to update stripe subscription").Err() + } + } + + return nil +} diff --git a/encore-saas-template/backend/user/middleware.go b/encore-saas-template/backend/user/middleware.go new file mode 100644 index 00000000..5d7ccfb2 --- /dev/null +++ b/encore-saas-template/backend/user/middleware.go @@ -0,0 +1,24 @@ +package user + +import ( + "errors" + + a "encore.app/backend/auth" + "encore.dev/beta/auth" + "encore.dev/beta/errs" + "encore.dev/middleware" +) + +// ValidateAdmin validates the roles of the user. +// +//encore:middleware target=tag:admin +func ValidateAdmin(req middleware.Request, next middleware.Next) middleware.Response { + userData := auth.Data().(*a.UserData) + + if userData.Role != "admin" { + err := errs.WrapCode(errors.New("permission denied"), errs.PermissionDenied, "user is not an admin") + return middleware.Response{Err: err} + } + + return next(req) +} diff --git a/encore-saas-template/backend/user/migrations/0001_create_users_table.up.sql b/encore-saas-template/backend/user/migrations/0001_create_users_table.up.sql new file mode 100644 index 00000000..8d73a8d2 --- /dev/null +++ b/encore-saas-template/backend/user/migrations/0001_create_users_table.up.sql @@ -0,0 +1,9 @@ +CREATE TABLE users ( + id TEXT PRIMARY KEY, + email TEXT UNIQUE, + display_name TEXT, + profile_picture_url TEXT, + external_id TEXT, + stripe_customer_id TEXT, + created_at TIMESTAMP DEFAULT NOW() +); \ No newline at end of file diff --git a/encore-saas-template/backend/user/service.go b/encore-saas-template/backend/user/service.go new file mode 100644 index 00000000..2e10d0e8 --- /dev/null +++ b/encore-saas-template/backend/user/service.go @@ -0,0 +1,64 @@ +package user + +import ( + "time" + + "encore.dev/pubsub" + "encore.dev/storage/sqldb" + "gorm.io/driver/postgres" + "gorm.io/gorm" +) + +var secrets struct { + StripeSecretKey string +} + +//encore:service +type Service struct { + db *gorm.DB +} + +type User struct { + ID string `gorm:"primaryKey;type:text" json:"id"` + Email string `gorm:"not null;type:text" json:"email"` + DisplayName string `gorm:"not null;type:text" json:"display_name"` + ProfilePictureURL string `gorm:"not null;type:text" json:"profile_picture_url"` + ExternalID string `gorm:"not null;type:text" json:"external_id"` + StripeCustomerId *string `gorm:"type:text" json:"stripe_customer_id"` + CreatedAt time.Time `gorm:"default:now()" json:"created_at"` + + Subscription *Subscription `gorm:"foreignKey:UserID;references:ID" json:"subscription,omitempty"` +} + +type Subscription struct { + ID string `gorm:"primaryKey;type:text" json:"id"` + UserID string `gorm:"not null;type:text;uniqueIndex" json:"user_id"` + StripeSubscriptionID *string `gorm:"type:text" json:"stripe_subscription_id"` + StripeProductID *string `gorm:"type:text" json:"stripe_product_id"` + PlanName *string `gorm:"type:text" json:"plan_name"` + SubscriptionStatus *string `gorm:"type:text" json:"subscription_status"` + SubscriptionUpdatedAt time.Time `gorm:"type:timestamp" json:"subscription_updated_at"` + IsActive bool `gorm:"not null;default:true" json:"is_active"` + CanceledAt *time.Time `gorm:"type:timestamp" json:"canceled_at"` + CreatedAt time.Time `gorm:"default:now()" json:"created_at"` +} + +var db = sqldb.NewDatabase("users", sqldb.DatabaseConfig{ + Migrations: "./migrations", +}) + +func initService() (*Service, error) { + db, err := gorm.Open(postgres.New(postgres.Config{ + Conn: db.Stdlib(), + })) + if err != nil { + return nil, err + } + return &Service{db: db}, nil +} + +type SignupEvent struct{ UserID string } + +var Signups = pubsub.NewTopic[*SignupEvent]("signups", pubsub.TopicConfig{ + DeliveryGuarantee: pubsub.AtLeastOnce, +}) diff --git a/encore-saas-template/backend/user/user.go b/encore-saas-template/backend/user/user.go new file mode 100644 index 00000000..85d5d7bb --- /dev/null +++ b/encore-saas-template/backend/user/user.go @@ -0,0 +1,295 @@ +package user + +import ( + "context" + "errors" + "time" + + a "encore.app/backend/auth" + "encore.dev/beta/auth" + "encore.dev/beta/errs" + "encore.dev/rlog" + "github.com/google/uuid" + "github.com/stripe/stripe-go/v81" + "github.com/stripe/stripe-go/v81/customer" + "gorm.io/gorm" +) + +type UserResponse struct { + ID string `json:"id"` + Email string `json:"email"` + DisplayName string `json:"display_name"` + ProfilePictureURL string `json:"profile_picture_url"` + CreatedAt time.Time `json:"created_at"` + StripeCustomerId *string `json:"stripe_customer_id"` +} + +type UpdateUserRequest struct { + DisplayName string `json:"display_name"` + ProfilePictureURL string `json:"profile_picture_url"` + StripeCustomerId string `json:"stripe_customer_id"` + Email string `json:"email"` + Password string `json:"password"` +} + +type UsersResponse struct { + Users []*UserResponse `json:"users"` +} + +//encore:api auth method=POST path=/v1/users +func (s *Service) AddUser(ctx context.Context) (*UserResponse, error) { + eb := errs.B() + + uid, _ := auth.UserID() + + // Get the user data from the auth token + userData := auth.Data().(*a.UserData) + + user := User{ + ID: uuid.NewString(), + ExternalID: string(uid), + Email: userData.Email, + DisplayName: userData.Name, + ProfilePictureURL: userData.Picture, + } + + if err := s.db.Create(&user).Error; err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to insert user").Err() + } + + rlog.Info("user created with email", "email", user.Email) + + response := &UserResponse{ + ID: user.ID, + Email: user.Email, + DisplayName: user.DisplayName, + ProfilePictureURL: user.ProfilePictureURL, + CreatedAt: user.CreatedAt, + StripeCustomerId: user.StripeCustomerId, + } + + Signups.Publish(ctx, &SignupEvent{UserID: user.ID}) + + return response, nil +} + +//encore:api auth method=GET path=/v1/me +func (s *Service) GetUser(ctx context.Context) (*UserResponse, error) { + eb := errs.B() + + user, err := s.GetDbUserByToken(ctx) + if err != nil { + return nil, eb.Cause(err).Code(errs.NotFound).Msg("user not found").Err() + } + + return &UserResponse{ + ID: user.ID, + Email: user.Email, + DisplayName: user.DisplayName, + ProfilePictureURL: user.ProfilePictureURL, + CreatedAt: user.CreatedAt, + StripeCustomerId: user.StripeCustomerId, + }, nil +} + +//encore:api auth method=GET path=/v1/users/:id +func (s *Service) GetUserById(ctx context.Context, id string) (*UserResponse, error) { + user, err := s.GetDbUserById(ctx, id) + if err != nil { + return nil, err + } + + return &UserResponse{ + ID: user.ID, + Email: user.Email, + DisplayName: user.DisplayName, + ProfilePictureURL: user.ProfilePictureURL, + CreatedAt: user.CreatedAt, + StripeCustomerId: user.StripeCustomerId, + }, nil +} + +type GetUsersByFilterRequest struct { + StripeCustomerId string `json:"stripe_customer_id"` +} + +//encore:api auth method=GET path=/v1/users +func (s *Service) GetUsersByFilter(ctx context.Context, p *GetUsersByFilterRequest) (*UsersResponse, error) { + users, err := s.GetDbUserByFilter(ctx, p) + if err != nil { + return nil, err + } + + response := &UsersResponse{ + Users: make([]*UserResponse, len(users)), + } + + for i, user := range users { + response.Users[i] = &UserResponse{ + ID: user.ID, + Email: user.Email, + DisplayName: user.DisplayName, + ProfilePictureURL: user.ProfilePictureURL, + StripeCustomerId: user.StripeCustomerId, + } + } + + return response, nil +} + +type CreateSubscriptionRequest struct { + SubscriptionStatus *string `json:"subscription_status"` +} + +//encore:api auth method=PATCH path=/v1/users/:userID +func (s *Service) UpdateUser(ctx context.Context, userID string, p *UpdateUserRequest) (*UserResponse, error) { + eb := errs.B().Meta("user_id", userID) + + tx := s.db.Begin() + if tx.Error != nil { + return nil, eb.Cause(tx.Error).Code(errs.Internal).Msg("failed to begin transaction").Err() + } + + defer func() { + if r := recover(); r != nil { + tx.Rollback() + } + }() + + // Find the user + var user User + if err := tx.First(&user, "id = ?", userID).Error; err != nil { + tx.Rollback() + if errors.Is(err, gorm.ErrRecordNotFound) { + return nil, eb.Code(errs.NotFound).Msg("user not found").Err() + } + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to find user").Err() + } + + // Update user fields if provided + if p.DisplayName != "" { + user.DisplayName = p.DisplayName + } + if p.ProfilePictureURL != "" { + user.ProfilePictureURL = p.ProfilePictureURL + } + if p.StripeCustomerId != "" { + user.StripeCustomerId = &p.StripeCustomerId + + if p.Email != "" { + // Update the email in stripe + stripe.Key = secrets.StripeSecretKey + params := &stripe.CustomerParams{ + Email: stripe.String(user.Email), + } + _, err := customer.Update(*user.StripeCustomerId, params) + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to update stripe customer").Err() + } + } + } + + if p.Email != "" { + user.Email = p.Email + + err := a.UpdateUser(ctx, user.ExternalID, &p.Email, nil) + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to update firebase user").Err() + } + } + + if p.Password != "" { + err := a.UpdateUser(ctx, user.ExternalID, nil, &p.Password) + if err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to update firebase user").Err() + } + } + + if err := tx.Save(&user).Error; err != nil { + tx.Rollback() + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to update user").Err() + } + + if err := tx.Commit().Error; err != nil { + return nil, eb.Cause(err).Code(errs.Internal).Msg("failed to commit transaction").Err() + } + + return s.GetUser(ctx) +} + +//encore:api auth method=GET path=/v1/all-users tag:admin +func (s *Service) GetAllUsers(ctx context.Context) (*UsersResponse, error) { + users, err := s.GetAllDbUsers(ctx) + if err != nil { + return nil, err + } + + response := &UsersResponse{ + Users: make([]*UserResponse, len(users)), + } + for i, user := range users { + response.Users[i] = &UserResponse{ + ID: user.ID, + Email: user.Email, + DisplayName: user.DisplayName, + ProfilePictureURL: user.ProfilePictureURL, + CreatedAt: user.CreatedAt, + } + } + + return response, nil +} + +func (s *Service) GetAllDbUsers(ctx context.Context) ([]*User, error) { + var users []*User + if err := s.db.WithContext(ctx).Find(&users).Error; err != nil { + return nil, err + } + return users, nil +} + +func (s *Service) GetDbUserById(ctx context.Context, id string) (*User, error) { + var user User + if err := s.db.WithContext(ctx). + Where("id = ?", id). + First(&user).Error; err != nil { + return nil, err + } + + return &user, nil +} + +func (s *Service) GetDbUserByToken(ctx context.Context) (*User, error) { + uid, _ := auth.UserID() + + var user User + if err := s.db.WithContext(ctx). + Where("external_id = ?", string(uid)). + First(&user).Error; err != nil { + return nil, err + } + + return &user, nil +} + +func (s *Service) GetDbUserByFilter(ctx context.Context, p *GetUsersByFilterRequest) ([]*User, error) { + var users []*User + if err := s.db.WithContext(ctx). + Where("stripe_customer_id = ?", p.StripeCustomerId). + Find(&users).Error; err != nil { + return nil, err + } + + return users, nil +} + +func (s *Service) GetDbUserByEmail(ctx context.Context, email string) (*User, error) { + var user User + if err := s.db.WithContext(ctx). + Where("email = ?", email). + First(&user).Error; err != nil { + return nil, err + } + + return &user, nil +} diff --git a/encore-saas-template/encore.app b/encore-saas-template/encore.app new file mode 100644 index 00000000..c2130083 --- /dev/null +++ b/encore-saas-template/encore.app @@ -0,0 +1,4 @@ +{ + // This is just an example so it's not linked to the Encore platform. + "id": "", +} \ No newline at end of file diff --git a/encore-saas-template/frontend/.eslintrc.json b/encore-saas-template/frontend/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/encore-saas-template/frontend/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/encore-saas-template/frontend/.gitignore b/encore-saas-template/frontend/.gitignore new file mode 100644 index 00000000..8f322f0d --- /dev/null +++ b/encore-saas-template/frontend/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/encore-saas-template/frontend/app/dashboard/layout.tsx b/encore-saas-template/frontend/app/dashboard/layout.tsx new file mode 100644 index 00000000..f0515c61 --- /dev/null +++ b/encore-saas-template/frontend/app/dashboard/layout.tsx @@ -0,0 +1,20 @@ +"use client" + +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider" +import { redirect } from "next/navigation" + +export default function DashboardLayout({ children }: { children: React.ReactNode }) { + const { user } = useFirebase() + + if (!user) { + redirect("/") + } + + return ( +
+
+ {children} +
+
+ ) +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/dashboard/page.tsx b/encore-saas-template/frontend/app/dashboard/page.tsx new file mode 100644 index 00000000..fd3a299f --- /dev/null +++ b/encore-saas-template/frontend/app/dashboard/page.tsx @@ -0,0 +1,39 @@ +"use client" + +import ActivityListAdminWrapper from "@/components/activity/ActivityList" +import { SubscriptionStatusCard } from "@/components/dashboard/SubscriptionStatusCard" +import { UserProfileCard } from "@/components/user/UserProfileCard" +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider" +import { redirect } from "next/navigation" +import { useUser } from "@/app/lib/hooks" + +export default function DashboardPage() { + const { user, token, isAdmin } = useFirebase() + const { userData } = useUser(token) + + if (!user) { + redirect("/login") + } + return ( +
+ {/* Welcome Section */} +
+

+ Welcome back, {userData?.display_name} {isAdmin ? "(Admin)" : ""} +

+

+ Here's what's happening with your account +

+
+ + {/* Subscription Status Card */} + + + {/* User Profile Card */} + + + {/* Activity List */} + +
+ ) +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/favicon.ico b/encore-saas-template/frontend/app/favicon.ico new file mode 100644 index 00000000..d8b5c696 Binary files /dev/null and b/encore-saas-template/frontend/app/favicon.ico differ diff --git a/encore-saas-template/frontend/app/globals.css b/encore-saas-template/frontend/app/globals.css new file mode 100644 index 00000000..2e8e0d3e --- /dev/null +++ b/encore-saas-template/frontend/app/globals.css @@ -0,0 +1,117 @@ +@import "tailwindcss"; + +@plugin "tailwindcss-animate"; + +@custom-variant dark (&:is(.dark *)); +@custom-variant light (&:is(.light *)); + +@import url('https://fonts.googleapis.com/css2?family=Suisse+Intl+Mono&display=swap'); + +body { + font-family: 'Suisse Intl Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; + --radius: 0rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/encore-saas-template/frontend/app/layout.tsx b/encore-saas-template/frontend/app/layout.tsx new file mode 100644 index 00000000..eb887edb --- /dev/null +++ b/encore-saas-template/frontend/app/layout.tsx @@ -0,0 +1,37 @@ +import type { Metadata } from "next" +import { Inter } from "next/font/google" +import "./globals.css" +import { FirebaseProvider } from "@/app/lib/firebase/FirebaseProvider" +import { Toaster } from "@/components/ui/sonner" +import { Navigation } from "@/components/navigation" +import TanstackQueryProvider from "./lib/TanstackQueryProvider" +const inter = Inter({ subsets: ["latin"] }) + +export const metadata: Metadata = { + title: "EncoreKit", + description: "Your SaaS starter kit built with Encore", +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + +
+ +
+ {children} +
+
+ + + + + + ) +} diff --git a/encore-saas-template/frontend/app/lib/TanstackQueryProvider.tsx b/encore-saas-template/frontend/app/lib/TanstackQueryProvider.tsx new file mode 100644 index 00000000..3e9ac384 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/TanstackQueryProvider.tsx @@ -0,0 +1,10 @@ +'use client' +import { useState } from 'react'; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + + +export default function TanstackQueryProvider({ children }: { children: React.ReactNode }) { + const [client] = useState(new QueryClient()) + + return {children} +} diff --git a/encore-saas-template/frontend/app/lib/api.ts b/encore-saas-template/frontend/app/lib/api.ts new file mode 100644 index 00000000..cff7c551 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/api.ts @@ -0,0 +1,43 @@ +import { useRouter } from "next/navigation"; +import getRequestClient from "./getRequestClient"; +import { toast } from "sonner"; + +export const handleSubscription = async ( + token: string | undefined, + priceID: string, + router: ReturnType +) => { + try { + if (!token) { + router.push('/signup'); + return; + } + + const client = getRequestClient(token); + const response = await client.subscription.CreateCheckoutSession({ price_id: priceID }); + + if (response.url) { + window.location.href = response.url; + } + } catch (error) { + toast.error('Failed to create checkout session'); + } +}; + +export async function createCustomerPortalSession(token: string | undefined, router: ReturnType) { + try { + if (!token) { + router.push('/signup'); + return; + } + + const client = getRequestClient(token); + const response = await client.subscription.CreateCustomerPortalSession(); + + if (response.url) { + window.location.href = response.url; + } + } catch (error) { + toast.error('Failed to create checkout session'); + } +} diff --git a/encore-saas-template/frontend/app/lib/client.ts b/encore-saas-template/frontend/app/lib/client.ts new file mode 100644 index 00000000..57631539 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/client.ts @@ -0,0 +1,1002 @@ +// Code generated by the Encore v1.46.5 client generator. DO NOT EDIT. + +// Disable eslint, jshint, and jslint for this file. +/* eslint-disable */ +/* jshint ignore:start */ +/*jslint-disable*/ + +/** + * BaseURL is the base URL for calling the Encore application's API. + */ +export type BaseURL = string + +export const Local: BaseURL = "http://localhost:4000" + +/** + * Environment returns a BaseURL for calling the cloud environment with the given name. + */ +export function Environment(name: string): BaseURL { + return `https://${name}-{{ENCORE_APP_ID}}.encr.app` +} + +/** + * PreviewEnv returns a BaseURL for calling the preview environment with the given PR number. + */ +export function PreviewEnv(pr: number | string): BaseURL { + return Environment(`pr${pr}`) +} + +/** + * Client is an API client for the {{ENCORE_APP_ID}} Encore application. + */ +export default class Client { + public readonly activity: activity.ServiceClient + public readonly product: product.ServiceClient + public readonly subscription: subscription.ServiceClient + public readonly user: user.ServiceClient + + + /** + * @deprecated This constructor is deprecated, and you should move to using BaseURL with an Options object + */ + constructor(target: string, token?: string) + + /** + * Creates a Client for calling the public and authenticated APIs of your Encore application. + * + * @param target The target which the client should be configured to use. See Local and Environment for options. + * @param options Options for the client + */ + constructor(target: BaseURL, options?: ClientOptions) + constructor(target: string | BaseURL = "prod", options?: string | ClientOptions) { + + // Convert the old constructor parameters to a BaseURL object and a ClientOptions object + if (!target.startsWith("http://") && !target.startsWith("https://")) { + target = Environment(target) + } + + if (typeof options === "string") { + options = { auth: options } + } + + const base = new BaseClient(target, options ?? {}) + this.activity = new activity.ServiceClient(base) + this.product = new product.ServiceClient(base) + this.subscription = new subscription.ServiceClient(base) + this.user = new user.ServiceClient(base) + } +} + +/** + * ClientOptions allows you to override any default behaviour within the generated Encore client. + */ +export interface ClientOptions { + /** + * By default the client will use the inbuilt fetch function for making the API requests. + * however you can override it with your own implementation here if you want to run custom + * code on each API request made or response received. + */ + fetcher?: Fetcher + + /** Default RequestInit to be used for the client */ + requestInit?: Omit & { headers?: Record } + + /** + * Allows you to set the auth token to be used for each request + * either by passing in a static token string or by passing in a function + * which returns the auth token. + * + * These tokens will be sent as bearer tokens in the Authorization header. + */ + auth?: string | AuthDataGenerator +} + +export namespace activity { + export interface ActivitiesResponse { + activities: ActivityResponse[] + } + + export interface ActivityResponse { + id: string + "user_id": string + event: string + "created_at": string + } + + export interface FilterActivitiesRequest { + offset: number + limit: number + } + + export class ServiceClient { + private baseClient: BaseClient + + constructor(baseClient: BaseClient) { + this.baseClient = baseClient + } + + public async GetActivities(params: FilterActivitiesRequest): Promise { + // Convert our params into the objects we need for the request + const query = makeRecord({ + limit: String(params.limit), + offset: String(params.offset), + }) + + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/activities`, undefined, {query}) + return await resp.json() as ActivitiesResponse + } + } +} + +export namespace product { + export interface Price { + id: string + "unit_amount": number + currency: string + interval: string + "trial_period_days": number + } + + export interface Product { + id: string + name: string + description: string + "price_id": string + price: Price + } + + export interface ProductsResponse { + products: Product[] + } + + export class ServiceClient { + private baseClient: BaseClient + + constructor(baseClient: BaseClient) { + this.baseClient = baseClient + } + + public async GetProducts(): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/products`) + return await resp.json() as ProductsResponse + } + } +} + +export namespace subscription { + export interface CreateCheckoutSessionRequest { + "price_id": string + } + + export interface CreateCheckoutSessionResponse { + url: string + } + + export interface CreateCustomerPortalSessionResponse { + url: string + } + + export interface FilterSubscriptionsRequest { + "user_id": string + } + + export interface SessionResponse { + "session_id": string + } + + export interface SubscriptionResponse { + id: string + "user_id": string + "stripe_product_id": string + "subscription_status": string + "subscription_updated_at": string + "subscription_created_at": string + "cancel_at_period_end": boolean + "cancel_at": string + } + + export interface SubscriptionsResponse { + subscriptions: SubscriptionResponse[] + } + + export class ServiceClient { + private baseClient: BaseClient + + constructor(baseClient: BaseClient) { + this.baseClient = baseClient + } + + public async CreateCheckoutSession(params: CreateCheckoutSessionRequest): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("POST", `/v1/checkout-session`, JSON.stringify(params)) + return await resp.json() as CreateCheckoutSessionResponse + } + + public async CreateCustomerPortalSession(): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("POST", `/v1/customer-portal-session`) + return await resp.json() as CreateCustomerPortalSessionResponse + } + + public async GetSession(sessionID: string): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/session/${encodeURIComponent(sessionID)}`) + return await resp.json() as SessionResponse + } + + public async GetSubscriptions(params: FilterSubscriptionsRequest): Promise { + // Convert our params into the objects we need for the request + const query = makeRecord({ + "user_id": params["user_id"], + }) + + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/subscriptions`, undefined, {query}) + return await resp.json() as SubscriptionsResponse + } + + public async StripeWebhook(method: string, body?: BodyInit, options?: CallParameters): Promise { + return this.baseClient.callAPI(method, `/v1/stripe/webhook`, body, options) + } + } +} + +export namespace user { + export interface GetUsersByFilterRequest { + "stripe_customer_id": string + } + + export interface UpdateUserRequest { + "display_name": string + "profile_picture_url": string + "stripe_customer_id": string + email: string + password: string + } + + export interface UserResponse { + id: string + email: string + "display_name": string + "profile_picture_url": string + "created_at": string + "stripe_customer_id": string + } + + export interface UsersResponse { + users: UserResponse[] + } + + export class ServiceClient { + private baseClient: BaseClient + + constructor(baseClient: BaseClient) { + this.baseClient = baseClient + } + + public async AddUser(): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("POST", `/v1/users`) + return await resp.json() as UserResponse + } + + public async GetAllUsers(): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/all-users`) + return await resp.json() as UsersResponse + } + + public async GetUser(): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/me`) + return await resp.json() as UserResponse + } + + public async GetUserById(id: string): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/users/${encodeURIComponent(id)}`) + return await resp.json() as UserResponse + } + + public async GetUsersByFilter(params: GetUsersByFilterRequest): Promise { + // Convert our params into the objects we need for the request + const query = makeRecord({ + "stripe_customer_id": params["stripe_customer_id"], + }) + + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("GET", `/v1/users`, undefined, {query}) + return await resp.json() as UsersResponse + } + + public async UpdateUser(userID: string, params: UpdateUserRequest): Promise { + // Now make the actual call to the API + const resp = await this.baseClient.callTypedAPI("PATCH", `/v1/users/${encodeURIComponent(userID)}`, JSON.stringify(params)) + return await resp.json() as UserResponse + } + } +} + + + +function encodeQuery(parts: Record): string { + const pairs: string[] = [] + for (const key in parts) { + const val = (Array.isArray(parts[key]) ? parts[key] : [parts[key]]) as string[] + for (const v of val) { + pairs.push(`${key}=${encodeURIComponent(v)}`) + } + } + return pairs.join("&") +} + +// makeRecord takes a record and strips any undefined values from it, +// and returns the same record with a narrower type. +// @ts-ignore - TS ignore because makeRecord is not always used +function makeRecord(record: Record): Record { + for (const key in record) { + if (record[key] === undefined) { + delete record[key] + } + } + return record as Record +} + +function encodeWebSocketHeaders(headers: Record) { + // url safe, no pad + const base64encoded = btoa(JSON.stringify(headers)) + .replaceAll("=", "") + .replaceAll("+", "-") + .replaceAll("/", "_"); + return "encore.dev.headers." + base64encoded; +} + +class WebSocketConnection { + public ws: WebSocket; + + private hasUpdateHandlers: (() => void)[] = []; + + constructor(url: string, headers?: Record) { + let protocols = ["encore-ws"]; + if (headers) { + protocols.push(encodeWebSocketHeaders(headers)) + } + + this.ws = new WebSocket(url, protocols) + + this.on("error", () => { + this.resolveHasUpdateHandlers(); + }); + + this.on("close", () => { + this.resolveHasUpdateHandlers(); + }); + } + + resolveHasUpdateHandlers() { + const handlers = this.hasUpdateHandlers; + this.hasUpdateHandlers = []; + + for (const handler of handlers) { + handler() + } + } + + async hasUpdate() { + // await until a new message have been received, or the socket is closed + await new Promise((resolve) => { + this.hasUpdateHandlers.push(() => resolve(null)) + }); + } + + on(type: "error" | "close" | "message" | "open", handler: (event: any) => void) { + this.ws.addEventListener(type, handler); + } + + off(type: "error" | "close" | "message" | "open", handler: (event: any) => void) { + this.ws.removeEventListener(type, handler); + } + + close() { + this.ws.close(); + } +} + +export class StreamInOut { + public socket: WebSocketConnection; + private buffer: Response[] = []; + + constructor(url: string, headers?: Record) { + this.socket = new WebSocketConnection(url, headers); + this.socket.on("message", (event: any) => { + this.buffer.push(JSON.parse(event.data)); + this.socket.resolveHasUpdateHandlers(); + }); + } + + close() { + this.socket.close(); + } + + async send(msg: Request) { + if (this.socket.ws.readyState === WebSocket.CONNECTING) { + // await that the socket is opened + await new Promise((resolve) => { + this.socket.ws.addEventListener("open", resolve, { once: true }); + }); + } + + return this.socket.ws.send(JSON.stringify(msg)); + } + + async next(): Promise { + for await (const next of this) return next; + return undefined; + } + + async *[Symbol.asyncIterator](): AsyncGenerator { + while (true) { + if (this.buffer.length > 0) { + yield this.buffer.shift() as Response; + } else { + if (this.socket.ws.readyState === WebSocket.CLOSED) return; + await this.socket.hasUpdate(); + } + } + } +} + +export class StreamIn { + public socket: WebSocketConnection; + private buffer: Response[] = []; + + constructor(url: string, headers?: Record) { + this.socket = new WebSocketConnection(url, headers); + this.socket.on("message", (event: any) => { + this.buffer.push(JSON.parse(event.data)); + this.socket.resolveHasUpdateHandlers(); + }); + } + + close() { + this.socket.close(); + } + + async next(): Promise { + for await (const next of this) return next; + return undefined; + } + + async *[Symbol.asyncIterator](): AsyncGenerator { + while (true) { + if (this.buffer.length > 0) { + yield this.buffer.shift() as Response; + } else { + if (this.socket.ws.readyState === WebSocket.CLOSED) return; + await this.socket.hasUpdate(); + } + } + } +} + +export class StreamOut { + public socket: WebSocketConnection; + private responseValue: Promise; + + constructor(url: string, headers?: Record) { + let responseResolver: (_: any) => void; + this.responseValue = new Promise((resolve) => responseResolver = resolve); + + this.socket = new WebSocketConnection(url, headers); + this.socket.on("message", (event: any) => { + responseResolver(JSON.parse(event.data)) + }); + } + + async response(): Promise { + return this.responseValue; + } + + close() { + this.socket.close(); + } + + async send(msg: Request) { + if (this.socket.ws.readyState === WebSocket.CONNECTING) { + // await that the socket is opened + await new Promise((resolve) => { + this.socket.ws.addEventListener("open", resolve, { once: true }); + }); + } + + return this.socket.ws.send(JSON.stringify(msg)); + } +} +// CallParameters is the type of the parameters to a method call, but require headers to be a Record type +type CallParameters = Omit & { + /** Headers to be sent with the request */ + headers?: Record + + /** Query parameters to be sent with the request */ + query?: Record +} + +// AuthDataGenerator is a function that returns a new instance of the authentication data required by this API +export type AuthDataGenerator = () => + | string + | Promise + | undefined; + +// A fetcher is the prototype for the inbuilt Fetch function +export type Fetcher = typeof fetch; + +const boundFetch = fetch.bind(this); + +class BaseClient { + readonly baseURL: string + readonly fetcher: Fetcher + readonly headers: Record + readonly requestInit: Omit & { headers?: Record } + readonly authGenerator?: AuthDataGenerator + + constructor(baseURL: string, options: ClientOptions) { + this.baseURL = baseURL + this.headers = {} + + // Add User-Agent header if the script is running in the server + // because browsers do not allow setting User-Agent headers to requests + if (typeof window === "undefined") { + this.headers["User-Agent"] = "{{ENCORE_APP_ID}}-Generated-TS-Client (Encore/v1.46.5)"; + } + + this.requestInit = options.requestInit ?? {}; + + // Setup what fetch function we'll be using in the base client + if (options.fetcher !== undefined) { + this.fetcher = options.fetcher + } else { + this.fetcher = boundFetch + } + + // Setup an authentication data generator using the auth data token option + if (options.auth !== undefined) { + const auth = options.auth + if (typeof auth === "function") { + this.authGenerator = auth + } else { + this.authGenerator = () => auth + } + } + } + + async getAuthData(): Promise { + let authData: string | undefined; + + // If authorization data generator is present, call it and add the returned data to the request + if (this.authGenerator) { + const mayBePromise = this.authGenerator(); + if (mayBePromise instanceof Promise) { + authData = await mayBePromise; + } else { + authData = mayBePromise; + } + } + + if (authData) { + const data: CallParameters = {}; + + data.headers = {}; + data.headers["Authorization"] = "Bearer " + authData; + + return data; + } + + return undefined; + } + + // createStreamInOut sets up a stream to a streaming API endpoint. + async createStreamInOut(path: string, params?: CallParameters): Promise> { + let { query, headers } = params ?? {}; + + // Fetch auth data if there is any + const authData = await this.getAuthData(); + + // If we now have authentication data, add it to the request + if (authData) { + if (authData.query) { + query = {...query, ...authData.query}; + } + if (authData.headers) { + headers = {...headers, ...authData.headers}; + } + } + + const queryString = query ? '?' + encodeQuery(query) : '' + return new StreamInOut(this.baseURL + path + queryString, headers); + } + + // createStreamIn sets up a stream to a streaming API endpoint. + async createStreamIn(path: string, params?: CallParameters): Promise> { + let { query, headers } = params ?? {}; + + // Fetch auth data if there is any + const authData = await this.getAuthData(); + + // If we now have authentication data, add it to the request + if (authData) { + if (authData.query) { + query = {...query, ...authData.query}; + } + if (authData.headers) { + headers = {...headers, ...authData.headers}; + } + } + + const queryString = query ? '?' + encodeQuery(query) : '' + return new StreamIn(this.baseURL + path + queryString, headers); + } + + // createStreamOut sets up a stream to a streaming API endpoint. + async createStreamOut(path: string, params?: CallParameters): Promise> { + let { query, headers } = params ?? {}; + + // Fetch auth data if there is any + const authData = await this.getAuthData(); + + // If we now have authentication data, add it to the request + if (authData) { + if (authData.query) { + query = {...query, ...authData.query}; + } + if (authData.headers) { + headers = {...headers, ...authData.headers}; + } + } + + const queryString = query ? '?' + encodeQuery(query) : '' + return new StreamOut(this.baseURL + path + queryString, headers); + } + + // callTypedAPI makes an API call, defaulting content type to "application/json" + public async callTypedAPI(method: string, path: string, body?: BodyInit, params?: CallParameters): Promise { + return this.callAPI(method, path, body, { + ...params, + headers: { "Content-Type": "application/json", ...params?.headers } + }); + } + + // callAPI is used by each generated API method to actually make the request + public async callAPI(method: string, path: string, body?: BodyInit, params?: CallParameters): Promise { + let { query, headers, ...rest } = params ?? {} + const init = { + ...this.requestInit, + ...rest, + method, + body: body ?? null, + } + + // Merge our headers with any predefined headers + init.headers = {...this.headers, ...init.headers, ...headers} + + // Fetch auth data if there is any + const authData = await this.getAuthData(); + + // If we now have authentication data, add it to the request + if (authData) { + if (authData.query) { + query = {...query, ...authData.query}; + } + if (authData.headers) { + init.headers = {...init.headers, ...authData.headers}; + } + } + + // Make the actual request + const queryString = query ? '?' + encodeQuery(query) : '' + const response = await this.fetcher(this.baseURL+path+queryString, init) + + // handle any error responses + if (!response.ok) { + // try and get the error message from the response body + let body: APIErrorResponse = { code: ErrCode.Unknown, message: `request failed: status ${response.status}` } + + // if we can get the structured error we should, otherwise give a best effort + try { + const text = await response.text() + + try { + const jsonBody = JSON.parse(text) + if (isAPIErrorResponse(jsonBody)) { + body = jsonBody + } else { + body.message += ": " + JSON.stringify(jsonBody) + } + } catch { + body.message += ": " + text + } + } catch (e) { + // otherwise we just append the text to the error message + body.message += ": " + String(e) + } + + throw new APIError(response.status, body) + } + + return response + } +} + +/** + * APIErrorDetails represents the response from an Encore API in the case of an error + */ +interface APIErrorResponse { + code: ErrCode + message: string + details?: any +} + +function isAPIErrorResponse(err: any): err is APIErrorResponse { + return ( + err !== undefined && err !== null && + isErrCode(err.code) && + typeof(err.message) === "string" && + (err.details === undefined || err.details === null || typeof(err.details) === "object") + ) +} + +function isErrCode(code: any): code is ErrCode { + return code !== undefined && Object.values(ErrCode).includes(code) +} + +/** + * APIError represents a structured error as returned from an Encore application. + */ +export class APIError extends Error { + /** + * The HTTP status code associated with the error. + */ + public readonly status: number + + /** + * The Encore error code + */ + public readonly code: ErrCode + + /** + * The error details + */ + public readonly details?: any + + constructor(status: number, response: APIErrorResponse) { + // extending errors causes issues after you construct them, unless you apply the following fixes + super(response.message); + + // set error name as constructor name, make it not enumerable to keep native Error behavior + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target#new.target_in_constructors + Object.defineProperty(this, 'name', { + value: 'APIError', + enumerable: false, + configurable: true, + }) + + // fix the prototype chain + if ((Object as any).setPrototypeOf == undefined) { + (this as any).__proto__ = APIError.prototype + } else { + Object.setPrototypeOf(this, APIError.prototype); + } + + // capture a stack trace + if ((Error as any).captureStackTrace !== undefined) { + (Error as any).captureStackTrace(this, this.constructor); + } + + this.status = status + this.code = response.code + this.details = response.details + } +} + +/** + * Typeguard allowing use of an APIError's fields' + */ +export function isAPIError(err: any): err is APIError { + return err instanceof APIError; +} + +export enum ErrCode { + /** + * OK indicates the operation was successful. + */ + OK = "ok", + + /** + * Canceled indicates the operation was canceled (typically by the caller). + * + * Encore will generate this error code when cancellation is requested. + */ + Canceled = "canceled", + + /** + * Unknown error. An example of where this error may be returned is + * if a Status value received from another address space belongs to + * an error-space that is not known in this address space. Also + * errors raised by APIs that do not return enough error information + * may be converted to this error. + * + * Encore will generate this error code in the above two mentioned cases. + */ + Unknown = "unknown", + + /** + * InvalidArgument indicates client specified an invalid argument. + * Note that this differs from FailedPrecondition. It indicates arguments + * that are problematic regardless of the state of the system + * (e.g., a malformed file name). + * + * This error code will not be generated by the gRPC framework. + */ + InvalidArgument = "invalid_argument", + + /** + * DeadlineExceeded means operation expired before completion. + * For operations that change the state of the system, this error may be + * returned even if the operation has completed successfully. For + * example, a successful response from a server could have been delayed + * long enough for the deadline to expire. + * + * The gRPC framework will generate this error code when the deadline is + * exceeded. + */ + DeadlineExceeded = "deadline_exceeded", + + /** + * NotFound means some requested entity (e.g., file or directory) was + * not found. + * + * This error code will not be generated by the gRPC framework. + */ + NotFound = "not_found", + + /** + * AlreadyExists means an attempt to create an entity failed because one + * already exists. + * + * This error code will not be generated by the gRPC framework. + */ + AlreadyExists = "already_exists", + + /** + * PermissionDenied indicates the caller does not have permission to + * execute the specified operation. It must not be used for rejections + * caused by exhausting some resource (use ResourceExhausted + * instead for those errors). It must not be + * used if the caller cannot be identified (use Unauthenticated + * instead for those errors). + * + * This error code will not be generated by the gRPC core framework, + * but expect authentication middleware to use it. + */ + PermissionDenied = "permission_denied", + + /** + * ResourceExhausted indicates some resource has been exhausted, perhaps + * a per-user quota, or perhaps the entire file system is out of space. + * + * This error code will be generated by the gRPC framework in + * out-of-memory and server overload situations, or when a message is + * larger than the configured maximum size. + */ + ResourceExhausted = "resource_exhausted", + + /** + * FailedPrecondition indicates operation was rejected because the + * system is not in a state required for the operation's execution. + * For example, directory to be deleted may be non-empty, an rmdir + * operation is applied to a non-directory, etc. + * + * A litmus test that may help a service implementor in deciding + * between FailedPrecondition, Aborted, and Unavailable: + * (a) Use Unavailable if the client can retry just the failing call. + * (b) Use Aborted if the client should retry at a higher-level + * (e.g., restarting a read-modify-write sequence). + * (c) Use FailedPrecondition if the client should not retry until + * the system state has been explicitly fixed. E.g., if an "rmdir" + * fails because the directory is non-empty, FailedPrecondition + * should be returned since the client should not retry unless + * they have first fixed up the directory by deleting files from it. + * (d) Use FailedPrecondition if the client performs conditional + * REST Get/Update/Delete on a resource and the resource on the + * server does not match the condition. E.g., conflicting + * read-modify-write on the same resource. + * + * This error code will not be generated by the gRPC framework. + */ + FailedPrecondition = "failed_precondition", + + /** + * Aborted indicates the operation was aborted, typically due to a + * concurrency issue like sequencer check failures, transaction aborts, + * etc. + * + * See litmus test above for deciding between FailedPrecondition, + * Aborted, and Unavailable. + */ + Aborted = "aborted", + + /** + * OutOfRange means operation was attempted past the valid range. + * E.g., seeking or reading past end of file. + * + * Unlike InvalidArgument, this error indicates a problem that may + * be fixed if the system state changes. For example, a 32-bit file + * system will generate InvalidArgument if asked to read at an + * offset that is not in the range [0,2^32-1], but it will generate + * OutOfRange if asked to read from an offset past the current + * file size. + * + * There is a fair bit of overlap between FailedPrecondition and + * OutOfRange. We recommend using OutOfRange (the more specific + * error) when it applies so that callers who are iterating through + * a space can easily look for an OutOfRange error to detect when + * they are done. + * + * This error code will not be generated by the gRPC framework. + */ + OutOfRange = "out_of_range", + + /** + * Unimplemented indicates operation is not implemented or not + * supported/enabled in this service. + * + * This error code will be generated by the gRPC framework. Most + * commonly, you will see this error code when a method implementation + * is missing on the server. It can also be generated for unknown + * compression algorithms or a disagreement as to whether an RPC should + * be streaming. + */ + Unimplemented = "unimplemented", + + /** + * Internal errors. Means some invariants expected by underlying + * system has been broken. If you see one of these errors, + * something is very broken. + * + * This error code will be generated by the gRPC framework in several + * internal error conditions. + */ + Internal = "internal", + + /** + * Unavailable indicates the service is currently unavailable. + * This is a most likely a transient condition and may be corrected + * by retrying with a backoff. Note that it is not always safe to retry + * non-idempotent operations. + * + * See litmus test above for deciding between FailedPrecondition, + * Aborted, and Unavailable. + * + * This error code will be generated by the gRPC framework during + * abrupt shutdown of a server process or network connection. + */ + Unavailable = "unavailable", + + /** + * DataLoss indicates unrecoverable data loss or corruption. + * + * This error code will not be generated by the gRPC framework. + */ + DataLoss = "data_loss", + + /** + * Unauthenticated indicates the request does not have valid + * authentication credentials for the operation. + * + * The gRPC framework will generate this error code when the + * authentication metadata is invalid or a Credentials callback fails, + * but also expect authentication middleware to generate it. + */ + Unauthenticated = "unauthenticated", +} diff --git a/encore-saas-template/frontend/app/lib/firebase/FirebaseProvider.tsx b/encore-saas-template/frontend/app/lib/firebase/FirebaseProvider.tsx new file mode 100644 index 00000000..e3d4b795 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/firebase/FirebaseProvider.tsx @@ -0,0 +1,191 @@ +'use client' + +import { createContext, useContext, useEffect, useState } from 'react'; +import { + Auth, + User, + signInWithEmailAndPassword, + createUserWithEmailAndPassword, + signOut, + onAuthStateChanged, + GoogleAuthProvider, + signInWithPopup, + sendPasswordResetEmail, + browserPopupRedirectResolver, + browserLocalPersistence, + setPersistence +} from 'firebase/auth'; +import { auth } from './firebase'; +import getRequestClient from "@/app/lib/getRequestClient"; +import { redirect } from 'next/navigation'; + +interface FirebaseContextType { + auth: Auth; + user: User | null; + token: string | null; + loading: boolean; + isAdmin: boolean; + signIn: (email: string, password: string) => Promise; + signUp: (email: string, password: string) => Promise; + logout: () => Promise; + signInWithGoogle: () => Promise; + resetPassword: (email: string) => Promise; +} + +const FirebaseContext = createContext(null); + +export function FirebaseProvider({ children }: { children: React.ReactNode }) { + const [user, setUser] = useState(null); + const [token, setToken] = useState(null); + const [loading, setLoading] = useState(true); + const [isAdmin, setIsAdmin] = useState(false); + + useEffect(() => { + setPersistence(auth, browserLocalPersistence) + .catch((error) => { + console.error("Error setting persistence:", error); + }); + + const checkAdminStatus = async (user: User) => { + try { + const tokenResult = await user.getIdTokenResult(); + setIsAdmin(tokenResult.claims.role === 'admin'); + } catch (error) { + console.error('Error checking admin status:', error); + setIsAdmin(false); + } + }; + + const getAndSetToken = async (user: User) => { + try { + const idToken = await user.getIdToken(); + setToken(idToken); + } catch (error) { + console.error('Error getting token:', error); + setToken(null); + } + }; + + const unsubscribe = onAuthStateChanged(auth, (user) => { + setUser(user); + if (user) { + checkAdminStatus(user); + getAndSetToken(user); + } else { + setIsAdmin(false); + setToken(null); + } + setLoading(false); + }); + + return () => unsubscribe(); + }, []); + + const signIn = async (email: string, password: string) => { + try { + const result = await signInWithEmailAndPassword(auth, email, password); + setUser(result.user); + } catch (error) { + console.error('Error signing in:', error); + throw error; + } + }; + + const createBackendUser = async (firebaseUser: User) => { + try { + const token = await firebaseUser.getIdToken(); + const client = getRequestClient(token); + await client.user.AddUser(); + } catch (error) { + await firebaseUser.delete(); + throw new Error("Failed to create user profile. Please try again."); + } + }; + + const signUp = async (email: string, password: string) => { + try { + const result = await createUserWithEmailAndPassword(auth, email, password); + await createBackendUser(result.user); + setUser(result.user); + } catch (error) { + console.error('Error signing up:', error); + throw error; + } + }; + + const logout = async () => { + try { + await signOut(auth); + setUser(null); + redirect("/") + } catch (error) { + console.error('Error signing out:', error); + throw error; + } + }; + + const signInWithGoogle = async () => { + try { + const provider = new GoogleAuthProvider(); + provider.addScope('profile'); + provider.addScope('email'); + + const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver); + + const token = await result.user.getIdToken(); + const client = getRequestClient(token); + + try { + await client.user.GetUser(); + } catch (error) { + await createBackendUser(result.user); + } + + setUser(result.user); + } catch (error: any) { + console.error('Error signing in with Google:', error); + if (error.code === 'auth/popup-closed-by-user') { + throw new Error('Sign-in cancelled by user'); + } else if (error.code === 'auth/popup-blocked') { + throw new Error('Popup was blocked by the browser. Please allow popups and try again.'); + } + throw error; + } + }; + + const resetPassword = async (email: string) => { + try { + await sendPasswordResetEmail(auth, email); + } catch (error) { + console.error('Error resetting password:', error); + throw error; + } + }; + + const value: FirebaseContextType = { + auth, + user, + token, + loading, + isAdmin, + signIn, + signUp, + logout, + signInWithGoogle, + resetPassword, + }; + + return ( + + {!loading && children} + + ); +} + +export function useFirebase() { + const context = useContext(FirebaseContext); + if (!context) { + throw new Error('useFirebase must be used within a FirebaseProvider'); + } + return context; +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/lib/firebase/config.ts b/encore-saas-template/frontend/app/lib/firebase/config.ts new file mode 100644 index 00000000..2f73724b --- /dev/null +++ b/encore-saas-template/frontend/app/lib/firebase/config.ts @@ -0,0 +1,10 @@ +export const firebaseConfig = { + apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, + authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, + projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, + storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, + popupRedirectResolver: undefined, + persistance: true +}; \ No newline at end of file diff --git a/encore-saas-template/frontend/app/lib/firebase/firebase.ts b/encore-saas-template/frontend/app/lib/firebase/firebase.ts new file mode 100644 index 00000000..6fe71d43 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/firebase/firebase.ts @@ -0,0 +1,9 @@ +import { initializeApp, getApps, getApp } from 'firebase/app'; +import { getAuth } from 'firebase/auth'; +import { firebaseConfig } from './config'; + +// Initialize Firebase +const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig); +const auth = getAuth(app); + +export { app, auth }; \ No newline at end of file diff --git a/encore-saas-template/frontend/app/lib/getRequestClient.ts b/encore-saas-template/frontend/app/lib/getRequestClient.ts new file mode 100644 index 00000000..b0ed85f0 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/getRequestClient.ts @@ -0,0 +1,23 @@ +import Client, { Environment, Local } from "./client"; +import { useRouter } from 'next/navigation'; + +/** + * Returns the generated Encore request client for either the local or staging environment. + * If we are running the frontend locally (development) we assume that our Encore + * backend is also running locally. + */ +const getRequestClient = (token: string | undefined, options?: { baseURL?: string }) => { + if (options?.baseURL) { + return new Client(options.baseURL, { + auth: token, + }); + } + + const isLocal = process.env.NEXT_PUBLIC_ENVIRONMENT === "local"; + const env = isLocal ? Local : Environment(process.env.NEXT_PUBLIC_ENVIRONMENT || "staging"); + return new Client(env, { + auth: token, + }); +}; + +export default getRequestClient; \ No newline at end of file diff --git a/encore-saas-template/frontend/app/lib/hooks.ts b/encore-saas-template/frontend/app/lib/hooks.ts new file mode 100644 index 00000000..5686b02b --- /dev/null +++ b/encore-saas-template/frontend/app/lib/hooks.ts @@ -0,0 +1,79 @@ +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import getRequestClient from "./getRequestClient"; +import client, { user } from "./client"; +import { toast } from "sonner"; + +export const useUser = (token: string | null) => { + const requestClient = getRequestClient(token ?? undefined) + + const { data: userData, isLoading: isUserDataLoading } = useQuery({ + queryKey: ["users", "me"], + queryFn: () => requestClient.user.GetUser(), + enabled: !!token, + }); + + return { userData, isUserDataLoading } +}; + +export const useCurrentPlan = (token: string | null) => { + const requestClient = getRequestClient(token ?? undefined) + const { data: currentPlan, isLoading: isCurrentPlanLoading } = useQuery({ + queryKey: ["products", "currentPlan"], + queryFn: async () => { + const userData = await requestClient.user.GetUser(); + const products = await requestClient.product.GetProducts(); + const response = await requestClient.subscription.GetSubscriptions({ + user_id: userData.id, + }); + const subscription = response.subscriptions[0]; + const product = products.products.find((product) => product.id === subscription.stripe_product_id); + return product?.name; + }, + enabled: !!token, + }); + + return { currentPlan, isCurrentPlanLoading } +} + +export const useActivities = (token: string | null, offset: number, limit: number) => { + const requestClient = getRequestClient(token ?? undefined) + const { data: activities, isLoading: isActivitiesLoading, error } = useQuery({ + queryKey: ["activities"], + queryFn: async () => { + const activities = await requestClient.activity.GetActivities({ offset, limit }); + const users = await Promise.all(activities.activities.map(async (activity) => { + const user = await requestClient.user.GetUserById(activity.user_id); + return { ...activity, user }; + })); + return users; + }, + }); + + return { activities, isActivitiesLoading, error } +} + +export const useProducts = (token: string | null) => { + const requestClient = getRequestClient(token ?? undefined) + const { data: products, isLoading: isProductsLoading } = useQuery({ + queryKey: ["products"], + queryFn: () => requestClient.product.GetProducts(), + }); + + return { products, isProductsLoading } +} + +export const useUpdateUserMutation = (token: string | null) => { + const requestClient = getRequestClient(token ?? undefined) + const queryClient = useQueryClient() + return useMutation({ + mutationFn: ({ userId, request }: { userId: string, request: user.UpdateUserRequest }) => requestClient.user.UpdateUser(userId, request), + onError: () => { + toast.error("Failed to update user") + }, + onSuccess: () => { + toast.success("User updated") + queryClient.invalidateQueries({ queryKey: ["users", "me"] }) + } + }); +} + diff --git a/encore-saas-template/frontend/app/lib/serverApi.ts b/encore-saas-template/frontend/app/lib/serverApi.ts new file mode 100644 index 00000000..1bfd53c1 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/serverApi.ts @@ -0,0 +1,8 @@ +import getRequestClient from "./getRequestClient"; + +export async function getProducts() { + // We need to pass in the API_URL from the environment variables, because running server sides api requests locally works better with 127.0.0.1 + const client = getRequestClient(undefined, { baseURL: process.env.API_URL }); + const { products } = await client.product.GetProducts(); + return products.sort((a, b) => a.price.unit_amount - b.price.unit_amount); +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/lib/validations/auth.tsx b/encore-saas-template/frontend/app/lib/validations/auth.tsx new file mode 100644 index 00000000..95fc3913 --- /dev/null +++ b/encore-saas-template/frontend/app/lib/validations/auth.tsx @@ -0,0 +1,44 @@ +import * as z from "zod" + +// Login form validation schema +export const loginSchema = z.object({ + email: z + .string() + .min(1, "Email is required") + .email("Invalid email address"), + password: z + .string() + .min(1, "Password is required") + .min(6, "Password must be at least 6 characters"), +}) + +// Signup form validation schema +export const signupSchema = z.object({ + email: z + .string() + .min(1, "Email is required") + .email("Invalid email address"), + password: z + .string() + .min(1, "Password is required") + .min(6, "Password must be at least 6 characters"), + confirmPassword: z + .string() + .min(1, "Please confirm your password"), +}).refine((data) => data.password === data.confirmPassword, { + message: "Passwords don't match", + path: ["confirmPassword"], +}) + +// Password reset validation schema +export const resetPasswordSchema = z.object({ + email: z + .string() + .min(1, "Email is required") + .email("Invalid email address"), +}) + +// Types for form data +export type LoginFormData = z.infer +export type SignupFormData = z.infer +export type ResetPasswordFormData = z.infer \ No newline at end of file diff --git a/encore-saas-template/frontend/app/login/page.tsx b/encore-saas-template/frontend/app/login/page.tsx new file mode 100644 index 00000000..d7403668 --- /dev/null +++ b/encore-saas-template/frontend/app/login/page.tsx @@ -0,0 +1,175 @@ +"use client" + +import { useState } from "react" +import Link from "next/link" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { toast } from "sonner" +import { Card } from "@/components/ui/card" +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider" +import { LoginFormData, loginSchema } from "@/app/lib/validations/auth" + +export default function LoginPage() { + const [isLoading, setIsLoading] = useState(false) + const { signIn, signInWithGoogle, user } = useFirebase() + + const form = useForm({ + resolver: zodResolver(loginSchema), + defaultValues: { + email: "", + password: "", + }, + }) + + async function onSubmit(data: LoginFormData) { + setIsLoading(true) + try { + await signIn(data.email, data.password) + window.location.href = '/dashboard'; + } catch (error: any) { + toast.error(error.message || "Failed to login") + } finally { + setIsLoading(false) + } + } + + const handleGoogleSignIn = async () => { + setIsLoading(true); + try { + await signInWithGoogle(); + window.location.href = '/dashboard'; + } catch (error: any) { + if (error.message === 'Sign-in cancelled by user') { + return; + } + toast.error(error.message || "Failed to sign in with Google"); + } finally { + setIsLoading(false); + } + }; + + return ( +
+ +
+

Welcome back

+

+ Sign in to your account to continue +

+
+ +
+ + ( + + Email + + + + + + )} + /> + + ( + + Password + + + + + + )} + /> + + + + + +
+
+ +
+
+ + Or continue with + +
+
+ + + +

+ Don't have an account?{" "} + + Sign up + +

+
+
+ ) +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/page.tsx b/encore-saas-template/frontend/app/page.tsx new file mode 100644 index 00000000..84f7822b --- /dev/null +++ b/encore-saas-template/frontend/app/page.tsx @@ -0,0 +1,135 @@ +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import Link from "next/link"; +import { ArrowRight, Zap, Shield, CreditCard, Sparkles } from "lucide-react"; +import { Navigation } from "@/components/navigation"; + +const features = [ + { + title: "Lightning Fast Deployment", + description: "Deploy your application in seconds with our automated CI/CD pipeline. Zero configuration needed - just push your code and we handle the rest.", + icon: , + highlight: "Deploy in seconds, not hours", + gradient: "from-zinc-900 to-zinc-800" + }, + { + title: "Stripe Payment Integration", + description: "Built-in Stripe integration for seamless payment processing. Accept payments globally with support for multiple currencies and payment methods.", + icon: , + highlight: "Ready-to-use payment system", + gradient: "from-zinc-900 to-zinc-800" + }, + { + title: "Firebase Authentication", + description: "Enterprise-grade authentication powered by Firebase. Social logins, email verification, and password recovery work right out of the box.", + icon: , + highlight: "Secure user management", + gradient: "from-zinc-900 to-zinc-800" + }, +]; + +const testimonials = [ + { + name: "Sarah Chen", + role: "CTO at TechFlow", + content: "EncoreKit has transformed how we build and deploy applications. It's a game-changer.", + avatar: "/avatars/sarah.png", + }, + { + name: "Mark Anderson", + role: "Lead Developer", + content: "The developer experience is unmatched. Our team's productivity has increased by 3x.", + avatar: "/avatars/mark.png", + }, +]; + +export default function Home() { + return ( +
+ + + {/* Hero Section */} +
+
+
+ +

+ Build Better Apps with{" "} + + EncoreKit + +

+ +

+ The complete development platform with built-in authentication, payments, and deployment. Start building your next big idea in minutes. +

+ +
+ + + + + + +
+
+
+
+ + {/* Features Section */} +
+
+
+ {features.map((feature, index) => ( + + {/* Gradient Border Top */} +
+ +
+ {/* Icon with Gradient Background */} +
+
+
+ {feature.icon} +
+
+ + {/* Title and Content */} +
+

+ {feature.title} +

+ +
+ + + {feature.highlight} + +
+ +

+ {feature.description} +

+
+ + {/* Hover State Link */} +
+ Learn more + +
+
+ + ))} +
+
+
+
+ ); +} diff --git a/encore-saas-template/frontend/app/pricing/page.tsx b/encore-saas-template/frontend/app/pricing/page.tsx new file mode 100644 index 00000000..bcc9e074 --- /dev/null +++ b/encore-saas-template/frontend/app/pricing/page.tsx @@ -0,0 +1,93 @@ +'use client' +import { PricingCard } from "@/components/pricing/PricingCard"; +import { product } from "@/app/lib/client"; +import { getProducts } from "@/app/lib/serverApi"; +import { useEffect } from "react"; +import { useState } from "react"; + +const productToTier: Record<'Base' | 'Plus', { + features: string[]; + cta: string; + href: string; + featured?: boolean; +}> = { + "Base": { + features: [ + "Up to 3 projects", + "10GB storage", + "Basic analytics", + "24/7 support", + "API access", + "Community access" + ], + cta: "Get Started", + href: "/signup?plan=base" + }, + "Plus": { + features: [ + "Unlimited projects", + "50GB storage", + "Advanced analytics", + "24/7 priority support", + "Advanced API access", + "Early access features", + "Custom integrations", + "Team collaboration tools" + ], + cta: "Get Plus", + href: "/signup?plan=plus", + featured: true + } +} + +export default function PricingPage() { + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchProducts = async () => { + const products = await getProducts(); + setProducts(products); + setLoading(false); + }; + fetchProducts(); + }, []); + + return ( +
+
+
+ {/* Header */} +
+

+ Simple, Transparent Pricing +

+

+ Choose the perfect plan for your needs. All plans include a 14-day free trial. +

+
+ + {/* Pricing Cards */} +
+ {products.map((product) => ( + + ))} +
+ + {/* Skeletons if loading */} + {loading && ( +
+ {Array.from({ length: 2 }).map((_, index) => ( +
+ ))} +
+ )} +
+
+
+ ); +} \ No newline at end of file diff --git a/encore-saas-template/frontend/app/signup/page.tsx b/encore-saas-template/frontend/app/signup/page.tsx new file mode 100644 index 00000000..d719ab68 --- /dev/null +++ b/encore-saas-template/frontend/app/signup/page.tsx @@ -0,0 +1,201 @@ +"use client" + +import { useState } from "react" +import { redirect } from "next/navigation" +import Link from "next/link" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider" +import { signupSchema, type SignupFormData } from "@/app/lib/validations/auth" +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { Input } from "@/components/ui/input" +import { toast } from "sonner" +import { Card } from "@/components/ui/card" + +export default function SignupPage() { + const [isLoading, setIsLoading] = useState(false) + const { signUp, signInWithGoogle, user } = useFirebase() + + const form = useForm({ + resolver: zodResolver(signupSchema), + defaultValues: { + email: "", + password: "", + confirmPassword: "", + }, + }) + + const handleGoogleSignIn = async () => { + setIsLoading(true); + try { + await signInWithGoogle(); + window.location.href = '/dashboard'; + } catch (error: any) { + // Handle specific error cases + if (error.message === 'Sign-in cancelled by user') { + // User closed the popup, no need to show error + return; + } + toast.error(error.message || "Failed to sign in with Google"); + } finally { + setIsLoading(false); + } + }; + + async function onSubmit(data: SignupFormData) { + setIsLoading(true) + try { + await signUp(data.email, data.password) + window.location.href = '/dashboard'; + } catch (error: any) { + toast.error(error.message || "Failed to create account") + } finally { + setIsLoading(false) + } + } + + return ( +
+ +
+

Create an account

+

+ Sign up to get started with EncoreKit +

+
+ +
+ + ( + + Email + + + + + + )} + /> + + ( + + Password + + + + + + )} + /> + + ( + + Confirm Password + + + + + + )} + /> + + + + + +
+
+ +
+
+ + Or continue with + +
+
+ + + +

+ Already have an account?{" "} + + Sign in + +

+
+
+ ) +} \ No newline at end of file diff --git a/encore-saas-template/frontend/components.json b/encore-saas-template/frontend/components.json new file mode 100644 index 00000000..5a3c7506 --- /dev/null +++ b/encore-saas-template/frontend/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "zinc", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/encore-saas-template/frontend/components/activity/ActivityList.tsx b/encore-saas-template/frontend/components/activity/ActivityList.tsx new file mode 100644 index 00000000..04fde61a --- /dev/null +++ b/encore-saas-template/frontend/components/activity/ActivityList.tsx @@ -0,0 +1,74 @@ +import { useEffect, useState } from 'react'; +import Client, { activity, user } from '@/app/lib/client'; +import { useFirebase } from '@/app/lib/firebase/FirebaseProvider'; +import { useActivities } from '@/app/lib/hooks'; + +interface ActivityListProps { + limit?: number; + offset?: number; +} + +export default function ActivityListAdminWrapper() { + const { isAdmin } = useFirebase(); + + if (!isAdmin) { + return null; + } + + return ; +} + +type ActivityWithUser = activity.ActivityResponse & { + user: user.UserResponse; +} + +function ActivityList({ limit = 10, offset = 0 }: ActivityListProps) { + const { user, isAdmin, token } = useFirebase(); + const { activities, isActivitiesLoading, error } = useActivities(token, offset, limit); + + if (!isAdmin) { + return null; + } + + if (isActivitiesLoading) { + return
Loading activities...
; + } + + if (error) { + return
Could not fetch activities
; + } + + return ( +
+
+

Activity Log

+
+ + {activities && activities.length === 0 ? ( +
+

No activities recorded yet

+
+ ) : ( +
    + {activities && activities.map((activity) => ( +
  • +
    +
    +

    + {activity.event} +

    + +
    +

    + {activity.user.display_name ? activity.user.display_name : activity.user.email} +

    +
    +
    • + ))} +
+ )} +
+ ); +} diff --git a/encore-saas-template/frontend/components/dashboard/SubscriptionStatusCard.tsx b/encore-saas-template/frontend/components/dashboard/SubscriptionStatusCard.tsx new file mode 100644 index 00000000..682b24b0 --- /dev/null +++ b/encore-saas-template/frontend/components/dashboard/SubscriptionStatusCard.tsx @@ -0,0 +1,275 @@ +'use client' + +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { createCustomerPortalSession } from "@/app/lib/api" +import { product } from "@/app/lib/client" +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider" +import getRequestClient from "@/app/lib/getRequestClient" +import { CreditCard, AlertCircle, RefreshCw } from "lucide-react" +import { useRouter, useSearchParams } from "next/navigation" +import { useEffect, useState, useCallback } from "react" +import { toast } from "sonner" + +const getStatusColor = (status: string | null): string => { + if (!status) return "bg-zinc-100 text-zinc-800"; + + switch (status.toLowerCase()) { + case "active": + return "bg-green-100 text-green-800"; + case "trialing": + return "bg-blue-100 text-blue-800"; + case "canceled": + return "bg-red-100 text-red-800"; + case "incomplete": + case "incomplete_expired": + return "bg-yellow-100 text-yellow-800"; + default: + return "bg-zinc-100 text-zinc-800"; + } +}; + +interface SubscriptionState { + status: string | null; + productName: string | null; + isLoading: boolean; + isPolling: boolean; + error: string | null; + lastUpdated: Date | null; + pollCount: number; + cancel_at_period_end: boolean; + cancel_at: Date | null; +} + +interface CachedData { + userId: string; + products: product.Product[]; +} + +const MAX_POLL_ATTEMPTS = 5; +const BASE_POLL_INTERVAL = 1000; +const MAX_POLL_INTERVAL = 30000; + +const calculateBackoffDelay = (attempt: number): number => { + return Math.min(Math.pow(2, attempt) * BASE_POLL_INTERVAL, MAX_POLL_INTERVAL); +}; + +export const SubscriptionStatusCard = () => { + const { user } = useFirebase() + const searchParams = useSearchParams() + const router = useRouter(); + + const [state, setState] = useState({ + status: null, + productName: null, + isLoading: false, + isPolling: false, + error: null, + lastUpdated: null, + pollCount: 0, + cancel_at_period_end: false, + cancel_at: null + }); + + const [cachedData, setCachedData] = useState(null); + + const fetchSubscriptionStatus = useCallback(async (userId: string, products: product.Product[]) => { + try { + const requestClient = getRequestClient(await user?.getIdToken()) + const subscriptions = await requestClient.subscription.GetSubscriptions({ + user_id: userId + }) + + const activeSubscription = subscriptions.subscriptions[0] // Assuming first subscription is the active one + const product = activeSubscription ? products.find(p => p.id === activeSubscription.stripe_product_id) : null + + setState(prev => ({ + ...prev, + status: activeSubscription?.subscription_status || null, + productName: product?.name || null, + lastUpdated: new Date(), + error: null, + isLoading: false, + cancel_at: activeSubscription?.cancel_at ? new Date(activeSubscription.cancel_at) : null, + cancel_at_period_end: activeSubscription?.cancel_at_period_end || false + })) + + return !!activeSubscription + } catch (error) { + console.error('Error fetching subscription status:', error) + setState(prev => ({ + ...prev, + error: 'Failed to fetch subscription status', + isLoading: false + })) + return false + } + }, [user]); + + const fetchInitialData = useCallback(async () => { + try { + setState(prev => ({ ...prev, isLoading: true })) + const requestClient = getRequestClient(await user?.getIdToken()) + + const [userData, productsResponse] = await Promise.all([ + requestClient.user.GetUser(), + requestClient.product.GetProducts() + ]) + + if (!productsResponse) { + throw new Error('Failed to fetch products') + } + setCachedData({ + userId: userData.id, + products: productsResponse.products + }) + + await fetchSubscriptionStatus(userData.id, productsResponse.products) + + } catch (error) { + console.error('Error fetching initial data:', error) + setState(prev => ({ + ...prev, + error: 'Failed to initialize subscription data', + isLoading: false + })) + } + }, [user, fetchSubscriptionStatus]); + + const poll = useCallback(async (cachedData: CachedData, attemptNumber = 0) => { + if (attemptNumber >= MAX_POLL_ATTEMPTS) { + setState(prev => ({ ...prev, isPolling: false })); + return; + } + + setState(prev => ({ ...prev, pollCount: attemptNumber })); + + const hasActiveSubscription = await fetchSubscriptionStatus(cachedData.userId, cachedData.products); + + if (hasActiveSubscription) { + setState(prev => ({ ...prev, isPolling: false })); + } else { + const nextAttempt = attemptNumber + 1; + setState(prev => ({ ...prev, pollCount: nextAttempt })); + + const delay = calculateBackoffDelay(nextAttempt); + console.log(`Polling attempt ${nextAttempt}/${MAX_POLL_ATTEMPTS}, next attempt in ${delay/1000}s`); + + if (nextAttempt < MAX_POLL_ATTEMPTS) { + setTimeout(() => poll(cachedData, nextAttempt), delay); + } else { + setState(prev => ({ ...prev, isPolling: false })); + } + } + }, [fetchSubscriptionStatus]); + + const startPolling = useCallback(async () => { + if (!cachedData) return; + + setState(prev => ({ ...prev, isPolling: true, pollCount: 0 })); + poll(cachedData, 0); + }, [cachedData, poll]); + + const handleStripeRedirect = useCallback(async () => { + const success = searchParams.get('success') + const sessionId = searchParams.get('session_id') + + if (success === 'true' && sessionId) { + startPolling() + } + }, [searchParams, startPolling]); + + useEffect(() => { + if (user) { + handleStripeRedirect() + } + }, [user, handleStripeRedirect]) + + useEffect(() => { + if (user && !cachedData) { + fetchInitialData(); + } + }, [user, cachedData, fetchInitialData]); + + const handleManageSubscription = async () => { + try { + if (!cachedData?.products.length) { + toast.error('No subscription products available') + return + } + // set loading to true + setState(prev => ({ ...prev, isLoading: true })) + const token = await user?.getIdToken(); + await createCustomerPortalSession(token, router); + } catch (error) { + console.error('Error creating checkout session:', error) + toast.error('Failed to manage subscription') + } finally { + setState(prev => ({ ...prev, isLoading: false })) + } + } + + const handleRefresh = async () => { + if (!cachedData) return; + setState(prev => ({ ...prev, isLoading: true })) + await fetchSubscriptionStatus(cachedData.userId, cachedData.products) + } + + return ( + +
+
+
+
+

Subscription Status

+ + {state.isPolling ? "Updating..." : (state.status || "Free Plan")} + + {state.isLoading && !state.isPolling && ( + + )} +
+

+ {state.status ? `Current plan: ${state.productName}` : "No active subscription"} +

+ {state.cancel_at_period_end && ( +

+ Subscription will end on {state.cancel_at ? state.cancel_at.toLocaleDateString() : "the end of the current period"} +

+ )} + {state.lastUpdated && ( +

+ Last updated: {state.lastUpdated.toLocaleTimeString()} +

+ )} + {state.error && ( +
+ + {state.error} +
+ )} +
+
+ + +
+
+
+ + ) +} diff --git a/encore-saas-template/frontend/components/navigation.tsx b/encore-saas-template/frontend/components/navigation.tsx new file mode 100644 index 00000000..90e9c5a8 --- /dev/null +++ b/encore-saas-template/frontend/components/navigation.tsx @@ -0,0 +1,98 @@ +'use client' +import Link from "next/link"; +import { Button } from "@/components/ui/button"; +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { User, LogOut, Settings } from "lucide-react"; + +export function Navigation() { + const { user, logout } = useFirebase(); + + const handleSignOut = async () => { + try { + await logout(); + } catch (error) { + console.error("Error signing out:", error); + } + }; + + return ( + + ); +} \ No newline at end of file diff --git a/encore-saas-template/frontend/components/pricing/PricingCard.tsx b/encore-saas-template/frontend/components/pricing/PricingCard.tsx new file mode 100644 index 00000000..0c2064fd --- /dev/null +++ b/encore-saas-template/frontend/components/pricing/PricingCard.tsx @@ -0,0 +1,101 @@ +"use client" + +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Check } from "lucide-react"; +import { product } from "@/app/lib/client"; +import { useFirebase } from "@/app/lib/firebase/FirebaseProvider"; +import { handleSubscription, createCustomerPortalSession } from "@/app/lib/api"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { toast } from "sonner"; +import { useCurrentPlan } from "@/app/lib/hooks"; + +interface PricingCardProps { + product: product.Product; + tier: { + features: string[]; + cta: string; + href: string; + featured?: boolean; + }; +} + +export function PricingCard({ product, tier }: PricingCardProps) { + const router = useRouter(); + const { user, token } = useFirebase(); + const [loadingCheckout, setLoadingCheckout] = useState(false); + const { currentPlan, isCurrentPlanLoading } = useCurrentPlan(token); + + const handleGetStartedClick = async () => { + setLoadingCheckout(true); + try { + if (currentPlan) { + const token = await user?.getIdToken(); + await createCustomerPortalSession(token, router); + } else { + const token = await user?.getIdToken(); + await handleSubscription(token, product.price.id, router); + } + } catch (error) { + toast.error('Failed to process subscription request'); + } finally { + setLoadingCheckout(false); + } + }; + + return ( + +
+ {tier.featured && ( +
+ Most Popular +
+ )} + + {currentPlan === product.name && ( +
+ Current Plan +
+ )} + +

{product.name}

+
+ ${product.price.unit_amount / 100} + /month +
+ +

+ {product.description} +

+ +
+
    + {tier.features.map((feature) => ( +
  • + + {feature} +
    • + ))} +
+
+ + +
+ + ); +} \ No newline at end of file diff --git a/encore-saas-template/frontend/components/ui/avatar.tsx b/encore-saas-template/frontend/components/ui/avatar.tsx new file mode 100644 index 00000000..71e428b4 --- /dev/null +++ b/encore-saas-template/frontend/components/ui/avatar.tsx @@ -0,0 +1,53 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +function Avatar({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/encore-saas-template/frontend/components/ui/button.tsx b/encore-saas-template/frontend/components/ui/button.tsx new file mode 100644 index 00000000..2af5f40b --- /dev/null +++ b/encore-saas-template/frontend/components/ui/button.tsx @@ -0,0 +1,58 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", + destructive: + "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", + outline: + "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2 has-[>svg]:px-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + icon: "size-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +function Button({ + className, + variant, + size, + asChild = false, + ...props +}: React.ComponentProps<"button"> & + VariantProps & { + asChild?: boolean + }) { + const Comp = asChild ? Slot : "button" + + return ( + + ) +} + +export { Button, buttonVariants } diff --git a/encore-saas-template/frontend/components/ui/card.tsx b/encore-saas-template/frontend/components/ui/card.tsx new file mode 100644 index 00000000..5e960a68 --- /dev/null +++ b/encore-saas-template/frontend/components/ui/card.tsx @@ -0,0 +1,68 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/encore-saas-template/frontend/components/ui/dropdown-menu.tsx b/encore-saas-template/frontend/components/ui/dropdown-menu.tsx new file mode 100644 index 00000000..c4153922 --- /dev/null +++ b/encore-saas-template/frontend/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +"use client" + +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function DropdownMenu({ + ...props +}: React.ComponentProps) { + return +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DropdownMenuItem({ + className, + inset, + variant = "default", + ...props +}: React.ComponentProps & { + inset?: boolean + variant?: "default" | "destructive" +}) { + return ( + + ) +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ) +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ) +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean +}) { + return ( + + ) +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { + return ( + + ) +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps) { + return +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean +}) { + return ( + + {children} + + + ) +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +} diff --git a/encore-saas-template/frontend/components/ui/form.tsx b/encore-saas-template/frontend/components/ui/form.tsx new file mode 100644 index 00000000..2e847c17 --- /dev/null +++ b/encore-saas-template/frontend/components/ui/form.tsx @@ -0,0 +1,167 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { Slot } from "@radix-ui/react-slot" +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, + useFormState, +} from "react-hook-form" + +import { cn } from "@/lib/utils" +import { Label } from "@/components/ui/label" + +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +> = { + name: TName +} + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState } = useFormContext() + const formState = useFormState({ name: fieldContext.name }) + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error("useFormField should be used within ") + } + + const { id } = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} + +type FormItemContextValue = { + id: string +} + +const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +function FormItem({ className, ...props }: React.ComponentProps<"div">) { + const id = React.useId() + + return ( + +
+ + ) +} + +function FormLabel({ + className, + ...props +}: React.ComponentProps) { + const { error, formItemId } = useFormField() + + return ( +