@feedmepos/mf-common

This package provide:

• shared portal shell component

• shared coreStore pinia store

• other shared utilities, like: i18n, country etc

Changelog

See CHANGELOG.md for details about changes in each version.

Remy Integration Guide

Overview

The common package provides a simplified interface for integrating Remy AI assistant into microfrontends. The responsibility of the common package is only to:

1. Register a callback when Remy icon is clicked
2. Show/hide the Remy icon based on callback registration
3. Trigger the callback when the icon is clicked

Usage

1. Register Remy Callback

In your microfrontend (e.g., mf-menu), register a callback that will be triggered when the Remy icon is clicked:

import { useCoreStore } from '@feedmepos/common'

const coreStore = useCoreStore()

// Register your callback
coreStore.registerOnRemyClicked(() => {
  // Your Remy logic here
  // For example: open Remy dialog, activate Remy session, etc.
  console.log('Remy icon clicked!')
})

2. Automatic Icon Display

When you register the callback:

• The publicSetting.aiSettings.remy.enable will be automatically set to true
• The Remy icon will appear on Desktop, Mobile, and Tablet views
• The icon is a video element showing the Remy animation

3. Icon Click Behavior

When a user clicks the Remy icon:

• The registered callback will be triggered
• You control what happens next (open dialog, start session, etc.)

Implementation Details

Desktop (PortalDesktop.vue)

• Icon appears in the header next to user info
• Positioned before debug and storefront buttons

Mobile (PortalMobile.vue)

• Icon appears in the footer navigation
• Positioned next to the more menu button

Tablet (PortalTablet.vue)

• Icon appears in the header
• Similar position to desktop view

Example: Full Integration

// In your microfrontend's main component or setup
import { onMounted } from 'vue'
import { useCoreStore } from '@feedmepos/common'

onMounted(async () => {
  const coreStore = useCoreStore()
})

Benefits

1. Decoupled: Common package doesn't need to know about Remy implementation details
2. Flexible: Each microfrontend can implement their own Remy behavior
3. Simple API: Only one method to register, icon visibility is automatic
4. Consistent UX: Icon appears in the same place across all views