@hivecfm/react-native-hivecfm

A react native SDK for HiveCFM.

Installation

yarn add @hivecfm/react-native-hivecfm

Dependencies

• @react-native-async-storage/async-storage
• @react-native-community/datetimepicker
• react-native-modal-datetime-picker
• react-native-linear-gradient
• @miblanchard/react-native-slider
• react-native-modal
• react-native-localization
• react-native-rate
• moment
• axios

if you don't have any of them please install by running

yarn add @react-native-async-storage/async-storage @react-native-community/datetimepicker react-native-modal-datetime-picker react-native-linear-gradient @miblanchard/react-native-slider react-native-modal react-native-localization react-native-rate moment axios

For react-native lower than v0.73.0, you need to make sure that @react-native-community/datetimepicker is lower than v8.0.0

iOS

Run

npx pod-install

or

cd ios && pod install

To use online dashboard fonts

Please add any fonts you choose from the online dashboard to the app, you will find an example in the example app using the react-native.config.js file

Breaking changes

HiveCFM is now HiveCFMView

username and password are now required by getSurveyWithParams and getSurveyWithInvitation functions not HiveCFMView component

Usage

    import { HiveCFMView, getSurveyWithParams } from '@hivecfm/react-native-hivecfm'

    ........

    const [isSurveyVisible, setIsSurveyVisible] = useState(false)

    ........

    async getSurvey = () => {
        const props = {
            username: 'InAppUserReact',
            password: 'InAppUserReact@2024',
            language: 'en',
            customerName: 'John Smith',
            customerEmail: '[email protected]',
            customerPhoneNumber: '0125455141412',
            channel: 'InApp',
            dispositionCodes: [],
            customHeaders={[
                { header: 'Header1', value: '123' },
                { header: 'Header2', value: '456' },
            ]}
        }
        await getSurveyWithParams(props)
        setIsSurveyVisible(true)
    }

    ........

    <HiveCFMView
        isVisible={isSurveyVisible}
        baseUrl='https://dev.hivecfm.online/api/'
        generateTokenURL='Authentication/GenerateToken'
        getRelevantSurveyURL='Survey/GetRelevantWebSurvey'
        getSurveyByInvitationURL='Survey/GetSurveyByInvitation'
        saveResponseURL='CustomerSurvey/SaveWebSurveyResponse'
        language='en'
        xIBMClientId={''}
        xIBMClientSecret={''}
        requestIdHeaderName={'XRequestID'}
        appleAppID={''}
        googlePackageName={''}
        onClose={() => console.log('The survey has been closed')}
        onActionLog={(url, desc) =>
            console.log(`el url: ${url} and description: ${desc}`)
        }
        // Main styles
        surveyBackgroundColor={''}
        surveyFocusColor={''}
        surveyFocusFontColor={''}
        surveyTitleStyle={{}}
        surveyPreviousButtonStyle={{}}
        surveyPreviousButtonTextStyle={{}}
        surveySubmitButtonStyle={{}}
        surveySubmitButtonIconTintColor={''}
        surveySubmitButtonTextStyle={{}}
        surveyNextButtonStyle={{}}
        surveyNextButtonTextStyle={{}}
        // Welcome screen styles
        welcomeMessageTitleStyle={{}}
        welcomeMessageSubTitleStyle={{}}
        welcomeMessageTakeSurveyButtonStyle={{}}
        welcomeMessageTakeSurveyButtonTextStyle={{}}
        // Question styles
        questionTitleStyle={{}}
        inputAnswerStyle={{}}
        questionChoicesBackgroundStyle={{}}
        questionChoicesTitleStyle={{}}
        // Thank you screen styles
        surveyThankYouTitleStyle={{}}
        surveyThankYouSubTitleStyle={{}}
    />

Properties

| Prop | Description | Default | Mandatory | | ------------------------ | ------------------------------------------------------------------------------------------ | ----------------------------------- | --------- | | baseUrl | Server's base url | - | Yes | | generateTokenURL | generate token endpoint | - | Yes | | getRelevantSurveyURL | get relevant survey endpoint | - | Yes | | getSurveyByInvitationURL | get survey by invitation endpoint | - | Yes | | saveResponseURL | save response endpoint | - | Yes | | username | Name of the device user created in Manage Devices in Hive CFM portal | - | Yes | | password | Device User password added from Manage Devices in Hive CFM portal | - | Yes | | language | App language (ar-en-fr-hi-id-ml-bn-si-ur - new language's language code) | en | Yes | | customerCIC | Customer Identifier | - | No | | xIBMClientId | IBM Client Id | - | No | | xIBMClientSecret | IBM Client Secret | - | No | | requestIdHeaderName | Request Id Header Name | - | No | | appleAppID | AppStore Apple ID | - | No | | googlePackageName | PlayStore PackageName | - | No | | customerName | Customer Name | - | No | | customerEmail | Customer Email | - | No | | customerPhoneNumber | Customer Phone number | - | No | | dispositionCodes | Disposition codes (Complain-Inquiry) | [ ] | No | | interactionID | Interaction Identifier | - | No | | sourceID | Source Identifier | - | No | | agentID | Interaction Identifier | - | No | | agentName | Agent Name | - | No | | skillGroup | Skill Group | - | No | | metaData | Key value pairs with extra interaction data (Dictionary<string, string>) | - | No | | departmentCode | Department Code | - | No | | organizationName | Organization Name | - | No | | organizationCode | Organization Code | - | No | | organizationSegmentCode | Organization Segment Code | - | No | | customHeaders | Custom headers | [{ header: string, value: string }] | No |

