senderrand-shared-components

WIP: intented collection of similar components used across out applications

Installation

npm install senderrand-shared-components

UI Components

• Header
• Header2
• Footer
• Success Modal 1
• Success Modal 2
• Custom Modal
• TextBox Component
• VoiceNote Component
• ImageBox Component
• VideoBox Component
• FooterOptions Component
• LocationBox Component
• FleetFooter
• FleetBox
• StatusBox
• NewRunner
• InvoiceBox
• TrackBox
• SwipeUp
• LoadingModal
• InvoiceModal
• ReasonSwipe Component
• LocationSwipe Component
• Exported Libraries

Rigid Chat & Functionalities

• Chat
• getInvoiceMessage
• getTrackerMessage
• getStatusMessage
• getNewRunnerMessage
• createTable
• sendMessage
• getMessages
• updateMessage
• deleteMessage
• XmppClient
• xmppSend
• sendTyping
• sendRecording
• sendRead
• formatURLMsg
• getMsg
• currencyFormat
• Interfaces

Header Component Usage

import { Header } from 'senderrand-shared-components';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
 <Header
   lang={'ar'}
   detail={'Typing..'}
   title={'SendErrand'}
   family={family}
   entypo={Entypo}
   options={['History', 'Locations', 'Profile', 'FAQs']}
/>
)

Features

• Styled Header with logo, title, detail & options

Tech

The Header component uses a number of open source projects to work properly:

• styled-components - For styling.
• expo-constant - To get status bar height

props

Below are the listed props that can be passed to the header component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | containerStyle | Style | false | The style passed to the header container | | image | string | false | The image url passed to the header logo, defaults to senderrand logo | | title | string | false | The text string to be displayed in the title | | titleStyle | Style | false | The style passed to the header title | | detail | string | false | The text string to be displayed in the detail below the title | | detailStyle | Style | false | The style passed to the header detail | | options | array | false | An string array of options passed to the header menu options | | entypo | @expo/vector-icons | true | It takes in Entypo component to represent the menu icon | | optionTxtStyle | Style | false | The style passed to the option text component | | onPressOption | Function | false | This function call when each menu option is tapped. It returns the index of the tapped option as parameter | | family | object | true | An object that contains the font family used for the text elements in the header component. An example is shown above. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. |

Header2 Component Usage

import { Header2 } from 'senderrand-shared-components';
import { Entypo, MaterialIcons } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
  <Header2
    lang={'en'}
    entypo={Entypo}
    title={'Earnings'}
    family={family}
    back={() => props.navigation.goBack()}
    options={['One', 'Two']}
    materialIcons={MaterialIcons}
  />
)

Features

• Styled Header with title, detail & options

Tech

The Header2 component uses a number of open source projects to work properly:

• styled-components - For styling.
• expo-constant - To get status bar height

props

Below are the listed props that can be passed to the header2 component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | containerStyle | Style | false | The style passed to the header container | | title | string | false | The text string to be displayed in the title | | left | React.Component | false | A component displayed on the left part of the header. | | right | React.Component | false | A component displayed on the right part of the header. | | back | function | false | A function called when back button is pressed. When passed the back button displays. | | options | array | false | An string array of options passed to the header menu options | | entypo | @expo/vector-icons | true | It takes in Entypo component to represent the menu icon | | optionTxtStyle | Style | false | The style passed to the option text component | | onPressOption | Function | false | This function call when each menu option is tapped. It returns the index of the tapped option as parameter | | family | object | true | An object that contains the font family used for the text elements in the header component. An example is shown above. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | inputRef | function | false | Takes the ref of the footer input as parameter. | | keyboardType | string | false | Takes the keyboard type of the footer input. |

Footer Component Usage

import { Footer } from 'senderrand-shared-components';

let fontFamily = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => (
 <Footer
   send={send}
   family={family}
   ionicons={Ionicons}
   antDesign={AntDesign}
   materialCommunityIcons={MaterialCommunityIcons}
   onSelectOption={(index: number) => console.log(index)}
   footerOnPressLaunchIcon={() => {}}
   onError={(message: string) => Alert.alert('Failed', message)}
 />
);

Features

• Camera.
• Image Picker.
• Audio Recorder.
• Text Input

Tech

The Footer component uses a number of open source projects to work properly:

• expo-av - For Audio Recording.
• expo-image-picker - To take picture from camera or select from library.
• react-native-actionsheet - To display Footer options.
• expo-file-system - To get the URI of the recorded audio.

props

