feat: Open payment modal if a plan was preselected, add annual plans

[kyle-ssg]

Thanks for submitting a PR! Please check the boxes below:

• I have run pre-commit to check linting
• I have added information to docs/ if required so people know about the feature!
• I have filled in the "Changes" section below?
• I have filled in the "How did you test this code" section below?
• I have used a Conventional Commit title for this Pull Request

Changes

The annual plans need adjusting in Chargebee before this goes live

Navigating to app.flagsmith.com from the pricing page, or simply navigating to https://app.flagsmith.com/signup?plan=startup-v2 will cookie the plan. Also adds a toggle for annual plans.

Upon hitting the features page for the first time it will take that plan and open checkout if payments are enabled.

How did you test this code?

• Go to /signup?plan=startup-v2 on the preview url
• Signup, create org, create project
• See payment modal

Attempt to purchase an annual plan

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 9, 2024 0:57am
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 9, 2024 0:57am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 9, 2024 0:57am

[github-actions]

Uffizzi Preview deployment-52669 was deleted.

[matthewelwell]

@kyle-ssg I tend to think that actually we should trigger the CB signup modal after creating the organisation. I appreciate that the reasoning behind creating it after the project is so that you land immediately into the main dashboard after completing the payment but, my concern, is that from the project create screen it's possible to navigate to a lot of different other places in the app (although perhaps it's a slim use case why people would do that).

Alternatively, we could just lock the navigation options on the project (and organisation) create screens?

As an aside, I was able to get the dashboard into quite a weird state by clicking on 'Account' before creating an organisation after signup. Again, this is a very slim edge case, but might be worth tightening up here / might be an argument for locking the nav on at least the organisation create screen.

[kyle-ssg]

Since the plan selection is persisted, it's not too sensitive to what the user does during onboarding. I think I'll open up the discussion internally, I agree that it's debatable when this is done.

[matthewelwell]

@kyle-ssg as per the conversation here, I think this needs some tweaks?

[novakzaballa]

LGTM

[novakzaballa]

Maybe this should be removed?

[github-actions]

flagsmith-frontend image build and security scan finished ✨

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-frontend:pr-4110	Finished ✅	Results ✅

[github-actions]

flagsmith-e2e image build finished ✨

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-4110	Finished ✅	Skipped

[rolodato]

I'm unable to sign up for a free account on a self-hosted instance with this change. Using this docker-compose.yml:

# See https://docs.flagsmith.com/deployment/docker for more information on running Flagsmith in Docker
# This Docker Compose file will run the entire Flagsmith Platform

version: '3'

volumes:
  pgdata:

services:
  postgres:
    image: postgres:15.5-alpine
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: flagsmith
    container_name: flagsmith_postgres
    volumes:
      - pgdata:/var/lib/postgresql/data
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -d flagsmith -U postgres']
      interval: 2s
      timeout: 2s
      retries: 20
      start_period: 20s

  flagsmith:
    image: ghcr.io/flagsmith/flagsmith:pr-4110
    environment:
      # All environments variables are available here:
      # API: https://docs.flagsmith.com/deployment/locally-api#environment-variables
      # UI: https://docs.flagsmith.com/deployment/locally-frontend#environment-variables

      DATABASE_URL: postgresql://postgres:password@postgres:5432/flagsmith
      USE_POSTGRES_FOR_ANALYTICS: 'true' # Store API and Flag Analytics data in Postgres

      ENVIRONMENT: production # set to 'production' in production.
      DJANGO_ALLOWED_HOSTS: '*' # Change this in production
      ALLOW_ADMIN_INITIATION_VIA_CLI: 'true' # Change this in production
      FLAGSMITH_DOMAIN: localhost:8000 # Change this in production
      DJANGO_SECRET_KEY: secret # Change this in production
      ENABLE_ADMIN_ACCESS_USER_PASS: 'true'
      # PREVENT_SIGNUP: 'true' # Uncomment to prevent additional signups
      # ALLOW_REGISTRATION_WITHOUT_INVITE: 'true'

      # Enable Task Processor
      TASK_RUN_METHOD: TASK_PROCESSOR # other options are: SYNCHRONOUSLY, SEPARATE_THREAD (default)

      # For more info on configuring E-Mails - https://docs.flagsmith.com/deployment/locally-api#environment-variables
      # Example SMTP:
      # EMAIL_BACKEND: django.core.mail.backends.smtp.EmailBackend
      # EMAIL_HOST: mail.example.com
      # SENDER_EMAIL: flagsmith@example.com
      # EMAIL_HOST_USER: flagsmith@example.com
      # EMAIL_HOST_PASSWORD: smtp_account_password
      # EMAIL_PORT: 587 # optional
      # EMAIL_USE_TLS: 'true' # optional
    ports:
      - 8000:8000
    healthcheck:
      test: ['CMD-SHELL', 'python /app/scripts/healthcheck.py']
      interval: 2s
      timeout: 2s
      retries: 20
      start_period: 20s
    depends_on:
      postgres:
        condition: service_healthy

  # The flagsmith_processor service is only needed if TASK_RUN_METHOD set to TASK_PROCESSOR
  # in the application environment
  flagsmith_processor:
    image: flagsmith.docker.scarf.sh/flagsmith/flagsmith:latest
    environment:
      DATABASE_URL: postgresql://postgres:password@postgres:5432/flagsmith
      USE_POSTGRES_FOR_ANALYTICS: 'true'
    depends_on:
      flagsmith:
        condition: service_healthy
    command: run-task-processor

I get this JS exception:

Uncaught TypeError: Project.chargebee is undefined
    x Payment.js:791
    asyncScriptLoaderHandleLoad async-script-loader.js:52
    React 3
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    asyncScriptLoaderHandleLoad async-script-loader.js:51
    r async-script-loader.js:113
    onload async-script-loader.js:161
    f async-script-loader.js:138
    onload async-script-loader.js:156
    componentDidMount async-script-loader.js:151
    React 2
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    unlisten Router.js:70
    r history.js:155
    notifyListeners history.js:173
    notifyListeners history.js:172
    M history.js:288
    push history.js:369
    confirmTransitionTo history.js:145
    push history.js:350
    d CreateOrganisationPage.js:36
    componentDidMount AccountProvider.js:37
    emit events.js:158
    trigger _store.js:72
    saved _store.js:59
    createOrganisation account-store.js:93
    promise callback*createOrganisation account-store.js:87
    dispatcherIndex account-store.js:490
    l main.js:58
    dispatch main.js:107
    dispatch main.js:103
    handleViewAction dispatcher.js:12
    createOrganisation app-actions.js:52
    onSubmit CreateOrganisationPage.js:74
    React 12
    unstable_runWithPriority scheduler.production.min.js:19
    React 11
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    unlisten Router.js:70
    r history.js:155
    notifyListeners history.js:173
    notifyListeners history.js:172
    M history.js:288
    replace history.js:402
    confirmTransitionTo history.js:145
    replace history.js:385
    r App.js:209
    componentDidMount AccountProvider.js:33
    emit events.js:158
    trigger _store.js:72
    loaded _store.js:38
Payment.js:791:4

My Flagsmith instance is using the self-hosted defaults, which has payments_enabled set to false.

4110-signup.mov

[kyle-ssg]

Hmm Im a bit confused how e2e wouldn't fail since it does exactly that, will take a look.

[kyle-ssg]

@matthewelwell this is resolved, I'm not sure if this is correct but it looks like none of our e2e use self hosted default environment variables (Flagsmith on flagsmith, project_selfhosted.js etc)

[rolodato]

Working for me now 👍