Feature/create company

example/api/get_token.js

@@ -47,6 +47,53 @@ async function fetchAccessToken() {
   return { accessToken: data.access_token, expiresIn: data.expires_in };
 }
 
+async function fetchClientCredentialsAccessToken() {
+  const {
+    VITE_CLIENT_ID,
+    VITE_CLIENT_SECRET,
+    VITE_REMOTE_GATEWAY,
+    VITE_REFRESH_TOKEN,
+  } = process.env;
+
+  // for local development, we don't need a client secret
+  if (
+    !VITE_CLIENT_ID ||
+    (!VITE_CLIENT_SECRET && VITE_REMOTE_GATEWAY !== 'local') ||
+    !VITE_REMOTE_GATEWAY ||
+    !VITE_REFRESH_TOKEN
+  ) {
+    throw new Error(
+      'Missing VITE_CLIENT_ID, VITE_CLIENT_SECRET, VITE_REMOTE_GATEWAY, or VITE_REFRESH_TOKEN',
+    );
+  }
+
+  const gatewayUrl = buildGatewayURL();
+
+  const encodedCredentials = Buffer.from(
+    `${VITE_CLIENT_ID}:${VITE_CLIENT_SECRET}`,
+  ).toString('base64');
+
+  const response = await fetch(`${gatewayUrl}/auth/oauth2/token`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Authorization: `Basic ${encodedCredentials}`,
+    },
+    body: new URLSearchParams({
+      grant_type: 'client_credentials',
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`HTTP ${response.status}: ${errorText}`);
+  }
+
+  const data = await response.json();
+  return { accessToken: data.access_token, expiresIn: data.expires_in };
+}
+
+
 // Express route handler
 async function getToken(req, res) {
   const { NODE_ENV } = process.env;
@@ -70,4 +117,4 @@ async function getToken(req, res) {
   }
 }
 
-module.exports = { getToken, fetchAccessToken };
+module.exports = { getToken, fetchAccessToken, fetchClientCredentialsAccessToken };

example/api/proxy.js

@@ -1,5 +1,5 @@
 const axios = require('axios');