Below are the listed props that can be passed to the footer component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | defaultOptions | array | false | This array is passed to the footer options to display. Defaults to ['Camera', 'Photo Library'] | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | options | array | false | Additional options passed to the footer to display. | | reply | object | false | A message object passed to the footer to display when replying a message. | | send | function | false | A functions that returns the message object as a parameter. | | onError | function | false | A function that returns error message as a parameter. | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | footerOnPressLaunchIcon | function | false | When specified, the function is executed when the Plus or Location Icon is pressed instead of showing the Action Sheet. | | onSelectDefaultOption | function | false | The function returns the index of the selected option as parameter. | | ionicons | @expo/vector-icons | true | It takes in Ionicons component to display icons in the footer component | | family | object | true | An object that contains the font family used for the text elements in the footer component. An example is shown above. | | multiline | boolean | false | The multiline props for the footer text input. | | placeholder | string | false | The placeholder props for the footer text input. | | keyboardType | string | false | The keyboardType props for the footer text input. | | antDesign | @expo/vector-icons | true | It takes in AntDesign component to display icons in the footer component | | loading | boolean | false | To disable all footer functionalities and display the loading component. | | materialCommunityIcons | @expo/vector-icons | true | It takes in MaterialCommunityIcons component to display icons in the footer component | | sheetOneTitle | string | false | The title of the first action sheet, defaults to Options. | | sheetTwoTitle | string | false | The title of the second action sheet, defaults to Options. | | onChangeText | function | false | Handles text input change, returns text string as parameter. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | setTyping | function | false | This function property lets know when user is typing by sending true when typing and false when not. | | setRecording | function | false | This function property lets know when user is recording by sending true when recording and false when not. |

Success Modal 1

import { SuccessModal } from 'senderrand-shared-components';
import { useState } from 'react';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <SuccessModal
      family={family}
      visible={visible}
      title={'Congratulations'}
      close={() => setVisible(false)}
      btnTitle={'Close Modal'}
      entypo={Entypo}
      content={'We are exited to have you join our team!'}
    />
  )
}

Features

• A styled success modal to be displayed after successful action

props

Below are the listed props that can be passed to the header component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | animationType | string | false | Default animationType options for react native modal. Defaults to slide | | visible | boolean | true | Set the visibility of the modal to true or false | | entypo | @expo/vector-icons | true | It takes in Entypo component to display icons in the component | | family | object | true | An object containing the app font family, example above | | title | string | false | The text string to be displayed as title ex: 'Congrats' | | content | string | false | The details string displayed below the title | | close | function | false | A function called after the button is pressed | | btnTitle | string | false | The title of the button displayed |

Success Modal 2

import { SuccessModal2 } from 'senderrand-shared-components';
import { useState } from 'react';
import { Entypo } from '@expo/vector-icons';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <SuccessModal2
      entypo={Entypo}
      family={family}
      visible={visible}
      text={'Verified Successfully'}
      press={() => setVisible(false)}
      btnTitle={'Continue'}
    />
  )
}

Features

• A styled success modal to be displayed after successful action

props

Below are the listed props that can be passed to the header component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | blue | boolean | false | Pass blue to display the blue version, defaults to green | | visible | boolean | true | Set the visibility of the modal to true or false | | entypo | @expo/vector-icons | true | It takes in Entypo component to display icons in the component | | family | object | true | An object containing the app font family, example above | | text | string | false | The text string to be displayed as title ex: 'Verified Successfully' | | press | function | false | A function called after the button is pressed | | btnTitle | string | false | The title of the button displayed |

Custom Modal

import { CustomModal } from 'senderrand-shared-components';
import { useState } from 'react';
import { AntDesign } from '@expo/vector-icons';

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <CustomModal
      visible={visible}
      close={() => setVisible(false)}
      antdesign={AntDesign}
    >
      <Text>Hello, here is a sample modal content</Text>
    </CustomModal>
  )
}

Features

• A styled custom modal, that takes in a JSX Element as children to be displayed in the modal container.

props

Below are the listed props that can be passed to the custom modal component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | visible | boolean | true | Set the visibility of the modal to true or false | | antdesign | @expo/vector-icons | true | It takes in AntDesign component to display icons in the component | | close | function | true | A function called after the close button is pressed | | children | JSX.Element | true | Children element that is displayed in the modal |

TextBox Component

import { TextBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <TextBox
          family={family}
          ionicons={Ionicons}
          reply={item.reply}
          status={item.status} // 0: not sent, 1: sent, 2: received, 3:read
          text={item.text}
          date={item.date}
          sender={item.sender.id === 1}
          toReply={() => scrollToMsg(item.reply)}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat text box component

props

Below are the listed props that can be passed to the TextBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | options | array | false | Options displayed on long press of the chat text box. | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | ionicons | @expo/vector-icons | true | It takes in ionicons component to display icons in the component | | family | object | true | An object containing the app font family, example above | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | sender | boolean | true | The boolean that denotes the sender of the message | | reply | object | false | A message object passed to display the message replied to | | toReply | function | true | The function that calls when the reply component in the chat box in tapped. | | text | string | false | The text message displayed in the text box. | | date | Date | false | A date object to be displayed in the text box. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. | | optionTitle | string | false | The title of the displayed options, defaults to Options | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. |

VoiceNote Component

import { VoiceNote } from 'senderrand-shared-components';
import { Ionicons, Entypo } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VoiceNote
          image={'http//jpg'}
          entypo={Entypo}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          audio={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat voice note component

props

Below are the listed props that can be passed to the VoiceNote

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | options | array | false | Options displayed on long press of the chat text box. | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | audio | string | true | The audio url. | | ionicons | @expo/vector-icons | true | It takes in Ionicons component to display icons in the component | | entypo | @expo/vector-icons | true | It takes in Entypo component to display icons in the component | | family | object | true | An object containing the app font family, example above | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | sender | boolean | true | The boolean that denotes the sender of the message | | date | Date | false | A date object to be displayed in the text box. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. | | optionTitle | string | false | The title of the displayed options, defaults to 'Options' | | image | string | false | The image of the voice note sender. |

ImageBox Component

import { ImageBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VoiceNote
          image={'http//jpg'}
          entypo={Entypo}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          audio={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat image box component

props

Below are the listed props that can be passed to the ImageBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | image | string | false | The image url to be displayed. | | options | array | false | Options displayed on long press of the chat text box. | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | ionicons | @expo/vector-icons | true | It takes in ionicons component to display icons in the component | | family | object | true | An object containing the app font family, example above | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | sender | boolean | true | The boolean that denotes the sender of the message | | date | Date | false | A date object to be displayed in the text box. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. | | optionTitle | string | false | The title of the displayed options, defaults to 'Options' |

VideoBox Component

import { ImageBox } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <VideoBox
          lang={'en'}
          ionicons={Ionicons}
          status={item.status}
          date={item.date}
          video={item.file && item.file.uri}
          sender={item.sender.id === 1}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A chat video box component

props

Below are the listed props that can be passed to the VideoBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | video | string | false | The video url. | | ionicons | @expo/vector-icons | true | It takes in ionicons component to display icons in the component | | family | object | true | An object containing the app font family, example above | | sender | boolean | true | The boolean that denotes the sender of the message | | date | Date | false | A date object to be displayed in the text box. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. |

FooterOptions Component

import { FooterOptions } from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FooterOptions
      family={family}
      press={(index: number) => console.log(index)}
      options={['Purchase', 'Pick Up']}
    />
  )
}

Features

• A UI component that display an array of buttons

props

Below are the listed props that can be passed to the FooterOptions

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | options | array | true | The string array representing each button to be displayed. Each button displays the string passed. | | family | object | true | An object containing the app font family, example above | | press | function | true | The function called when a button is pressed, with the index of the particular button pressed. |

LocationBox Component

import { LocationBox } from 'senderrand-shared-components';
import { Ionicons, Entypo, MaterialIcons } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <LocationBox
          lang={'en'}
          family={family}
          ionicons={Ionicons}
          entypo={Entypo}
          materialIcons={MaterialIcons}
          status={item.status} // 0: not sent, 1: sent, 2: received, 3:read
          text={item.data && item.data.address && item.data.address}
          date={item.date}
          sender={true}
          options={['Option 1', 'Option 2']}
          onSelectOption={() => {}}
          location_type={item.data && item.data.location_type}
        />
      )}
    />
  )
}

Features

• A component to display selected location in a chat text box

props

Below are the listed props that can be passed to the LocationBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | options | array | false | Options displayed on long press of the chat text box. | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | ionicons | @expo/vector-icons | true | It takes in ionicons component to display icons in the component | | entypo | @expo/vector-icons | true | It takes in entypo component to display icons in the component | | materialIcons | @expo/vector-icons | true | It takes in materialIcons component to display icons in the component | | family | object | true | An object containing the app font family, example above | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | sender | boolean | true | The boolean that denotes the sender of the message | | reply | object | false | A message object passed to display the message replied to | | toReply | function | true | The function that calls when the reply component in the chat box in tapped. | | text | string | false | The text message displayed in the text box. | | date | Date | false | A date object to be displayed in the text box. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. | | optionTitle | string | false | The title of the displayed options, defaults to Options | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | location_type | string | false | If it has store as it's value, it uses a store icon, otherwise it uses a location pin icon. |

FleetFooter Component

import { FleetFooter } from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FleetFooter select={(index: number) => {}} />
  )
}

Features

• A UI component that display the fleet options to selection

props

Below are the listed props that can be passed to the FleetFooter

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | select | function | true | The function called when a fleet is selected, returning the index of the selected fleet as parameter. |

FleetBox Component

import { FleetBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <FleetBox
          lang={'en'}
          date={item.date}
          index={1}
          sender={true}
          family={family}
          options={['Edit', 'Delete']}
          onSelectOption={() => {}}
        />
      )}
    />
  )
}

Features

• A component to displays the selected fleet

props

Below are the listed props that can be passed to the FleetBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | index | number | true | The index of the selected fleet. | | options | array | false | Options displayed on long press of the chat text box. | | cancetTxt | string | false | The string to replace the cancel text. Defaults to Cancel | | family | object | true | An object containing the app font family, example above | | onSelectOption | function | false | The function returns the index of the selected option as parameter. | | sender | boolean | true | The boolean that denotes the sender of the message | | date | Date | false | A date object to be displayed in the FleetBox. | | status | number | false | The status of the current message 0 = sending(not send), 1 = sent, 2 = received, 3 = read. | | optionTitle | string | false | The title of the displayed options, defaults to Options | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. |

