npm package: @rapdel/bizdelivery
Description: Rapdel biz order create
Author: rapdel
Latest version: 0.0.8

# Rapdel biz delivery react component

Rapdel is a delivery service, this library will allow developers to integrate the Rapdel biz to your website and create orders using this component.

-   Obtain the Google Map API key and Rapdel API Key
-   Just import and call components.
-   Try to order and check on your biz account on rapdel.com.
-   ✨See the Magic ✨

## Installation

Install the Rapdel biz delivery module.

```sh
npm i @rapdel/bizdelivery --save
```
```sh
yarn add @rapdel/bizdelivery
```

import module in your project ...

```sh
import RapdelBizDelivery from '@rapdel/bizdelivery';
```

set basic values for testing...

```sh
  const setup = {
    googleApiKey: 'GOOGLE_MAP_API_KEY',
    rapdelApiKey: 'RAPDEL_BIZ_API_KEY_FOR_YOUR_ACCOUNT',
    sandbox: true, // for testing in sandbox remove this once ready for prod
  };
     const RapdelBizOrder = RapdelBizDelivery(setup,{});
# And call this wherever you like to show the component
<div>{RapdelBizOrder}</div>
```

## Customization

Rapdel allows you to do full customization.

import module in your project ...

```sh
import { RapdelBizOrder } from '@rapdel/bizdelivery';
```

import css if needed

```sh
  import "@rapdel/bizdelivery/dist/index.css";
```

set basic values for testing...

Basic app setup
```sh
  const setup = {
    googleApiKey: 'GOOGLE_MAP_API_KEY',
    rapdelApiKey: 'RAPDEL_BIZ_API_KEY_FOR_YOUR_ACCOUNT',
    sandbox: true, // for testing in sandbox remove this once ready for prod
  };

```
User details to use in project setup
```sh
   const userDetails = {
    addressLine3: 'addressLine3',
    phone: 'phone number must be 10 digit',
    name: 'name',
    email: 'email@email.com',
    specialInstructions: 'special Instructions',
  };
```
customize using projectSetup props
```sh
  const projectSetup = {
    hideDeliveryCharges: false,
    showAddessOnly: false,
    userDetails, // this will auto-fill user details
    hideButton: false, // to hide submit button,
    onDelveryChargeChange: (deliveryCharge) => {
      console.log('onDelveryChargeChange delivery charges, deliveryCharge);
    },
    onSuccessfulOrder: (order) => {
      console.log('onSuccessfulOrder order', order);
    }
  };
```
To call delivery order from the button 
Define a ref
```sh
const rapdelOrderRef = useRef(null);
 ```

Now we can call add ref to component and call when we needed 
Call this wherever you like to show the component

```sh   
<RapdelBizOrder setup={setup} projectSetup={projectSetup} ref={rapdelOrderRef} />
```
  To see the result create a function on the button click
```sh

const requestDelivery = async () => {
    rapdelOrderRef.current && rapdelOrderRef.current.requestDelivery();
};
```
 Use the HTML button example
```sh
   <button onClick={requestDelivery}>Request Delivery</button>
```

# Props and options

| Allowed values      | default     | type    | Use     |
| ------------------- | ----------- | ------- | ------- |
| hideDeliveryCharges | false       | boolean | Remove delivery charge box |
| showAddessOnly      | false       | boolean | if it's true, will show only the address field, make sure to set user fields |
| hideButton          | false       | boolean | remove submit button (call order function using ref like in the example) |
| userDetails         | userDetails | object  | user details value |
| onDelveryChargeChange| -          | function | Call back to get delivery charge |
| onSuccessfulOrder | -             | function | Once the order is placed this will return the order number |

### if something is not right?

Write us: hello@rapdel.com

Visit: [https://rapdel.com/](https://rapdel.com/)