@remoteoss/remote-flows 0.0.2 → 0.0.4

package/README.md

@@ -8,16 +8,9 @@ Welcome to the `@remoteoss/remote-flows` package, a React library that provides
 
 - [Overview](#overview)
 - [Installation](#installation)
-- [Getting Started](#getting-started)
-  - [Basic Setup](#basic-setup)
-    - [Simple Cost calculator](#simple-cost-calculator)
-    - [Cost Calculator with default values and a custom disclaimer label](#cost-calculator-with-default-values-and-a-custom-disclaimer-label)
-    - [Cost calculator with results](#cost-calculator-with-results)
-    - [Cost calculator with button that exports results to pdf](#cost-calculator-with-button-that-exports-results-to-pdf)
 - [Components API](#components-api)
   - [RemoteFlows](#remoteflows)
-  - [CostCalculator](#costcalculator)
-  - [CostCalculatorResults](#costcalculatorresults)
+- [Docs](#docs)
 - [Authentication](#authentication)
 - [Styling Options](#styling-options)
   - [Using Default Styles](#using-default-styles)
@@ -33,288 +26,6 @@ Welcome to the `@remoteoss/remote-flows` package, a React library that provides
 npm install @remoteoss/remote-flows
 ```
 
-## Getting Started
-
-After installation, import the main CSS file in your application:
-
-```css
-@import '@remoteoss/remote-flows/index.css';
-```
-
-### Basic Setup
-
-#### Simple Cost calculator
-
-```tsx
-import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
-import './App.css';
-
-const estimationOptions = {
-  title: 'Estimate for a new company',
-  includeBenefits: true,
-  includeCostBreakdowns: true,
-};
-
-function CostCalculatorForm() {
-  return (
-    <CostCalculator
-      estimationOptions={estimationOptions}
-      defaultValues={{
-        countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
-        currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
-        salary: '50000',
-      }}
-      params={{
-        disclaimer: {
-          label: 'Remote Disclaimer',
-        },
-      }}
-      onSuccess={(response) => console.log({ response })}
-    />
-  );
-}
-
-export function BasicCostCalculator() {
-  const fetchToken = () => {
-    return fetch('/api/token')
-      .then((res) => res.json())
-      .then((data) => ({
-        accessToken: data.access_token,
-        expiresIn: data.expires_in,
-      }))
-      .catch((error) => {
-        console.error({ error });
-        throw error;
-      });
-  };
-
-  return (
-    <RemoteFlows auth={() => fetchToken()}>
-      <CostCalculatorForm />
-    </RemoteFlows>
-  );
-}
-```
-
-#### Cost Calculator with default values and a custom disclaimer label
-
-```tsx
-import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
-import './App.css';
-
-const estimationOptions = {
-  title: 'Estimate for a new company',
-  includeBenefits: true,
-  includeCostBreakdowns: true,
-};
-
-function CostCalculatorForm() {
-  return (
-    <CostCalculator
-      defaultValues={{
-        countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
-        currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
-        salary: '50000',
-      }}
-      params={{
-        disclaimer: {
-          label: 'Remote Disclaimer',
-        },
-      }}
-      estimationOptions={estimationOptions}
-      onSuccess={(response) => console.log({ response })}
-    />
-  );
-}
-
-export function BasicCostCalculatorWithDefaultValues() {
-  const fetchToken = () => {
-    return fetch('/api/token')
-      .then((res) => res.json())
-      .then((data) => ({
-        accessToken: data.access_token,
-        expiresIn: data.expires_in,
-      }))
-      .catch((error) => {
-        console.error({ error });
-        throw error;
-      });
-  };
-
-  return (
-    <RemoteFlows auth={() => fetchToken()}>
-      <CostCalculatorForm />
-    </RemoteFlows>
-  );
-}
-```
-
-#### Cost calculator with results
-
-```tsx
-import type { CostCalculatorEstimateResponse } from '@remoteoss/remote-flows';
-import {
-  CostCalculator,
-  CostCalculatorResults,
-  RemoteFlows,
-} from '@remoteoss/remote-flows';
-import { useState } from 'react';
-import './App.css';
-
-function CostCalculatorForm() {
-  const [estimations, setEstimations] =
-    useState<CostCalculatorEstimateResponse | null>(null);
-
-  const estimationOptions = {
-    title: 'Estimate for a new company',
-    includeBenefits: true,
-    includeCostBreakdowns: true,
-  };
-
-  return (
-    <>
-      <CostCalculator
-        estimationOptions={estimationOptions}
-        defaultValues={{
-          countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
-          currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
-          salary: '50000',
-        }}
-        params={{
-          disclaimer: {
-            label: 'Remote Disclaimer',
-          },
-        }}
-        onSuccess={(response) => {
-          setEstimations(response);
-        }}
-      />
-      {estimations && (
-        <CostCalculatorResults employmentData={estimations.data} />
-      )}
-    </>
-  );
-}
-
-export function CostCalculatoWithResults() {
-  const fetchToken = () => {
-    return fetch('/api/token')
-      .then((res) => res.json())
-      .then((data) => ({
-        accessToken: data.access_token,
-        expiresIn: data.expires_in,
-      }))
-      .catch((error) => {
-        console.error({ error });
-        throw error;
-      });
-  };
-
-  return (
-    <RemoteFlows auth={() => fetchToken()}>
-      <CostCalculatorForm />
-    </RemoteFlows>
-  );
-}
-```
-
-#### Cost calculator with button that exports results to pdf
-
-```tsx
-import type {
-  CostCalculatorEstimateResponse,
-  CostCalculatorEstimationFormValues,
-} from '@remoteoss/remote-flows';
-import {
-  buildCostCalculatorEstimationPayload,
-  CostCalculator,
-  RemoteFlows,
-  useCostCalculatorEstimationPdf,
-} from '@remoteoss/remote-flows';
-import { useState } from 'react';
-import './App.css';
-
-function CostCalculatorForm() {
-  const [estimations, setEstimations] =
-    useState<CostCalculatorEstimateResponse | null>(null);
-  const [payload, setPayload] =
-    useState<CostCalculatorEstimationFormValues | null>(null);
-
-  const estimationOptions = {
-    title: 'Estimate for a new company',
-    includeBenefits: true,
-    includeCostBreakdowns: true,
-  };
-
-  const exportPdfMutation = useCostCalculatorEstimationPdf();
-
-  const handleExportPdf = () => {
-    if (payload) {
-      exportPdfMutation.mutate(buildCostCalculatorEstimationPayload(payload), {
-        onSuccess: (response) => {
-          if (response?.data?.data?.content !== undefined) {
-            const a = document.createElement('a');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            a.href = response.data.data.content as any;
-            a.download = 'estimation.pdf';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-          }
-        },
-        onError: (error) => {
-          console.error({ error });
-        },
-      });
-    }
-  };
-
-  return (
-    <>
-      <CostCalculator
-        estimationOptions={estimationOptions}
-        defaultValues={{
-          countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
-          currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
-          salary: '50000',
-        }}
-        params={{
-          disclaimer: {
-            label: 'Remote Disclaimer',
-          },
-        }}
-        onSubmit={(payload) => setPayload(payload)}
-        onSuccess={(response) => {
-          setEstimations(response);
-        }}
-      />
-      {estimations && <button onClick={handleExportPdf}>Export as PDF</button>}
-    </>
-  );
-}
-
-export function CostCalculatorWithExportPdf() {
-  const fetchToken = () => {
-    return fetch('/api/token')
-      .then((res) => res.json())
-      .then((data) => ({
-        accessToken: data.access_token,
-        expiresIn: data.expires_in,
-      }))
-      .catch((error) => {
-        console.error({ error });
-        throw error;
-      });
-  };
-
-  return (
-    <RemoteFlows auth={() => fetchToken()}>
-      <CostCalculatorForm />
-    </RemoteFlows>
-  );
-}
-```
-
 ## Components API
 
 ### RemoteFlows
@@ -327,42 +38,11 @@ The `RemoteFlows` component serves as a provider for authentication and theming.
 | `isTestingProp` | `boolean`                                                   | No       | When `true`, connects to sandbox environment instead of production |
 | `theme`         | `ThemeOptions`                                              | No       | Custom theme configuration                                         |
 
-### CostCalculator
-
-The `CostCalculator` component renders a form for calculating employment costs.
-
-| Prop               | Type                                                 | Required | Description                                                                                  |
-| ------------------ | ---------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- |
-| `estimationParams` | object                                               | No       | Customization for the estimation response (see table below)                                  |
-| `defaultValues`    | object                                               | No       | Predefined form values (see table below)                                                     |
-| `params`           | `{ disclaimer?: { label?: string } }`                | No       | Additional configuration parameters                                                          |
-| `onSubmit`         | `(payload: CostCalculatorEstimateParams) => void`    | No       | Callback with the form payload sent to Remote API. Runs before submitting the form to Remote |
-| `onSuccess`        | `(response: CostCalculatorEstimateResponse) => void` | No       | Callback with the successful estimation data                                                 |
-| `onError`          | `(error: Error) => void`                             | No       | Error handling callback                                                                      |
-
-#### estimationParams Properties
-
-| Property                | Type      | Description                                                  |
-| ----------------------- | --------- | ------------------------------------------------------------ |
-| `title`                 | `string`  | Custom title for the estimation report                       |
-| `includeBenefits`       | `boolean` | If `true`, includes benefits information in the response     |
-| `includeCostBreakdowns` | `boolean` | If `true`, includes detailed cost breakdowns in the response |
-
-#### defaultValues Properties
-
-| Property            | Type     | Description                 |
-| ------------------- | -------- | --------------------------- |
-| `countryRegionSlug` | `string` | Pre-selected country/region |
-| `currencySlug`      | `string` | Pre-selected currency       |
-| `salary`            | `string` | Pre-filled salary amount    |
-
-### CostCalculatorResults
+## Docs
 
-A component to display cost calculation results.
+Visit the different different docs for each flow
 
-| Prop             | Type                                 | Required | Description                  |
-| ---------------- | ------------------------------------ | -------- | ---------------------------- |
-| `employmentData` | `CostCalculatorEstimateResponseData` | Yes      | The estimation response data |
+- [Cost Calculator Flow](./src/flows/CostCalculator/README.md)
 
 ## Authentication
 

package/dist/chunk-6RRSUL7Q.js

@@ -0,0 +1,2 @@
+import{a as u}from"./chunk-2AGPO366.js";import{c as T}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import{object as fe}from"yup";import{formDataBodySerializer as be}from"@hey-api/client-fetch";import{createClient as Q,createConfig as Y}from"@hey-api/client-fetch";var l=Q(Y({baseUrl:"https://gateway.remote.com/"}));var D=t(e=>(e.client??l).post({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/estimation",...e,headers:{"Content-Type":"application/json",...e?.headers}}),"postCreateEstimation");var G=t(e=>(e?.client??l).post({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/estimation-pdf",...e,headers:{"Content-Type":"application/json",...e?.headers}}),"postCreateEstimationPdf");var I=t(e=>(e.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/countries",...e}),"getIndexCountry");var v=t(e=>(e.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/cost-calculator/regions/{slug}/fields",...e}),"getShowRegionField");var S=t(e=>(e?.client??l).get({security:[{scheme:"bearer",type:"http"}],url:"/v1/company-currencies",...e}),"getIndexCompanyCurrency");import{createClient as se}from"@hey-api/client-fetch";import{QueryClient as ie,QueryClientProvider as le,useQuery as pe}from"@tanstack/react-query";import C,{createContext as ce,useContext as he,useRef as q}from"react";var U={staging:"https://gateway.niceremote.com",partners:"https://gateway.partners.remote-sandbox.com",production:"https://gateway.remote.com"};function y(e){let r=document.documentElement;Object.keys(e).forEach(n=>{let o=e[n];o&&r.style.setProperty(n,o)})}t(y,"setCssProperties");function $(e){let r={};return Object.keys(e).forEach(n=>{r[`--${n}`]=e[n]}),r}t($,"mapThemeColors");function X(e){return{"--spacing":e}}t(X,"mapThemeSpacing");function Z(e){return{"--radius":e}}t(Z,"mapThemeBorderRadius");function ee(e){return{"--fontSizeBase":e.fontSizeBase}}t(ee,"mapThemeFont");function k(e){e?.colors&&y($(e.colors)),e?.spacing&&y(X(e.spacing)),e?.borderRadius&&y(Z(e.borderRadius)),e?.font&&y(ee(e.font))}t(k,"applyTheme");import te,{createContext as re,useEffect as oe,useMemo as ne}from"react";var ae=re({theme:{}});function B(e){oe(()=>{e.theme&&Object.keys(e.theme).length>0&&k(e.theme)},[e.theme]);let r=ne(()=>({theme:e.theme}),[e.theme]);return te.createElement(ae.Provider,{value:r},e.children)}t(B,"ThemeProvider");var de=new ie,A=ce({client:null}),h=t(()=>he(A),"useClient");function me({children:e,auth:r,isTestingMode:n}){let o=q(null),{refetch:d}=pe({queryKey:["auth"],queryFn:r,enabled:!1}),p=n?U.partners:"https://gateway.remote.com",m=q(se({...l.getConfig(),baseUrl:p,auth:t(async()=>{function w(i){return!i||Date.now()+6e4>i}if(t(w,"hasTokenExpired"),!o.current||w(o.current.expiresAt)){let{data:i}=await d();i&&(o.current={accessToken:i.accessToken,expiresAt:Date.now()+i.expiresIn*1e3})}return o.current?.accessToken},"auth")}));return C.createElement(A.Provider,{value:{client:m.current}},e)}t(me,"RemoteFlowContextWrapper");function Ne({auth:e,children:r,isTestingMode:n=!1,theme:o}){return C.createElement(le,{client:de},C.createElement(me,{isTestingMode:n,auth:e},C.createElement(B,{theme:o},r)))}t(Ne,"RemoteFlows");import{createHeadlessForm as ue}from"@remoteoss/json-schema-form";import{useMutation as j,useQuery as O}from"@tanstack/react-query";import{useState as F}from"react";import{string as _}from"yup";var Ee=t(({includePremiumBenefits:e})=>{let{client:r}=h();return O({queryKey:["cost-calculator-countries",e],queryFn:t(()=>I({client:r,headers:{Authorization:""},query:{include_premium_benefits:e}}),"queryFn"),select:t(n=>n.data?.data.map(o=>({value:o.region_slug,label:o.name,childRegions:o.child_regions,hasAdditionalFields:o.has_additional_fields,regionSlug:o.region_slug})),"select")})},"useCostCalculatorCountries"),ye=t(()=>{let{client:e}=h();return O({queryKey:["company-currencies"],queryFn:t(()=>S({client:e,headers:{Authorization:""}}),"queryFn"),select:t(r=>r.data?.data?.company_currencies.map(n=>({value:n.slug,label:n.code})),"select")})},"useCompanyCurrencies"),Ce=t(()=>{let{client:e}=h();return j({mutationFn:t(r=>D({client:e,headers:{Authorization:""},body:r}),"mutationFn")})},"useCostCalculatorEstimation"),it=t(()=>{let{client:e}=h();return j({mutationFn:t(r=>G({client:e,headers:{Authorization:""},body:r}),"mutationFn")})},"useCostCalculatorEstimationPdf"),we=t((e,{includePremiumBenefits:r})=>{let{client:n}=h();return O({queryKey:["cost-calculator-region-fields",e,r],queryFn:t(()=>v({client:n,headers:{Authorization:""},path:{slug:e},query:{include_premium_benefits:r}}),"queryFn"),enabled:!!e,select:t(({data:o})=>ue(o?.data?.schema||{},{strictInputType:!1}),"select")})},"useRegionFields"),x={title:"Estimation",includeBenefits:!1,includeCostBreakdowns:!1,includePremiumBenefits:!1},lt=t(({defaultRegion:e,estimationOptions:r}={estimationOptions:x})=>{let[n,o]=F(e),[d,p]=F(),{data:m,isLoading:w}=Ee({includePremiumBenefits:r.includePremiumBenefits}),{data:i,isLoading:W}=ye(),M=n||d?.value,{data:P,isLoading:z}=we(M,{includePremiumBenefits:r.includePremiumBenefits}),b=Ce();async function N(a){try{await g.validate(a,{abortEarly:!1})}catch(s){return{data:null,error:s}}return new Promise((s,f)=>{b.mutate(L(a,r),{onSuccess:t(E=>{E.data?s({data:E.data,error:null}):s({data:null,error:new Error("Something went wrong. Please try again later.")})},"onSuccess"),onError:t(E=>{f({data:null,error:E})},"onError")})})}t(N,"onSubmit");function H(a){let s=m?.find(({value:f})=>f===a);s&&s.childRegions.length===0&&s.hasAdditionalFields?o(s.regionSlug):o(void 0),p(s)}t(H,"onCountryChange");function K(a){o(a)}t(K,"onRegionChange");let c=u.find(a=>a.name==="region");if(c){let a=d?.childRegions.map(s=>({value:s.slug,label:s.name}))??[];c.options=a,c.isVisible=a.length>0,c.required=a.length>0,c.onChange=K,c.schema=a.length>0?_().required("Currency is required"):_()}if(i){let a=u.find(s=>s.name==="currency");a&&(a.options=i)}if(m){let a=u.find(s=>s.name==="country");a&&(a.options=m,a.onChange=H)}let J=t(()=>{p(void 0),o(e)},"resetForm"),R=[...u,...P?.fields||[]],g=V(R);return{stepState:{current:0,total:1,isLastStep:!0},fields:R,validationSchema:g,handleValidation:P?.handleValidation,isSubmitting:b.isPending,isLoading:w&&W&&z,onSubmit:N,resetForm:J}},"useCostCalculator");function V(e){let r=e.reduce((n,o)=>(n[o.name]=o.schema,n),{});return fe(r)}t(V,"buildValidationSchema");function Te(e){let r="benefit-";return Object.keys(e).reduce((n,o)=>{let p={benefit_group_slug:o.replace(r,""),benefit_tier_slug:e[o]};return[...n,p]},[])}t(Te,"formatBenefits");function L(e,r=x){return{employer_currency_slug:e.currency,include_benefits:r.includeBenefits,include_cost_breakdowns:r.includeCostBreakdowns,include_premium_benefits:r.includePremiumBenefits,employments:[{region_slug:e.region||e.country,annual_gross_salary:T(e.salary),annual_gross_salary_in_employer_currency:T(e.salary),employment_term:e.contract_duration_type??"fixed",title:r.title,regional_to_employer_exchange_rate:"1",age:e.age??void 0,...e.benefits&&{benefits:Te(e.benefits)}}]}}t(L,"buildPayload");export{Ne as a,V as b,L as c,it as d,x as e,lt as f};
+//# sourceMappingURL=chunk-6RRSUL7Q.js.map