Skip to main content

Geekle Supply App

This is the Supply App of the Geekle package. It is used by organizations to manage their jobs and applications.

Main​

main.tsx is where the App starts. We instantiate a new GeekleSupplyAppTemplate with it's options and dependencies; then initialize and render a React App.

Dependencies​

The dependencies are services and API's needed for the Supply App.

  • authApi: The auth API for authentication
  • catalogApi: The Catalog API service for jobs
  • chatApi: Chat API for messaging between organizations and users
  • chatSocketApi: Web sockets for chat
  • demandSiteOrganizationUrl: URL of the organization API of the demand site
  • demandSiteProductUrl: URL of the product API of the demand site
  • fileUploader: Google Cloud Bucket for uploading images
  • orderApi: Order API service for job applications
  • organizationApi: The organization API service
  • paymentApi: Payment service for supply organization payments
  • sessionService: The service which handles the session management
  • userApi: The user API service

Opts​

Block Pages​

The blockPages option is one of the main options. Here are the components used for the Supply site:

  • createRedirect: Simple redirect to the top index page

    • Settings
      • options: Navigation options for the redirect
      • to: Name of the blockPage to redirect to
    • Validators
      • None

  • createSections: Landing page sections

    • Settings
      • components: An array of components to display on the landing page
        • createLandingHero: Landing page hero section
          • Settings
            • byline: ReactNode component to display the byline text
            • imageUrl: Image URL for the hero section
            • showSecondaryText: Boolean to display secondary text
            • showTertiaryText: Boolean to display tertiary text
            • signupRoute: The sign up page route
        • createLandingMerits: Display merit items on landing page
          • Settings
            • meritItems: Merit items to display on the landing page
            • signupRoute: The sign up page route
        • createLandingHowToUse: How to use section of the landing page
          • Settings
            • signupRoute: The sign up page route
            • stepItems: Steps on how to use items
        • createLandingFAQ: FAQ section
          • Settings
            • faqItems: The FAQ items
            • signupRoute: The sign up page route
    • Validators
      • None

  • createOrganizationApplicationCreate: Organization application form

    • Settings
      • organizationApi: The organizationAPI service
      • privacyPolicyUrl: The URL of the private policy page
      • successRoute: The route of the page upon successful sign up
      • userAgreementUrl: The URL of the user agreement page
    • Validators
      • None

  • createOrganizationApplicationComplete:

    • Settings
      • returnToTopRoute: The route to the landing page upon application completion
    • Validators
      • None

  • createLogin: THe login form

    • Settings
      • alreadyVerifiedRoute: Route to page when user is logged in and verified
      • authApi: The Authentication API service
      • showSignupLink: The link to sign up page
      • userApi: The User API service
    • Validators
      • None

  • createResetPasswordRequest: Email form to request password reset

    • Settings
      • userApi: The User API service
    • Validators
      • None

  • createResetPasswordSubmit: Reset password form

    • Settings
      • passwordValidateStrategy: The strategy to validate the password
      • userApi: The User API service
    • Validators
      • None

  • createResetPasswordSuccess: Simple page after successful password reset

    • Settings
      • userApi: The User API service
    • Validators
      • None

  • createLogout: Logout page

    • Settings
      • authApi: The Authentication API service
      • logoutRedirect: Page to redirect to upon logging out
    • Validators
      • None

  • createAcceptInvitation: Create user form after accepting an invitation

    • Settings
      • passwordValidateStrategy: The strategy to validate the password
      • redirectAfterAcceptRoute: The page to redirect to upon invitation acceptance
      • userApi: The User API service
      • userTypeId: The user type ID
    • Validators
      • isNotLoggedIn: When the user is not logged in, it redirects to the application index page

  • createProductsListForTenantOrganization: Products/jobs list for the specific organization

    • Settings
      • catalogApi: The Catalog API service for the jobs created by organization
      • createProductRoute: The page to create a new product/job
      • showProductRoute: The details page of the product/job
      • updateProductRoute: The edit page of the product/job
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered
      • needsPaymentSetup: Validates if user needs to setup payment details

  • createShowProductDetailPage: Display the details of the product/job

    • Settings
      • catalogApi: The Catalog API service for the jobs created by organization
      • editProductRoute: The edit page of the product/job
      • demandSiteProductUrl: The demand site product/job URL
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered

  • createCreateProductForTenant: Create product form page

    • Settings
      • attributeName: The name of the attribute to retrieve from
      • catalogApi: The Catalog API service for the jobs created by organization
      • fileUploader: Google Cloud Bucket for uploading images
      • successRoute: The route of the page to go to upon successful product create
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered
      • needsPaymentSetup: Validates if user needs to setup payment details

  • createUpdateProductForTenant: Update product form page

    • Settings
      • attributeName: The name of the attribute to retrieve from
      • catalogApi: The Catalog API service for the jobs created by organization
      • fileUploader: Google Cloud Bucket for uploading images
      • successRoute: The route of the page to go to upon successful product update
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered
      • needsPaymentSetup: Validates if user needs to setup payment details

  • createOrdersListForTenantOrganization: List of orders/job applications page

    • Settings
      • chatApi: The Chat API service
      • chatFeature: The route of the messages page
      • orderApi: The Order API service to manage job applications
      • showOrderRoute: The order/job application
    • Validators

  • createShowOrderDetailPage: Show order/job application details page

    • Settings
      • chatApi: The Chat API service
      • chatFeature: The route of the messages page
      • catalogApi: The Catalog API service for the jobs created by organization
      • orderApi: The Order API service to manage job applications
      • productShowPageRoute: The route to the product details page
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered
      • needsPaymentSetup: Validates if user needs to setup payment details

  • createListMessagesAndTopicsForTenantOrganizationBlock: List page of messages and topics for organization

    • Settings
      • chatApi: The Chat API service
      • organizationApi: The organizationAPI service
      • orderShowRoute: The order/job application details page
      • organizationShowRoute: The organization details page
      • socketApi: Web socket API service
      • topicShowRoute: The topics details page
      • userApi: The User API service
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered
      • needsPaymentSetup: Validates if user needs to setup payment details

  • createMyOrganizationPage: Displays user's organization page

    • Settings
      • organizationApi: The organizationAPI service
      • demandSiteOrganizationUrl: Organization URL on the demand site
      • editCompanyRoute: The edit organization/company page
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered

  • createOrganizationUpdate: Organization update page

    • Settings
      • organizationApi: The organizationAPI service
      • successRoute: The page to go to upon successful organization update
    • Validators
      • None

  • createDashboardLink: Get payment dashboard link

    • Settings
      • paymentApi: Payment service for supply organization payments
    • Validators
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered

  • createOrganizationRegistration: Organization registration form page

    • Settings
      • organizationApi: The organizationAPI service
      • successRoute: The page to go to upon successful organization registration
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations

  • createListSettingsPage: User settings list page

    • Settings
      • changeEmailRoute: The settings page to update their email
      • changeNameRoute: The settings page to update their name
      • changePasswordRoute: The settings page to update their password
      • changePhoneNumberRoute: The settings page to update their phone number
      • userApi: The User API service
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page

  • createChangeEmail: User settings to edit their email

    • Settings
      • cancelRoute: The page to go to upon cancelling settings update
      • successRoute: The page to go to upon successful settings update
      • userApi: The User API service
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page

  • createChangeName: User settings to edit their name

    • Settings
      • cancelRoute: The page to go to upon cancelling settings update
      • successRoute: The page to go to upon successful settings update
      • userApi: The User API service
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page

  • createChangePhoneNumber: User settings to edit their phone number

    • Settings
      • cancelRoute: The page to go to upon cancelling settings update
      • successRoute: The page to go to upon successful settings update
      • userApi: The User API service
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page

  • createVerifyChangeEmailSuccess: Success page when updating email address

    • Settings
      • userApi: The User API service
      • verifiedRoute: Page to go to upon verification
    • Validators
      • None

  • createDashboardLink:

    • Settings
      • paymentApi: Payment service for supply organization payments
    • Validators
      • None

  • createChangePassword:

    • Settings
      • cancelRoute: The page to go to upon cancelling password change
      • successRoute: The page to go to upon successful password change
      • forgotPasswordUrl: Forget password URL
      • userApi: The User API service
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page

  • createPaymentPage: Setup payment settings

    • Settings
      • dashboardRoute: Route to payment dashboard page
    • Validators
      • isLoggedIn: When the user is not logged in, it redirects to the login page
      • selectTenantFromOrganization: Validates and sets tenant for user based on their organizations
      • isTenantOrganizationRegistered: Makes sure that the organization is registered

Validators​

Validators are run before the page renders. If the validator fails, the page does not render.

  • needsPaymentSetup: Validates if user needs to setup payment details
    • Scenarios
      • User has not paid/setup payment: Navigate to notValidRedirect path
      • User has paid or is in trial phase: Validator passed, display page

Payment​

Inside the supply frontend template, we can add the payment validator that checks our backend property needs_payment_method_setup.

{
    component: createProductsListForTenantOrganization({
        catalogApi: dependencies.catalogApi,
        createProductRoute: 'jobs.create',
        showProductRoute: 'jobs.show',
        updateProductRoute: 'jobs.update',
    }),
    name: 'jobs.index',
    pageTitle: (t) => t('Geekle:jobsTitle'),
    path: '/jobs',
    validators: {
    //...other validators
    needsPaymentSetup: requiresPayment({
        notValidRedirect: 'payment.index',
        organizationApi: dependencies.organizationApi,
        }),     
},

In this example from the template, it has needsPaymentSetup validator attached to this route. Which means you are required to have needs_payment_method_setup set to false. If it is set to true, you will be redirect to the route payment.index.

The logic can be changed here ./validators/requiresPayment.