Styles

| Prop | Description | Type | | --------------------------------------- | ------------------------------------------------------ | ---------- | | surveyBackgroundColor | Survey's background color | ColorValue | | surveyFocusColor | Survey's focus color | ColorValue | | surveyFocusFontColor | Survey's focus font color of selected items | ColorValue | | surveyTitleStyle | Survey's title style | TextStyle | | surveyPreviousButtonStyle | Survey's previous button style | ViewStyle | | surveyPreviousButtonTextStyle | Survey's previous button text style | TextStyle | | surveySubmitButtonStyle | Survey's submit button style | ViewStyle | | surveySubmitButtonIconTintColor | Survey's submit button icon color | ColorValue | | surveySubmitButtonTextStyle | Survey's submit button text style | TextStyle | | surveyNextButtonStyle | Survey's next button style | ViewStyle | | surveyNextButtonTextStyle | Survey's next button text style | TextStyle | | welcomeMessageTitleStyle | Survey's welcome message title style | TextStyle | | welcomeMessageSubTitleStyle | Survey's welcome message subtitle style | TextStyle | | welcomeMessageTakeSurveyButtonStyle | Survey's welcome message take survey button style | ViewStyle | | welcomeMessageTakeSurveyButtonTextStyle | Survey's welcome message take survey button text style | TextStyle | | questionTitleStyle | Survey's question title style | TextStyle | | inputAnswerStyle | Survey's input answer style | TextStyle | | questionChoicesBackgroundStyle | Survey's choice question style | ViewStyle | | questionChoicesTitleStyle | Survey's choice question text style | TextStyle | | surveyThankYouTitleStyle | Survey's thank you message title style | TextStyle | | surveyThankYouSubTitleStyle | Survey's thank you message subtitle style | TextStyle |

Functions

| Function | Description | | ----------- | ------------------------------------------------------------------------------------------------- | | onClose | A callback function fired when user press on close button or after 5 seconds for thank you screen | | onActionLog | A callback function fired when any backend request returns response |

Predefined languages

| Language | Language Code | | ---------- | ------------- | | Arabic | ar | | English | en | | French | fr | | Hindi | hi | | Indonesian | id | | Malayalam | ml | | Bengali | bn | | Sinhala | si | | Urdu | ur |

If you want to add a new unsupported language

    const newLanguage = {
        languageCode: 'es',
        languageJsonFile: require('./translations/hiveSDKTranslations/es.json')
    }

    ........

    <HiveCFMView
        isVisible={isSurveyVisible}
        baseUrl='https://dev.hivecfm.online/api/'
        generateTokenURL='Authentication/GenerateToken'
        getRelevantSurveyURL='Survey/GetRelevantWebSurvey'
        getSurveyByInvitationURL='Survey/GetSurveyByInvitation'
        saveResponseURL='CustomerSurvey/SaveWebSurveyResponse'
        username='InAppUserReact'
        password='InAppUserReact@2024'
        addNewLanguage={newLanguage}
        language={'es'}
    />

| Prop | Description | Default | Mandatory | | ---------------- | ----------------------------------------------------------------------------- | ------- | --------- | | languageCode | New language's language code | - | Mandatory | | addNewLanguage | If you want to add an unsupported language | - | No | | languageJsonFile | New language's json file with the same keys in the default language.json file | - | Mandatory |

Default language.json file