StatusBox Component

import { StatusBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <StatusBox
          family={family}
          text={item.text}
          color={item.data && item.data.color && item.data.color}
          loading={false}
        />
      )}
    />
  )
}

Features

• A component to displays the errand status within the chat

props

Below are the listed props that can be passed to the StatusBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | family | object | true | An object containing the app font family, example above | | text | string | false | The text to be displayed. | | color | string | false | The text color | | loading | boolean | false | Displays loading spinner when set to true. |

NewRunner Component

import { NewRunner } from 'senderrand-shared-components';
import { AntDesign } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <NewRunner
          lang={'ar'}
          antDesign={AntDesign}
          family={family}
          text={'Runner YINKA joined the chat'}
          name={'Runner Yinka'}
          runs={'90+ Runs'}
          rate={4}
          image={
            'https://media.istockphoto.com/photos/portrait-of-a-girl-picture-id938709362?s=612x612'
          }
        />
      )}
    />
  )
}

Features

• A component to displays the newly added runner

props

Below are the listed props that can be passed to the NewRunner

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | family | object | true | An object containing the app font family, example above | | text | string | false | The status text to be displayed. | | name | string | false | The name of the runner. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | runs | string | false | The amount of runs text. | | rate | number | false | The runners rating ranges from 0 - 5. | | image | string | false | Displays the image url passed as the runners photo. | | antDesign | @expo/vector-icons | true | It takes in antDesign component to display icons in the component |

InvoiceBox Component

import { InvoiceBox } from 'senderrand-shared-components';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <InvoiceBox
          lang={'ar'}
          txt1={item.text}
          txt2={item.text}
          txt3={item.text}
          date={item.date}
          family={family}
          invoiceID={item.id}
          price={'100 AED'}
        />
      )}
    />
  )
}

Features

• An invoice UI component

props

Below are the listed props that can be passed to the InvoiceBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | family | object | true | An object containing the app font family, example above | | txt1 | string | false | Defaults to Invoice. | | txt2 | string | false | Defaults to Grand Total:. | | txt2 | string | false | Defaults to View Invoice. | | press | function | false | The function called when the component is pressed. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | invoiceID | string | false | Displays the invoice ID passed to it. | | price | string | false | Displays the string passed as price. | | date | Date | false | A date object to be displayed in the InvoiceBox. |

TrackBox Component

import { TrackBox } from 'senderrand-shared-components';
import { Feather } from '@expo/vector-icons';
import { FlatList } from 'react-native';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {

  return (
    <FlatList
      data={[]}
      renderItem={(item: any) => (
        <TrackBox
          lang={'en'}
          feather={Feather}
          text={item.text}
          date={item.date}
          family={family}
          region={item.data && item.data.region && item.data.region}
          position={item.data && item.data.position && item.data.position}
        />
      )}
    />
  )
}

Features

• An location tracking UI component

props

Below are the listed props that can be passed to the TrackBox

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | family | object | true | An object containing the app font family, example above | | text | string | false | Defaults to Track Delivery. | | press | function | false | The function called when the component is pressed. | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | date | Date | false | A date object to be displayed in the InvoiceBox. | | region | object | true | An object containing longitude and latitude. | | position | object | true | An object containing longitude and latitude. | | Feather | @expo/vector-icons | true | It takes in Feather component to display icons in the component |

SwipeUp Component

import { SwipeUp } from 'senderrand-shared-components';

const Example = () => (
  <SwipeUp>
    // ... children
  </SwipeUp>
);

Features

• An component for swiping up and down

props

Below are the listed props that can be passed to the SwipeUp

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | containerHeight | number | false | The default height of the swipe box. | | close | funciton | false | Set swipe visibility to false when called. | | disableSwipe | boolean | false | To disable the swipe up and down if it's not required. | | containerStyle | style | false | Style passed to the container. | | avoid | boolean | false | Add avoid prop if keyboard is present in the swipe children. |

LoadingModal

import { LoadingModal } from 'senderrand-shared-components';
import { useState } from 'react';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  return (
    <LoadingModal
      visible={loading}
      family={family}
      text={'Processing Payment..'}
    />
  )
}

Features

• A modal to display loading UI

props

Below are the listed props that can be passed to the loading component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | text | string | false | The value to the text displayed in the loader. | | visible | boolean | true | Set the visibility of the modal to true or false | | family | object | true | An object containing the app font family, example above | | close | function | false | Toggle visibility to close modal when user taps the modal. |

InvoiceModal

import { InvoiceModal } from 'senderrand-shared-components';
import { useState } from 'react';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

