@mobileaction/ui-modules

ui-modules

Using modules

MaLogger

First install plugin to vue

import { MaLoggerPlugin } from '@mobileaction/ui-modules';

app.use(MaLoggerPlugin, {
    isDebug: () => true, // enable debug level output
});

Then you can either use:

app.config.globalProperties.$log.info('Hello world!');

or from component with component path (e.g. components/MyButton.vue):

export default {
    name: 'my-button',
    mounted() {
        this.$log.warn('Not implemented yet')
    }
}

components/MyButton Not implemented yet

MaSessionStorage and MaLocalStorage

Installing Plugin

Install plugin with reducers

import { MaSessionStorage } from '@mobileaction/ui-modules';

app.use(MaSessionStorage, [
    'firstVar', // only name is given, and it will be used as key as well
    { name: 'secondVar' }, // object form
    { // reducer is given as a different string, note that it will be still prefixed
        name: 'thirdVar',
        reducer: 'thirdVarCustomStorageKey',
    },
    { // a custom reducer function, it can use `this.reduce`
        name: 'fourthVar',
        reducer(val) { // can use this.reduce to customize storing and returning
             return this.reduce('fourthVarCustomStorageKey', val === true) === true;
        },
    },
], {
    windowGlobal: NODE_ENV !== 'production', // enable global on window for dev
});

reduce function takes 1 required key and one optional value. If value is given stores given value and returns otherwise just returns the stored value (null if nothing is stored).

MaLocalStorage has appVersion predefined in it with default value of '0.0.0'.

Usage

You can either use instance or global version through $maLocalStorage and $maSessionStorage.

You can access the reducers as properties e.g:

export default {
    // ...
    data() {
        return {
            clicked: this.$maLocalStorage.firstVar,
        };
    },
    methods: {
        storeOnClick() {
            this.$maLocalStorage.firstVar = true;
        },
    },
    // ...
}

MaFullStory

Installing

Install the plugin and initialize with user object. You MUST give the list of domain on which plugin will be loaded.

import { MaFullStory } from '@mobileaction/ui-modules';

app.use(MaFullStory, {
    domains: ['YOUR_DOMAIN_1', 'YOUR_DOMAIN_2'],
    fsParams: {
        namespace: 'FS',
        org: 'YOUR_FS_ORG_ID', // this is required
    }
});

Usage

You can use $maFullStory through either global or instance scope.

You can also get window.FS through $maFullStory.fs() e.g:

export default {
    methods: {
        onUserFetch(user) {
            this.$maFullStory.initialize(user, 'my-user');
        }
    },
    mounted() {
        const sessionURL = this.$maFullStory.fs().getCurrentSessionURL();
        console.log('FS session url: ', sessionURL);
    },
}

MaIntercom

Installing

Install the plugin and boot with user object. You MUST give the app ID on which plugin will be loaded.

import { MaIntercom } from '@mobileaction/ui-modules';

app.use(MaIntercom, {
    appId: 'app_id', // required
    autoStart: true, // optional, default is false
});

Usage

You can use $maIntercom through either global or instance scope.

You can also get window.Intercom after intercom script is successfully loaded:

export default {
    methods: {
        onUserFetch(user) {
            const settings = {
                name: user.name,
                email: user.username,
                created_at: user.createdAt,
                user_hash: user.userHash,
                user_id: user.userId,
            };
            this.$maIntercom.boot(settings);
        }
    },
}

MaGoogleRecaptcha

Installing

Install the plugin and boot with user object. You MUST give h and siteKey on which plugin will render using it.

import { h } from 'vue';
import { MaGoogleRecaptcha } from '@mobileaction/ui-modules';
import { GOOGLE_RECAPTCHA_SITE_KEY } from '@/common/config';

app.use(MaGoogleRecaptcha, {
    h, // required
    siteKey: GOOGLE_RECAPTCHA_SITE_KEY // required
});

Possible Problems and Solutions

If the library you depend on have process.env usages, then you can use https://www.npmjs.com/package/@rollup/plugin-replace