Common chat elements

Module description

This module includes shared React components and constant values like pure constants and enums. React components consist of:

• PopUpNotification - the component responsible for almost all modal windows in the project, for example it is invoked when user trying to end chat
• IncomingChatRequestPsychic - the component responsible for the modal window that Psychic sees when getting chat request
• InteractChatButton - the button that used in PopUpNotification component and almost in all other application components

How to use module

1. Allow project sass loader to load styles from this module

path.resolve(__dirname, 'node_modules/extracted-chat-components')

2. Use it in your project

export * from 'extracted-chat-components/enums';

import { PopUpNotification } from 'extracted-chat-components';

Deep dive into components

Module components

PopUpNotification component props:

• isOpen - Boolean. Can be true or false and responsible for showing or hiding modal window
• title - String. Often the main text on the modal window
• acceptButton and rejectButton? - Object. These parameters take the next object:

{
  // Button text
  text: string, 
  // ButtonColor is an enum see "Mandatory enums" section
  color?: ButtonColor, 
  // ButtonSize is an enum see "Mandatory enums" section
  size?: ButtonSize, 
  // ButtonShape is an enum see "Mandatory enums" section
  shape?: ButtonShape, 
  // Handler that will invoke on button click
  handler: (object?: any) => void, 
}

• description? - String. Provides additional description if needed.
• isBigWidth? - Boolean. If true, the width will be equals to 500px else to 350px

IncomingChatRequestPsychic component props:

• tens - String. First part of the time at the modal timer.
• units - String. Second part of the time at the modal timer.
• isShownIncomingRequest - Boolean. Can be true or false and responsible for showing or hiding modal window
• handleAccept - Function. Process the click on 'Accept Button'
• name - String. Customer name
• dateOfBirth - String. Customer date of birth 'DOB: ...' format
• horoSign - String. Customer zodiac sign
• lastReading - String. Customer last reading

InteractChatButton component props:

• isActive? - Boolean. Applies styles to active or inactive button
• isBold? - Boolean. Applies font weight styles
• text - String. Component text
• onClick - Function. Handle click on button
• color - ButtonColor. Applies color theme to component
• size - ButtonSize. Applies size styles to component
• shape - ButtonShape. Applies shape styles to component

Mandatory enums

ButtonColor

Colors that next scss mixin gets depend on ButtonColor

@mixin apply-colors($color, $background-color) {
    color: $color;
    background-color: $background-color;
}

Additionally, outline values (LIGHT_OUTLINE, WARNING_OUTLINE, WHITE_OUTLINE) add border to the button

enum ButtonColor {
    // @include apply-colors(#ffffff, $red);
    DANGER = 'danger',
    // @include apply-colors(#ffffff, $orange);
    WARNING = 'warning',
    // @include apply-colors($text, #ffffff);
    LIGHT_OUTLINE = 'lightOutline',
    // @include apply-colors($orange, #ffffff);
    WARNING_OUTLINE = 'warningOutline',
    // @include apply-colors($white, transparent);
    WHITE_OUTLINE = 'whiteOutline',
    // @include apply-colors(#a9a9b5, #eff1f5);
    DISABLE = 'disable',
}

ButtonSize

Values that next scss mixin gets depend on ButtonSize

@mixin apply-size($font-size, $line-height, $width, $height) {
    @include apply-font($font-size, $line-height);
    width: $width;
    height: $height;
}

enum ButtonSize {
    // @include apply-size($font-size: 20px, $line-height: 27px, $width: 307px, $height: 50px);
    E = 'extreme',
    // @include apply-size($font-size: 16px, $line-height: 22px, $width: 200px, $height: 50px);
    M = 'medium',
    // @include apply-size($font-size: 16px, $line-height: 22px, $width: 270px, $height: 50px);
    L = 'large',
    // @include apply-size($font-size: 14px, $line-height: 22px, $width: 174px, $height: 40px);
    S = 'small',
}

ButtonShape

This enum affects the value of the border-radius

enum ButtonShape {
    // If ButtonSize.S => border-radius: 40px otherwise border-radius: 50px
    ROUNDED = 'rounded',
    // border-radius: 12 px
    RECTANGULAR = 'rectangular',
}

Available Scripts

In the project directory, you can run:

npm run build

Builds application and put sources to the dist package