const Example = () => {
  let [visible, setVisible] = useState(true)

  let invoice = [
    {
      item: 'Brake pads for Honda accord 2009 Front and Rear',
      quantity: 1,
      price: 200,
    },
    {
      item: 'Brake discs for Honda accord 2009. Front and Rear',
      quantity: 2,
      price: 400,
    },
    {
      item: 'Brake Oil',
      quantity: 2,
      price: 20,
    },
    {
      item: 'Errand cost',
      quantity: 1,
      price: 100,
    },
  ];

  let totals = [
    { title: 'SUBTOTAL', value: '720 NGN' },
    { title: 'DISCOUNT', value: '110 NGN', discount: '3%' },
    { title: 'TAX', value: '10 NGN' },
  ];

  return (
    <InvoiceModal
      lang={'en'}
      currency={'NGN'}
      visible={visible}
      family={family}
      totalItems={totals}
      items={invoice}
      nameKey={'item'}
      qtyKey={'quantity'}
      rateKey={'price'}
      grandTotal={'610 NGN'}
      txt2={"Runner's Name: YINKA"}
      txt3={'#12345673'}
      close={() => setInvoice(false)}
      press={(index: number) => console.log(index)}
    />
  )
}

Features

• A modal to display invoice UI

props

Below are the listed props that can be passed to the invoice component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | currency | string | true | The currency to be displayed in the invoice. | | visible | boolean | true | Set the visibility of the modal to true or false | | family | object | true | An object containing the app font family, example above | | close | function | false | Toggle visibility to close modal when user taps the modal. | | totalItems | array | true | An array including the subtotal, discount, tax, etc. | | titles | array | false | An array of string titles, defaults to ['DESCRIPTION', 'RATE', 'QTY', 'SUBTOTAL']. | | txt1 | string | false | Defaults to You’ve received an invoice. | | txt2 | string | false | Defaults to Runner. | | txt3 | string | false | Invoice ID should be passed here. Empty if nothing is passed. | | nameKey | string | false | The key of the item name within the invoice object. | | qtyKey | string | false | The key of the quantity name within the invoice object. | | rateKey | string | false | The key of the price within the invoice object. | | grandTotal | string | false | The invoice total. | | grandTotalTxt | string | false | Defaults to GRAND TOTAL. | | press | function | false | When the press prop is passed, the accept and decline CTA button displays. It returns the index of the button pressed as parameter 1 for accept, 2 for decline. | | acceptTxt | string | false | Defaults to Accept. | | declineTxt | string | false | Defaults to Decline. |

ReasonSwipe Component

import { ReasonSwipe } from 'senderrand-shared-components';
import { Ionicons } from '@expo/vector-icons';

let reasons = [
  { reason: 'Runner took too long to respond' },
  { reason: 'Wrong pickup location' },
  { reason: 'I don’t need the service anymore' },
  { reason: 'Have to attend to an Emergency' },
];

const Example = () => (
  <ReasonSwipe
    lang={'en'}
    ionicons={Ionicons}
    family={family}
    data={reasons}
    textKey={'reason'}
    onSend={(item) => console.log(item)}
    onSelect={(item) => console.log(item)}
  />
);

Features

• A component for displaying the array of reasons

props

Below are the listed props that can be passed to the ReasonSwipe

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | data | array | true | An array or reasons passed to the component, example above. | | onSelect | funciton | true | The function called when a reason is selected returning she selected reason as parameter. | | textKey | string | true | The key to the reason string in the object. | | othersTxt | string | false | Defaults to Others:. | | onSend | function | true | The function returns the custom reason entered in the input field. | | family | object | true | An object containing the app font family, example above | | ionicons | @expo/vector-icons | true | It takes in Ionicons component to display icons in the component |

LocationSwipe Component

import { LocationSwipe } from 'senderrand-shared-components';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';

let locations = [
  {
    distance: '1.3km',
    timing: 'Deira',
    address: 'Dubai Deira International Market',
  },
  {
    distance: '400m',
    timing: '10am - 10:30pm',
    status: 1,
    address: 'Auto Pro, Silicon Oasis, Dubai',
  },
  {
    distance: '2km',
    timing: '10am - 2:30pm',
    status: 2,
    address: 'Zoom Enoc, Silicon Oasis, Dubai',
  },
];

const Example = () => (
  <LocationSwipe
    lang={'en'}
    family={family}
    data={locations}
    ionicons={Ionicons}
    materialIcons={MaterialIcons}
    onSelect={(item) => console.log(item)}
  />
);

Features

• A component displaying locations

props

Below are the listed props that can be passed to the LocationSwipe

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | lang | string | false | The language that should be used for the default text in the component. Defaults to en. | | data | array | true | An array or locations passed to the component, example above. | | onSelect | funciton | true | The function called when a location is selected returning she selected location as parameter. | | chooseTxt | string | false | Defaults to Choose from Map. | | savedTxt | string | false | Defaults to Saved Locations. | | onPressSaved | function | true | The function called when saved location is tapped. | | onPressChoose | function | true | The function called when choose from map is tapped. | | family | object | true | An object containing the app font family, example above | | ionicons | @expo/vector-icons | true | It takes in Ionicons component to display icons in the component | | materialIcons | @expo/vector-icons | true | It takes in MaterialIcons component to display icons in the component |

