# Inventory Manager Components

An embedded Inventory Manager Tool

# Inventory Manager Components

- [Getting started](#getting-started)
  - [Installation](#Install)
  - [Usage](#Usage)
- [Deployement](#Deployement)
  - [Release a new version](#Release-a-new-version)
  - [Standalone](#Standalone)
  - [Spacestation](#Spacestation)
- [Components](#Components)
  - [Sidebars](#Sidebars)
  - [Snackbars](#Snackbars)
  - [Modals](#Modals)

## Getting Started

### Installation

**NPM**

**You might need npm login**

> You will need to be logged in to install a dependency. Execute `npm login` and use the username, password, and e-mail found in 1Password under npmjs (dev-team).

```sh
npm install @wework/inventory-manager-components

# Yarn
yarn add @wework/inventory-manager-components
```

### Usage

```js
import React from 'react'
import { SessionInventoryManager } from '@wework/inventory-manager-components'

const ApplicationComponent = () => {
  return (
    <SessionInventoryManager
      configuration={{
        appId: 'appId',
        appSecret: 'appSecret',
        baseUrl: 'https://occupancy-api.phoenix.dev.wwrk.co/v2',
      }}
      buildingId="b308b94c-bca6-4318-b906-1c148f7ca183"
    />
  )
}
```

# Deployement

## Release a new version

In order to release a new version, first after making PR and merging to master, we pull the latest master version, and run

- You will need NPM login for that => `yarn run publish:v2`

This will release a new version on npm of each updated package, and we'll be able to use it to update.

## Standalone

In order to deploy a new version on standalone, we'll have first to release a new version of Inventory manager components on NPM then update according to the new version the package.json located in Inventory-manager-tool repo,
After updating and pushing to master it will automatically update both standalone production and staging.

## Spacestation

In order to deploy a new version on spacestation, after releasing a new update of inventory-manager-componenets we will go to spacestation's repo package.json and update accordinly the version.
After updating, making a PR and pushing to master it will automatically update production of inventory manager. a staging as well as a preproduction will be automatically deployed upon PR.

# Components

## Sidebars

Sidebars are controlled from the HOC WithSidebars

`value={{ isOpen, openSideBar, closeSideBar, sideBarName }}`

isOpen: `Is to determine wheter the sidebar is open.`

openSideBar('name'): `Takes name as a parameter and opens the sidebar with the selected option.`

sideBarName: `The current sidebar name`

closeSidebar: `Will close the sidebar and set the name to null`

If we want to open a sidebar after an action we just call the following:

ex: `openSideBar("BuildingInfo")`

If we want to close a sidebar after an action we call:

`closeSideBar()`

## Snackbars

Snackbars are also controlled via a HOC , withSnackbar, we can edit the behavior if needed on `SnackBarProvider.js`

If we want to display an alert we need to attach our component to the HOC, example:

```
export default withSnackbar(OfficeNoteEditModal)
```

Then we call snackBars from the props, and we can add an alert:

```
snackBars.addAlert({
text: `Note has been saved.`,
variant: 'success',
})
```

There are 3 types of snackbars,

- Success => Green snackbar
- Failed => Red Snackbar
- default => Grey snackbar

## Modals

Modals can be called anytime via their components and controlled by the parent,
We usually control if they are open or no via the following props
`open` and `onClose`
We can also customise them depending on the use Case,

Example

```
<Modal
  open={modalData.open}
  title={'Confirm Action'}
  content={modalData.content}
  confirmText={'YES'}
  cancelText={'NO'}
  onConfirm={modalData.onConfirm}
  onClose={() => setModalData({ ...modalData, open: false })}
/>
```

Or we can create our own Modal and call it directly.