{
    "TakeSurveyBtnTxt": "Take a survey",
    "SubmitBtnTxt": "Submit",
    "ListChoose": "Choose here ...",
    "SuccessValidationMsg": "Success Validation",
    "TotalScoreMsg": "Total score is ",
    "TextInputPlaceholder": "Enter Text answer",
    "NumberInputPlaceholder": "Enter number answer",
    "EmailInputPlaceholder": "Enter Email answer",
    "TeleInputPlaceholder": "Enter Telephone answer",
    "PostalInputPlaceholder": "Enter postal code answer",
    "URLInputPlaceholder": "Enter URL answer",
    "EmailValidationMsg": "Please Enter a valid mail in this format [email protected]",
    "PostalValidationMsg": "Please Enter a valid postal code Like '12345'",
    "URLValidationMsg": "Please Enter a valid URL that ends with \".com\" or \".net\" ...etc.",
    "PhoneValidationMsg": "Please Enter a valid Phone Number like xxxxxxxxxxxx from 9 to 15 digits",
    "InAppPhoneValidationMsg": "Please enter your area key and a valid phone number",
    "NumberValidationMsg": "Please Enter numbers only",
    "DateValidationMsg": "Please Enter a valid date in this format dd/mm/yyyy",
    "InAppDateValidationMsg": "Please Enter a valid date in this format dd MM, yyyy",
    "TextValidationMsg": "Please Enter a valid answer",
    "MandatoryQuestionMsg": "* Please answer this question",
    "ThanksMsg": "Thank you",
    "SurveySubmitMsg": "The survey is submitted successfully.",
    "SurveyErrorSubmission": "An error occurred, Sorry! couldn't submit your response",
    "Error_58": "Sorry! Can't submit empty response",
    "Error_62": "Session expired",
    "Error_63": "Error occured",
    "Error_33": "You already finished this survey, Thank you",
    "Error_38": "Sorry, This survey is expired.",
    "Error_10": "An error has occurred, we were unable to complete your submission.",
    "NPSLowScaleText": "Not Likely",
    "NPSHighScaleText": "Extremely Likely",
    "NumCESLowScaleText": "Very Easy",
    "NumCESHighScaleText": "Very Difficult",
    "NumCSATLowScaleText": "Very Dissatisfied",
    "NumCSATHighScaleText": "Very satisfied",
    "OtherAnswerPlaceholder": "Please enter your answer",
    "DatePickerPlaceholder": "Select Date",
    "RateUsBtnTxt_iOS": "Rate us",
    "RateUsBtnTxt_Android": "Rate us",
    "Next": "Next",
    "Previous": "Prev",
    "Close": "Close"
}

If you want to open survey with invitation

    import { HiveCFMView, getSurveyWithInvitation } from '@hivecfm/react-native-hivecfm'

    ........

    const [isSurveyVisible, setIsSurveyVisible] = useState(false)

    ........

    async getSurvey = () => {
        const language = 'en'
        const invitationGuid = ''
        const username = 'InAppUserReact'
        const password = 'InAppUserReact@2024'
        await getSurveyWithInvitation(language, invitationGuid, username, password)
        setIsSurveyVisible(true)
    }

    ........

    <HiveCFMView
        isVisible={isSurveyVisible}
        baseUrl='https://dev.hivecfm.online/api/'
        generateTokenURL='Authentication/GenerateToken'
        getRelevantSurveyURL='Survey/GetRelevantWebSurvey'
        getSurveyByInvitationURL='Survey/GetSurveyByInvitation'
        saveResponseURL='CustomerSurvey/SaveWebSurveyResponse'
        language='en'
    />

| Prop | Description | Default | Mandatory | | -------------- | ------------------------------------- | ------- | --------- | | invitationGuid | Survey invitation's unique identifier | - | Mandatory |

If you want to check if you have a survey

    import { HiveCFMView, toCheckIfHaveSurveyWithParams } from '@hivecfm/react-native-hivecfm'

    ........

    const checkIfHaveSurveyWithParams = async () => {
        const props = {
            baseUrl: 'https://dev.hivecfm.online/api/',
            generateTokenURL: 'Authentication/GenerateToken',
            getRelevantSurveyURL: 'Survey/GetRelevantWebSurvey',
            getSurveyByInvitationURL: 'Survey/GetSurveyByInvitation',
            saveResponseURL: 'CustomerSurvey/SaveWebSurveyResponse',
            username: 'InAppUserReact',
            password: 'InAppUserReact@2024',
            language: 'en',
            xIBMClientId: '',
            xIBMClientSecret: '',
            customerName: 'John Smith',
            customerEmail: '[email protected]',
            customerPhoneNumber: '0125455141412',
            channel: 'InApp',
            dispositionCodes: [],
            departmentCode: '123',
            organizationName: '123',
            organizationCode: '123',
            organizationSegmentCode: '123',
            customHeaders: [
                { header: 'Header1', value: '123' },
                { header: 'Header2', value: '456' },
            ]
            requestIdHeaderName: 'XRequestID'
        }
        const haveSurvey = await toCheckIfHaveSurveyWithParams(props)
        if (haveSurvey) setIsSurveyVisible(true)
    }

    ........

    <HiveCFMView
        isVisible={true}
        language='en'
    />