https://docs.bookla.com/assets/js/998968a9.02afeb57.js

1"use strict";(self.webpackChunkbookla_platform_docs=self.webpackChunkbookla_platform_docs||[]).push([[1856],{4255:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var s=t(74848),i=t(28453);const o={sidebar_position:1,title:"React Client SDK"},r="React Client SDK for Bookla",a={id:"development/sdks/react/index",title:"React Client SDK",description:"The Bookla React Client SDK provides a TypeScript/JavaScript interface for interacting with the Bookla Platform API. This SDK simplifies the integration of Bookla's booking system into your React applications by providing type-safe methods and intuitive abstractions.",source:"@site/docs/development/sdks/react/index.mdx",sourceDirName:"development/sdks/react",slug:"/development/sdks/react/",permalink:"/docs/development/sdks/react/",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"React Client SDK"},sidebar:"tutorialSidebar",previous:{title:"SDKs",permalink:"/docs/development/sdks/"},next:{title:"Import Bookings to Google Sheet",permalink:"/docs/development/Google-Sheet/Import-bookings"}},c={},l=[{value:"Getting Started",id:"getting-started",level:2},{value:"Installation",id:"installation",level:3},{value:"Basic Setup",id:"basic-setup",level:3},{value:"Authentication",id:"authentication",level:3},{value:"Core Features",id:"core-features",level:2},{value:"Managing Bookings",id:"managing-bookings",level:3},{value:"Working with Services",id:"working-with-services",level:3},{value:"Managing Resources",id:"managing-resources",level:3},{value:"Subscription Management",id:"subscription-management",level:3},{value:"Advanced Features",id:"advanced-features",level:2},{value:"Request Cancellation",id:"request-cancellation",level:3},{value:"Request/Response Interceptors",id:"requestresponse-interceptors",level:3},{value:"Error Handling",id:"error-handling",level:3},{value:"TypeScript Integration",id:"typescript-integration",level:3},{value:"License",id:"license",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"react-client-sdk-for-bookla",children:"React Client SDK for Bookla"})}),"\n",(0,s.jsx)(n.p,{children:"The Bookla React Client SDK provides a TypeScript/JavaScript interface for interacting with the Bookla Platform API. This SDK simplifies the integration of Bookla's booking system into your React applications by providing type-safe methods and intuitive abstractions."}),"\n",(0,s.jsx)(n.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,s.jsx)(n.h3,{id:"installation",children:"Installation"}),"\n",(0,s.jsx)(n.p,{children:"First, install the SDK using npm:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install @bookla/react-client-sdk\n"})}),"\n",(0,s.jsx)(n.h3,{id:"basic-setup",children:"Basic Setup"}),"\n",(0,s.jsx)(n.p,{children:"Initialize the SDK by creating an instance with your configuration. The SDK offers both US and EU endpoints to ensure optimal performance based on your location:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { BooklaSDK } from '@bookla/react-client-sdk';\n\nconst sdk = new BooklaSDK({\n    // Choose the appropriate regional endpoint\n    apiUrl: 'https://us.bookla.com', // or 'https://eu.bookla.com'\n    apiKey: 'your-api-key',\n\n    // Optional configurations for fine-tuning behavior\n    timeout: 30000,  // Request timeout in milliseconds\n    debug: false,    // Enable debug logging for development\n\n    // Configure automatic retry behavior for transient failures\n    retry: {\n        maxAttempts: 3,\n        delayMs: 1000,\n        statusCodesToRetry: [408, 429, 500, 502, 503, 504]\n    }\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"authentication",children:"Authentication"}),"\n",(0,s.jsxs)(n.p,{children:["The SDK supports a token-based authentication system. You need to implement ",(0,s.jsx)(n.a,{href:"https://docs.bookla.com/rest-api-docs/#tag/ClientAuth",children:"backend-to-backend authentication"})," for your clients to obtain the necessary tokens.\nHere's how to manage authentication states:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// After successful client authentication, store the tokens\nsdk.setAuthTokens({\n    accessToken: 'access-token',\n    refreshToken: 'refresh-token',\n    expiresAt: '2024-01-02T12:00:00Z'\n});\n\n// Check authentication status before operations\nconst authState = sdk.isAuthenticated();\nif (authState.isAuthenticated) {\n    console.log('Session expires:', new Date(authState.expiresAt));\n} else {\n    console.log('Need to authenticate');\n}\n\n// Clear authentication when logging out\nsdk.clearAuth();\n"})}),"\n",(0,s.jsx)(n.h2,{id:"core-features",children:"Core Features"}),"\n",(0,s.jsx)(n.h3,{id:"managing-bookings",children:"Managing Bookings"}),"\n",(0,s.jsx)(n.p,{children:"The booking system is the heart of the SDK. Here's how to handle common booking operations:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// Create a new booking\nconst booking = await sdk.bookings.request({\n    companyID: 'company-id',\n    serviceID: 'service-id',\n    resourceID: 'resource-id',\n    startTime: '2024-01-02T10:00:00Z',\n    spots: 1,\n\n    // Pass guest client data if you don't need client authentication\n    // In this case, each booking will be associated with a new guest client\n    client: {\

1n        email: '[email protected]',\n        firstName: 'John',\n        lastName: 'Doe'\n    }\n});\n\n// Retrieve a list of bookings\nconst bookings = await sdk.bookings.list();\n\n// Get details of a specific booking\nconst bookingDetails = await sdk.bookings.get('booking-id');\n\n// Cancel a booking with a reason\nawait sdk.bookings.cancel('booking-id', 'Schedule conflict');\n"})}),"\n",(0,s.jsx)(n.h3,{id:"working-with-services",children:"Working with Services"}),"\n",(0,s.jsx)(n.p,{children:"Services represent the different offerings available for booking:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// Get all available services for a company\nconst services = await sdk.services.list('company-id');\n\n// Get detailed information about a specific service\nconst service = await sdk.services.get('company-id', 'service-id');\n\n// Check available time slots for a service\nconst availableTimes = await sdk.services.getTimes('company-id', 'service-id', {\n    from: '2024-01-02T00:00:00Z',\n    to: '2024-01-02T23:59:59Z',\n    duration: 'PT1H',\n    spots: 1\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"managing-resources",children:"Managing Resources"}),"\n",(0,s.jsx)(n.p,{children:"Resources represent the bookable entities in your system:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// List all resources for a company\nconst resources = await sdk.resources.list('company-id');\n\n// Get detailed information about a specific resource\nconst resource = await sdk.resources.get('company-id', 'resource-id');\n"})}),"\n",(0,s.jsx)(n.h3,{id:"subscription-management",children:"Subscription Management"}),"\n",(0,s.jsx)(n.p,{children:"For businesses offering subscription-based services:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// View available subscription plans\nconst subscriptions = await sdk.subscriptions.getAvailableSubscriptions('company-id');\n\n// Add subscriptions to shopping cart\nawait sdk.subscriptions.addToCart('company-id', {\n    items: [{ subscriptionID: 'subscription-id' }]\n});\n\n// View current cart contents\nconst cart = await sdk.subscriptions.getCart('company-id');\n\n// Complete purchase\nconst purchase = await sdk.subscriptions.checkout('company-id');\n\n// View purchase history\nconst purchases = await sdk.subscriptions.getPurchases('company-id');\n"})}),"\n",(0,s.jsx)(n.h2,{id:"advanced-features",children:"Advanced Features"}),"\n",(0,s.jsx)(n.h3,{id:"request-cancellation",children:"Request Cancellation"}),"\n",(0,s.jsx)(n.p,{children:"The SDK supports cancellation of in-flight requests, which is crucial for maintaining a responsive user interface:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// Create a cancellation token\nconst cancelToken = sdk.createCancelToken();\n\ntry {\n    // Use the token in a request\n    const bookings = await sdk.bookings.list({ cancelToken });\n\n    // Cancel the request if needed\n    cancelToken.cancel();\n} catch (error) {\n    if (sdk.isCancelledError(error)) {\n        console.log('Request was cancelled');\n    }\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"requestresponse-interceptors",children:"Request/Response Interceptors"}),"\n",(0,s.jsx)(n.p,{children:"Interceptors allow you to modify requests and responses globally:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"// Add custom headers to all requests\nconst removeRequestInterceptor = sdk.interceptors.request.use(async (config) => {\n    config.headers['Custom-Header'] = 'value';\n    return config;\n});\n\n// Process all responses\nconst removeResponseInterceptor = sdk.interceptors.response.use(async (response) => {\n    // Add custom processing here\n    return response;\n});\n\n// Clean up interceptors when no longer needed\nremoveRequestInterceptor();\nremoveResponseInterceptor();\n"})}),"\n",(0,s.jsx)(n.h3,{id:"error-handling",children:"Error Handling"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides structured error handling with specific error types:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"try {\n    await sdk.bookings.request({\n        // Invalid booking parameters\n    });\n} catch (error) {\n    if (error instanceof BooklaValidationError) {\n        // Handle validation errors\n        console.error('Invalid input:', error.details);\n    } else if (error instanceof BooklaError) {\n        // Handle API errors\n        console.error('API error:', {\n            message: error.message,\n            code: error.code,\n            status: error.status\n        });\n    }

1 else {\n        // Handle unexpected errors\n        console.error('Unexpected error:', error);\n    }\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"typescript-integration",children:"TypeScript Integration"}),"\n",(0,s.jsx)(n.p,{children:"The SDK provides comprehensive TypeScript definitions for all its functionality:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import {\n    RequestBookingRequest,\n    BookingResponse,\n    ServiceType,\n    BookingStatus\n} from '@bookla/react-client-sdk';\n\n// All methods and properties are fully typed\nconst booking: BookingResponse = await sdk.bookings.get('booking-id');\n"})}),"\n",(0,s.jsx)(n.h2,{id:"license",children:"License"}),"\n",(0,s.jsx)(n.p,{children:"This SDK is available under the MIT license, allowing for both personal and commercial use with appropriate attribution."})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},28453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var s=t(96540);const i={},o=s.createContext(i);function r(e){const n=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);