Exported Libraries

• react-native-webview
• react-native-remote-svg
• expo-asset
• expo-av
• expo-constants
• expo-document-picker
• expo-file-system
• expo-font
• expo-image-manipulator
• expo-image-picker
• moment
• react-native-actionsheet
• react-native-animatable
• react-native-maps
• react-native-size-matters
• react-native-sliders
• react-native-svg
• react-native-zigzag-lines
• react-swipeable-views-native
• styled-components

Contributing

Rigid Chat

import Errand from "senderrand-shared-components";
import {
  Ionicons,
  AntDesign,
  Feather,
  MaterialIcons,
  MaterialCommunityIcons,
  Entypo,
} from '@expo/vector-icons';
import Chat, {
  getInvoiceMessage,
  getStatusMessage,
  getNewRunnerMessage,
  xmppSend,
  runnerInterface,
  getTrackerMessage, // @ts-ignore
} from 'senderrand-shared-components';

const family = {
  light: 'Light',
  regular: 'Regular',
  medium: 'Medium',
  bold: 'Bold',
  italic: 'RegularItalic',
};

let sender = { id: 1, name: 'Ollan Monsur' };
let sender2 = { id: 2, name: 'Yinka Azeez' };
let msg = getInvoiceMessage(
  '1',
  '#1223342',
  '20 AED',
  sender2,
  'Mirdif City Center',
  'ar'
);
let msg2 = getTrackerMessage(
  '1',
  { longitude: 55.3863, latitude: 25.1279 },
  { longitude: 55.3775, latitude: 25.1218 },
  sender2,
  'en'
);
let msg3 = getStatusMessage(
  '1',
  'Yinka is arriving somewhere currently',
  sender2
);
let runner: runnerInterface = {
  ...sender2,
  image:
    'url.png',
  rate: 4,
  runs: 110,
};
let msg4 = getNewRunnerMessage('1', runner, 'ar');

// ...

export default () => {
  let [messages, setMessages] = useState([...data, msg, msg2, msg3, msg4]);
  let send = (message: any) => {
    setMessages([...messages, message]);
    xmppSend('from jabber id', 'to jabber id', message);
  };

  return (
    <Wrap>
      <Errand
        orderID={1}
        headerOptions={['History', 'Locations', 'Settings', 'FAQ']}
        headerOnSelectOption={(index) => console.log(index)}
        family={family}
        user={sender}
        send={send}
        messages={messages}
        ionicons={Ionicons}
        entypo={Entypo}
        materialIcons={MaterialIcons}
        antDesign={AntDesign}
        invoiceBoxPress={(item) => console.log(item)}
        trackBoxPress={(item) => console.log(item)}
        feather={Feather}
        loading={false}
        footerOnError={(error: string) => Alert.alert('Failed', error)}
        materialCommunityIcons={MaterialCommunityIcons}
      />
    </Wrap>
  );
};

props

Below are the listed props that can be passed to the header component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | lang | string | false | The language code for the chat. Defaults to en. | | user | userData | true | This is the currently logged in user. It's an object that should consist of id, name and image. image is not compulsory. | | send | function | true | Takes in the message data as parameter. See example above. | | textBoxOnSelectOption | function | false | Takes the index and the item selected from the text box options. | | mediaOnSelectOption | function | false | Takes the index and the item selected from the media box options. | | locationBoxOnSelectOption | function | false | Takes the index and the item selected from the location box options. | | fleetBoxOnSelectOption | function | false | Takes the index and the item selected from the fleet box options. | | footerOnSelectOption | function | false | Takes the index of the selected option from the footer options. | | footerOnSelectDefaultOption | function | false | Takes the index of the selected option from the default footer options. | | headerOnSelectOption | function | false | Takes the index of the selected option from the header options. | | family | object | true | An object that contains the font family used for the text elements in the component. An example is shown above. | | messages | array | true | An array of messages. | | entypo | @expo/vector-icons | true | It takes in Entypo component to display icons in the component. Example above. | | ionicons | @expo/vector-icons | true | It takes in Ionicons component to display icons in the component. Example above. | | materialIcons | @expo/vector-icons | true | It takes in MaterialIcons component to display icons in the component. Example above. | | antDesign | @expo/vector-icons | true | It takes in AntDesign component to display icons in the component. Example above. | | feather | @expo/vector-icons | true | It takes in Feather component to display icons in the component. Example above. | | materialCommunityIcons | @expo/vector-icons | true | It takes in MaterialCommunityIcons component to display icons in the component. Example above. | | textBoxOptions | array | false | An array of string passed as the text box options. | | voiceNoteOptions | array | false | An array of string passed as the voice note options. | | imageBoxOptions | array | false | An array of string passed as the image box options. | | errandLocationOptions | array | false | An array of string passed as the errand location box options. | | fleetBoxOptions | array | false | An array of string passed as the fleet box options. | | footerOptions | array | false | An array of string passed as the footer options. | | footerDefaultOptions | array | false | An array of string passed as the footer default options. Defaults to ['Camera', 'Library'] | | headerOptions | array | false | An array of string passed as the header options. | | textBoxBtnPress | function | false | The property called when the button in the text box is pressed. It returns the message item as parameter. | | invoiceBoxPress | function | false | The prop called when the invoice box is pressed. It returns the message item as parameter. | | trackBoxPress | function | false | The props called when the tracker box is pressed. It returns the message item as parameter. | | loading | boolean | false | To disable actions in the component and show loading. | | footerOnError | function | true | The function called to return the error parameter when there is an error to report in the component. | | footerOnChangeText | function | false | Handles the onChangeText for the footer TextInput. | | footerOptionsPress | function | false | The prop called when a button is pressed from the footer button options. It returns the index and item as parameter. | | footerType | string | false | To change the footer type. The available types are fleet, options, footer. Defaults to footer. | | headerTitle | string | false | The string title passed to the header. | | headerDetail | string | false | The text shown below the header title. | | newRunnerPress | function | false | The prop called when the new runner component is tapped. | | footerSetTyping | function | false | The prop called when user starts and stops typing. It take in a boolean as parameter. True for typing, False for not typing. | | footerSetRecording | function | false | The prop called when user starts and stops recording. It take in a boolean as parameter. True for recording, False for not recording. | | footerInputRef | function | false | Takes the ref of the footer input as parameter. | | footerKeyboardType | string | false | Takes the keyboard type of the footer input. | | clear | boolean | false | To trigger the clearing of the input field. | | removeFooter | boolean | false | Hides the footer, defaults to false. |