-const { fetchAccessToken } = require('./get_token.js');
+const { fetchClientCredentialsAccessToken, fetchAccessToken } = require('./get_token.js');
 const { buildGatewayURL } = require('./utils.js');
 
 /**
@@ -38,9 +38,16 @@ async function createProxyRequest(path, method = 'GET', options = {}) {
   if (stream) {
     delete requestConfig.headers['Content-Type'];
   }
+  console.log("REQUIRES AUTH", requiresAuth)
 
   // Add authentication if required
-  if (requiresAuth) {
+  if (requiresAuth && (path.startsWith('/v1/countries') || path.startsWith('/v1/companies') || path.startsWith('/v1/company-currencies'))) {
+    const { accessToken } = await fetchClientCredentialsAccessToken();
+    requestConfig.headers.Authorization = `Bearer ${accessToken}`;
+
+
+  }
+    else if (requiresAuth) {
     const { accessToken } = await fetchAccessToken();
     requestConfig.headers.Authorization = `Bearer ${accessToken}`;
   }
@@ -58,6 +65,7 @@ function createProxyMiddleware(requiresAuth = true) {
     const isMultipart = req.headers['content-type']?.includes(
       'multipart/form-data',
     );
+    console.log("PROXYING", req.originalUrl)
 
     try {
       const response = await createProxyRequest(req.originalUrl, req.method, {

example/flake.nix

@@ -15,7 +15,7 @@
       in {
         devShells.default = pkgs.mkShell {
           buildInputs = [
-            pkgs.nodejs_20 or pkgs.nodejs_latest
+            pkgs.nodejs_24 or pkgs.nodejs_latest
             pkgs.playwright-driver.browsers
             pkgs.playwright
           ];

example/src/App.tsx

@@ -44,7 +44,9 @@ import CostCalculatorWithReplaceableComponentsCode from './CostCalculatorWithRep
 import TerminationCode from './Termination?raw';
 import ContractAmendmentCode from './ContractAmendment?raw';
 import { ContractorOnboardingForm } from './ContractorOnboarding';
+import { CreateCompanyForm } from './CreateCompany';
 import ContractorOnboardingCode from './ContractorOnboarding?raw';
+import CreateCompanyCode from './CreateCompany?raw';
 
 const costCalculatorDemos = [
   {
@@ -148,6 +150,14 @@ const additionalDemos = [
     component: ContractorOnboardingForm,
     sourceCode: ContractorOnboardingCode,
   },
+  {
+    id: 'create-company',
+    title: 'Create Company',
+    description: 'Create a company',
+    component: CreateCompanyForm,
+    sourceCode: CreateCompanyCode,
+  },
+
 ];
 
 const demoStructure = [

example/src/CreateCompany.tsx

@@ -0,0 +1,229 @@
+import {
+  SelectCountrySuccess,
+  SelectCountryFormPayload,
+  NormalizedFieldError,
+  CreateCompanyFlow,
+  CreateCompanyRenderProps,
+  JSFCustomComponentProps,
+  CompanyAddressDetailsFormPayload,
+  CompanyAddressDetailsSuccess,
+} from '@remoteoss/remote-flows';
+import {
+  Card,
+  Tabs,
+  TabsTrigger,
+  TabsList,
+} from '@remoteoss/remote-flows/internals';
+import React, { useState } from 'react';
+import { RemoteFlows } from './RemoteFlows';
+import { AlertError } from './AlertError';
+import './css/main.css';
+import './css/contractor-onboarding.css';
+
+const Switcher = (props: JSFCustomComponentProps) => {
+  return (
+    <Tabs
+      defaultValue={props.options?.[0].value}
+      onValueChange={(value) => {
+        props.setValue(value);
+      }}
+    >
+      <TabsList>
+        {props.options?.map((option) => (
+          <TabsTrigger key={option.value} value={option.value}>
+            {option.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+};
+
+const STEPS = [
+  'Select Country',
+  'Address Details',
+];
+
+type MultiStepFormProps = {
+  createCompanyBag: CreateCompanyRenderProps['createCompanyBag'];
+  components: CreateCompanyRenderProps['components'];
+};
+
+const MultiStepForm = ({
+  components,
+  createCompanyBag,
+}: MultiStepFormProps) => {
+  const {
+    SubmitButton,
+    SelectCountryStep,
+    AddressDetailsStep,
+  } = components;
+  const [errors, setErrors] = useState<{
+    apiError: string;
+    fieldErrors: NormalizedFieldError[];
+  }>({
+    apiError: '',
+    fieldErrors: [],
+  });
+
+  switch (createCompanyBag.stepState.currentStep.name) {
+    case 'select_country':
+      return (
+        <div className='contractor-onboarding-form-layout'>
+          <SelectCountryStep
+            onSubmit={(payload: SelectCountryFormPayload) =>
+              console.log('payload', payload)
+            }
+            onSuccess={(response: SelectCountrySuccess) =>
+              console.log('response', response)
+            }
+            onError={({
+              error,
+              fieldErrors,
+            }: {
+              error: Error;
+              fieldErrors: NormalizedFieldError[];
+            }) => setErrors({ apiError: error.message, fieldErrors })}
+          />
+          <AlertError errors={errors} />
+          <div className='contractor-onboarding-buttons-container'>
+            <SubmitButton className='submit-button' variant='outline'>
+              Continue
+            </SubmitButton>
+          </div>
+        </div>
+      );
+    case 'address_details':
+      return (
+        <div className='contractor-onboarding-form-layout'>
+          <AddressDetailsStep
+            onSubmit={(payload: CompanyAddressDetailsFormPayload) =>
+              console.log('address details payload', payload)
+            }
+            onSuccess={(response: CompanyAddressDetailsSuccess) =>
+              console.log('address details response', response)
+            }
+            onError={({
+              error,
+              fieldErrors,
+            }: {
+              error: Error;
+              fieldErrors: NormalizedFieldError[];
+            }) => setErrors({ apiError: error.message, fieldErrors })}
+          />
+          <AlertError errors={errors} />
+          <div className='contractor-onboarding-buttons-container'>
+            <button
+              type='button'
+              className='back-button'
+              onClick={() => {
+                createCompanyBag.back();
+                setErrors({ apiError: '', fieldErrors: [] });
+              }}
+            >
+              Back
+            </button>
+            <SubmitButton className='submit-button' variant='outline'>
+              Complete
+            </SubmitButton>
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const CreateCompanyRender = ({
+  createCompanyBag,
+  components,
+}: MultiStepFormProps) => {
+  const currentStepIndex = createCompanyBag.stepState.currentStep.index;
+
+  return (
+    <>
+      <div className='steps-contractor-onboarding-navigation'>
+        <ul>
+          {STEPS.map((step, index) => (
+            <li
+              key={index}
+              className={`step-contractor-onboarding-item ${index === currentStepIndex ? 'active' : ''}`}
+            >
+              {index + 1}. {step}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {createCompanyBag.isLoading ? (
+        <div className='contractor-onboarding-form-layout'>
+          <p>Loading...</p>
+        </div>
+      ) : (
+        <MultiStepForm
+          createCompanyBag={createCompanyBag}
+          components={components}
+        />
+      )}
+    </>
+  );
+};
+
+const Header = () => {
+  return (
+    <div className='contractor-onboarding-header'>
+      <h1>Create Company</h1>
+      <p>Create a new company and complete the address details.</p>
+    </div>
+  );
+};
+
+type CreateCompanyFormData = {
+  countryCode?: string;
+};
+
+export const CreateCompanyWithProps = ({
+}: CreateCompanyFormData) => {
+  return (
+    <div className='contractor-onboarding-container'>
+      <RemoteFlows
+        authType='company-manager'
+        proxy={{ url: window.location.origin }}
+      >
+        <div className='contractor-onboarding-content'>
+          <Header />
+          <Card className='px-0 py-0'>
+            <CreateCompanyFlow
+              render={CreateCompanyRender}
+              options={{
+              }}
+            />
+          </Card>
+        </div>
+      </RemoteFlows>
+    </div>
+  );
+};
+
+export const CreateCompanyForm = () => {
+  const [formData] = useState<CreateCompanyFormData>({
+  });
+  const [showOnboarding, setShowOnboarding] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setShowOnboarding(true);
+  };
+
+  if (showOnboarding) {
+    return <CreateCompanyWithProps {...formData} />;
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className='onboarding-form-container'>
+      <button type='submit' className='onboarding-form-button'>
+        Create company
+      </button>
+    </form>
+  );
+};