# ui-modules

## Using modules

### MaLogger
First install plugin to vue
```js
import { MaLoggerPlugin } from '@mobileaction/ui-modules';

app.use(MaLoggerPlugin, {
    isDebug: () => true, // enable debug level output
});
```
Then you can either use:
```js
app.config.globalProperties.$log.info('Hello world!');
```
or from component with component path (e.g. components/MyButton.vue):
```js
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
```js
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:
```js
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.
```js
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:
```js
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.
```js
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:
```js

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.
```js
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