Get Invoice Message

import { getInvoiceMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg = getInvoiceMessage(
  '1',
  '#1223342',
  '20 AED',
  sender2,
  'Mirdif City Center',
  'ar'
);

Details

A function call to get the message data structure of an invoice message. The message is then sent to the chat. NOTE: Pass invoiceID when there is a full invoice and don't pass it when there is only total price.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string or number | true | The order ID | | price | string | true | The total price to be displayed. EX '120 Naira' | | invoiceID | string | true | When invoiceID is passed, it means invoice has been computed. If not passed, it means there is only total price. | | senderData | senderInterface | true | The senders data which includes id, name, and image where image image is not compulsory. | | location | string | false | The invoice location, which is the point of purchase. Example above. | | lang | string | false | The language that should be used for the default text. Defaults to en. |

Get Tracker Message

import { getTrackerMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg = getTrackerMessage(
  '1',
  { longitude: 55.3863, latitude: 25.1279 },
  { longitude: 55.3775, latitude: 25.1218 },
  sender2,
  'en'
);

Details

A function call to get the message data structure of a tracking message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string or number | true | The order ID | | region | coordinateInterface | true | The coordinate of the region where the user is. | | position | coordinateInterface | true | The coordinate of the current user position. | | senderData | senderInterface | true | The senders data which includes id, name, and image where image image is not compulsory. | | lang | string | false | The language that should be used for the default text. Defaults to en. |

Get Status Message

import { getStatusMessage } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let msg =  getStatusMessage(
  '1',
  'Yinka is arriving somewhere currently',
  sender2
);

Details

A function call to get the message data structure of a status message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string or number | true | The order ID | | status | string | true | The status to be sent. | | loading | boolean | false | To add loading indicator to the status. | | senderData | senderInterface | true | The senders data which includes id, name, and image where image image is not compulsory. | | color | string | false | To change the color of the status text. |

Get New Runner Message

import { getNewRunnerMessage, runnerInterface } from 'senderrand-shared-components';

let sender2 = { id: 2, name: 'Abdul Mumin' };
let runner: runnerInterface = {
  ...sender2,
  image: 'oseni.png',
  rate: 4,
  runs: 110,
};
let msg = getNewRunnerMessage('1', runner, 'ar');

Details

A function call to get the message data structure of a new runner message. The message is then sent to the chat.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string / number | true | The order ID | | runner | runnerInterface | true | The runners data which includes id, name, image, rate, runs. | | lang | string | false | The language that should be used for the default text. Defaults to en. |

Create Table

import { createTable } from 'senderrand-shared-components';

createTable()

Details

The function is to be called to create the sql table if it doesn't exist, when the application opens.

Send Message

import { sendMessage, messageInterface } from 'senderrand-shared-components';

let message: messageInterface = {
  sender: { id: 2, name: 'The sender' },
  id: 76,
  status: 3,
  date: new Date(),
  text: 'The sender has accepted the Invoice, Proceed to make payment.',
  file: null,
  type: 'text',
  reply: null,
  orderID: 1,
  data: { btnTitle: 'PAY' },
} // Pass required data
sendMessage(
  message,
  (res) => res && console.log(res)
);

Details

The function is called to send message into the device, after sending you can call the getMessages to get updates. The response is false if it fails to send.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | message | messageInterface | true | The message to be sent to the chat. Example above | | callback | function | true | Callback when the promise completes. The response is false if sending fails, but returns an array of messages when it succeeds. |

Get Messages

import { getMessages } from 'senderrand-shared-components';

getMessages('order ID')

Details

The function is called to get the messages on the device,

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string | true | The order id of the messages to be retrieved. |

Update Message

import { updateMessage } from 'senderrand-shared-components';

updateMessage(
  'status',
  3,
  'orderID',
  orderID,
  (res) => res && callback({ type: 'messages' })
);

Details

The function is called to update messages on the device,

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | primaryKey | string | true | The key of the item to be updated ex: status, file. | | primaryValue | string / number | true | The value to be updated with. Stringify it if the value is neither string nor number. | | secondaryKey | string | true | A key in the particular row to be updated. ex id, orderID | | secondaryValue | string | number | true | The value of the secondary key. | | callback | function | true | Callback when the promise completes. The response is false if update fails, but returns an array of messages when it succeeds. |

Delete Message

import { deleteMessage } from 'senderrand-shared-components';

deleteMessage(
  'id',
  3,
  (res) => res && callback({ type: 'messages' })
);

Details

The function is called to delete messages on the device,

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | key | string | true | A key in the object to be deleted. | | value | string / number | true | The value to be deleted. Stringify it if the value is neither string nor number. | | callback | function | true | Callback when the promise completes. The response is false if delete fails, but returns an array of messages when it succeeds. |

XMPP Client

import { XmppClient } from 'senderrand-shared-components';

const App = () => (
  <XmppClient
    user={{
      id: 1,
      jabber_id: '',
      phone: '',
    }}
    service={''}
    domain={''}
    change={(res: any) => console.log(res, 'hello there')}
  />
)

Details

The component is used globally in the app to handle xmpp request and response.,

props

Below are the listed properties to be passed to the component

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | user | object | true | The user object containing the user id jabber_id and phone number. | | service | string | true | The server url. | | domain | string | true | The service domain. | | change | function | true | When there is an update on the xmpp. |

XMPP Send

import { xmppSend } from 'senderrand-shared-components';

xmppSend('from', 'to', {/* data */})

Details

The function is called to send request to xmpp,

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | from | string | true | The senders jabber id. | | to | string | true | The receivers jabber id. | | data | object | true | The data to be sent through xmpp. |

Send Typing

import { sendTyping } from 'senderrand-shared-components';

sendTyping(true, 'orderID', 'from', 'to')

Details

The function is called to denote that user is currently typing.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | typing | boolean | true | Weather typing is true or false. | | orderID | string | true | The orderID of the current conversation. | | from | string | true | The senders jabber id. | | to | string | true | The receivers jabber id. |

Send Recording

import { sendRecording } from 'senderrand-shared-components';

sendRecording(true, 'orderID', 'from', 'to')

Details

The function is called to denote that user is currently recording voice note.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | recording | boolean | true | Weather recording is true or false. | | orderID | string | true | The orderID of the current conversation. | | from | string | true | The senders jabber id. | | to | string | true | The receivers jabber id. |

Get Msg

import { getMsg } from 'senderrand-shared-components';

getMsg() // messageInterface parameters
// sender
// orderID
// type
// status
// text
// file
// data
// reply
// duration

Details

The function is called to format message data, It takes in messageInterface parameters where sender, orderID and type are compulsory.

Format URL Msg

import { formatURLMsg } from 'senderrand-shared-components';

formatURLMsg({}, 'http//') // messageInterface parameters
// messageInterface
// url

Details

The function is called when replacing uri with url. Pass the message data and the url, then get new message format.

Send Read

import { sendRead } from 'senderrand-shared-components';

sendRead('orderID', 'from', 'to')

Details

The function is called to denote that user has read received messages.

parameters

Below are the listed parameter to be passed to the function

| Property | Type | Required | Description | | ------ | ------ | ------ | ------ | | orderID | string | true | The orderID of the current conversation. | | from | string | true | The senders jabber id. | | to | string | true | The receivers jabber id. |

Currency Format

import { currencyFormat } from 'senderrand-shared-components';

currencyFormat(10000) // call function passing in integer value and it returns 10,000

Details

The function is called to format a number into currency value ex 10000 to 10,000.

Interfaces

export interface runnerInterface {
  id: string | number;
  name: string;
  image: string;
  rate: number;
  runs: number;
}

export interface coordinateInterface {
  longitude: number;
  latitude: number;
  longitudeDelta?: number;
  latitudeDelta?: number;
}

export interface senderInterface {
  id: string | number;
  name?: string;
  image?: string;
}
export interface messageInterface {
  id: string | number;
  text: string;
  date: Date | number;
  file: any;
  duration?: number;
  sender: senderInterface;
  reply?: messageInterface | null;
  data?: any;
  type: string;
  status: number;
  orderID: string | number;
}

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT