cozy-ui 102.0.0 → 102.1.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [102.1.1](https://github.com/cozy/cozy-ui/compare/v102.1.0...v102.1.1) (2024-01-29)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Default offset value wasn't good if flagship immersive [secure] ([b1551d2](https://github.com/cozy/cozy-ui/commit/b1551d2))
+
+# [102.1.0](https://github.com/cozy/cozy-ui/compare/v102.0.0...v102.1.0) (2024-01-25)
+
+
+### Features
+
+* **Action:** Print can now deal with multiple docs ([ee5695d](https://github.com/cozy/cozy-ui/commit/ee5695d))
+* Add pdf-lib package ([9b363e1](https://github.com/cozy/cozy-ui/commit/9b363e1))
+
 # [102.0.0](https://github.com/cozy/cozy-ui/compare/v101.2.0...v102.0.0) (2024-01-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "102.0.0",
+  "version": "102.1.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -171,6 +171,7 @@
     "mui-bottom-sheet": "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9",
     "node-polyglot": "^2.2.2",
     "normalize.css": "^8.0.0",
+    "pdf-lib": "1.17.1",
     "piwik-react-router": "0.12.1",
     "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",

package/react/ActionsMenu/Actions/helpers.js

@@ -1,3 +1,9 @@
+import { PDFDocument } from 'pdf-lib'
+import { fetchBlobFileById } from 'cozy-client/dist/models/file'
+
+// Should guarantee good resolution for different uses (printing, downloading, etc.)
+const MAX_RESIZE_IMAGE_SIZE = 3840
+
 /**
  * Make array of actions for ActionsItems component
  *
@@ -82,3 +88,159 @@ export const makeBase64FromFile = async file => {
     }
   })
 }
+
+/**
+ * @param {HTMLImageElement} image
+ * @param {number} [maxSizeInPixel] - Maximum size before being resized
+ * @returns {number}
+ */
+const getImageScaleRatio = (image, maxSize) => {
+  const longerSideSizeInPixel = Math.max(image.height, image.width)
+  let scaleRatio = 1
+  if (maxSize < longerSideSizeInPixel) {
+    scaleRatio = maxSize / longerSideSizeInPixel
+  }
+
+  return scaleRatio
+}
+
+/**
+ * @param {object} opts
+ * @param {string} opts.base64 - Base64 of image
+ * @param {string} opts.type - Type of image
+ * @param {number} opts.maxSize - Maximum size before being resized
+ * @returns {Promise<string>}
+ */
+const resizeImage = async ({
+  base64: fileDataUri,
+  type: fileType,
+  maxSize
+}) => {
+  return new Promise((resolve, reject) => {
+    const newImage = new Image()
+    newImage.src = fileDataUri
+    newImage.onerror = reject
+    newImage.onload = () => {
+      const canvas = document.createElement('canvas')
+      const scaleRatio = getImageScaleRatio(newImage, maxSize)
+      const scaledWidth = scaleRatio * newImage.width
+      const scaledHeight = scaleRatio * newImage.height
+
+      canvas.width = scaledWidth
+      canvas.height = scaledHeight
+      canvas
+        .getContext('2d')
+        .drawImage(newImage, 0, 0, scaledWidth, scaledHeight)
+
+      resolve(canvas.toDataURL(fileType))
+    }
+  })
+}
+
+/**
+ * @param {File} file
+ * @returns {Promise<string>}
+ */
+const fileToDataUri = async file => {
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader()
+    reader.onerror = reject
+    reader.onload = e => resolve(e.target.result)
+    reader.readAsDataURL(file)
+  })
+}
+
+/**
+ * @param {PDFDocument} pdfDoc
+ * @param {File} file
+ * @returns {Promise<void>}
+ */
+const addImageToPdf = async (pdfDoc, file) => {
+  const fileDataUri = await fileToDataUri(file)
+  const resizedImage = await resizeImage({
+    base64: fileDataUri,
+    type: file.type,
+    maxSize: MAX_RESIZE_IMAGE_SIZE
+  })
+
+  let img
+  if (file.type === 'image/png') img = await pdfDoc.embedPng(resizedImage)
+  if (file.type === 'image/jpeg') img = await pdfDoc.embedJpg(resizedImage)
+
+  const page = pdfDoc.addPage([img.width, img.height])
+  const { width: pageWidth, height: pageHeight } = page.getSize()
+  page.drawImage(img, {
+    x: pageWidth / 2 - img.width / 2,
+    y: pageHeight / 2 - img.height / 2,
+    width: img.width,
+    height: img.height
+  })
+}
+
+/**
+ * @param {File} file
+ * @returns {Promise<ArrayBuffer>}
+ */
+const fileToArrayBuffer = async file => {
+  if ('arrayBuffer' in file) return await file.arrayBuffer()
+
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader()
+    reader.onerror = reject
+    reader.onload = e => resolve(new Uint8Array(e.target.result))
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+/**
+ * @param {PDFDocument} pdfDoc
+ * @param {File} file
+ * @returns {Promise<void>}
+ */
+const addPdfToPdf = async (pdfDoc, file) => {
+  const pdfToAdd = await fileToArrayBuffer(file)
+  const document = await PDFDocument.load(pdfToAdd)
+  const copiedPages = await pdfDoc.copyPages(
+    document,
+    document.getPageIndices()
+  )
+  copiedPages.forEach(page => pdfDoc.addPage(page))
+}
+
+/**
+ * @param {PDFDocument} pdfDoc - Instance of PDFDocument
+ * @param {File} file - File to add in pdf
+ * @returns {Promise<ArrayBuffer>} - Data of pdf generated
+ */
+export const addFileToPdf = async (pdfDoc, file) => {
+  if (file.type === 'application/pdf') {
+    await addPdfToPdf(pdfDoc, file)
+  } else {
+    await addImageToPdf(pdfDoc, file)
+  }
+  const pdfDocBytes = await pdfDoc.save()
+
+  return pdfDocBytes
+}
+
+/**
+ * Fetches file from docs list and return a blob of pdf
+ * @param {import('cozy-client/types/CozyClient').default} client - Instance of CozyClient
+ * @param {array} docs - Docs from an io.cozy.xxx doctypes
+ * @returns {Promise<object>} Blob of generated Pdf
+ */
+export const makePdfBlob = async (client, docs) => {
+  const pdfDoc = await PDFDocument.create()
+
+  for (const doc of docs) {
+    const blob = await fetchBlobFileById(client, doc._id)
+    await addFileToPdf(pdfDoc, blob)
+  }
+
+  const pdfBytes = await pdfDoc.save()
+
+  const bytes = new Uint8Array(pdfBytes)
+  const blob = new Blob([bytes], { type: 'application/pdf' })
+
+  return blob
+}

package/react/ActionsMenu/Actions/print.js

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import logger from 'cozy-logger'
 import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file'
 
-import { makeBase64FromFile } from './helpers'
+import { makeBase64FromFile, makePdfBlob } from './helpers'
 import PrinterIcon from '../../Icons/Printer'
 import { getActionsI18n } from './locales/withActionsLocales'
 import ActionsMenuItem from '../ActionsMenuItem'
@@ -21,33 +21,40 @@ export const print = () => {
     icon,
     label,
     disabled: docs => docs.length === 0,
-    displayCondition: docs => isFile(docs[0]), // feature not yet supported for multi-files
+    displayCondition: docs => docs.every(doc => isFile(doc)),
     action: async (docs, { client, webviewIntent }) => {
-      const doc = docs[0] // feature not yet supported for multi-files
+      const isSingleDoc = docs.length === 1
+      const firstDoc = docs[0]
 
-      if (webviewIntent) {
-        try {
-          const blob = await fetchBlobFileById(client, doc._id)
+      try {
+        // in flagship app
+        if (webviewIntent) {
+          const blob = isSingleDoc
+            ? await fetchBlobFileById(client, firstDoc._id)
+            : await makePdfBlob(client, docs)
           const base64 = await makeBase64FromFile(blob)
 
           return webviewIntent.call('print', base64)
-        } catch (error) {
-          logger.error(
-            `Error trying to print document with Flagship App: ${JSON.stringify(
-              error
-            )}`
-          )
         }
-      }
 
-      try {
-        const downloadURL = await client
-          .collection('io.cozy.files')
-          .getDownloadLinkById(doc._id, doc.name)
+        // not in flagship app
+        let docUrl = ''
+        if (isSingleDoc) {
+          docUrl = await client
+            .collection('io.cozy.files')
+            .getDownloadLinkById(firstDoc._id, firstDoc.name)
+        } else {
+          const blob = await makePdfBlob(client, docs)
+          docUrl = URL.createObjectURL(blob)
+        }
 
-        window.open(downloadURL, '_blank')
+        window.open(docUrl, '_blank')
       } catch (error) {
-        logger.error(`Error trying to print document: ${JSON.stringify(error)}`)
+        logger.error(
+          `Error trying to print document ${
+            webviewIntent ? 'inside flagship appp' : 'outside flagship app'
+          }: ${JSON.stringify(error)}`
+        )
       }
     },
     Component: forwardRef((props, ref) => {

package/react/BottomSheet/BottomSheet.jsx

@@ -13,7 +13,7 @@ import { useMutationObserver, useTimeoutWhen } from 'rooks'
 import Fade from '@material-ui/core/Fade'
 import Portal from '@material-ui/core/Portal'
 
-import { getFlagshipMetadata } from 'cozy-device-helper'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
 
 import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
@@ -392,7 +392,7 @@ BottomSheet.defaultProps = {
   toolbarProps: {},
   backdrop: false,
   offset:
-    (getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight) ?? 0
+    (getFlagshipMetadata().immersive && getFlagshipMetadata().navbarHeight) || 0
 }
 
 BottomSheet.propTypes = {

package/react/BottomSheet/README.md

@@ -94,7 +94,7 @@ const initialState = {
   isSecondBottomSheetDisplayed: false,
   mediumHeight: isTesting() ? 450 : undefined,
   mediumHeightRatio: undefined,
-  offset: 0
+  offset: undefined
 }
 const showBottomSheet = () => setState({ isBottomSheetDisplayed: true })
 const hideBottomSheet = () => setState({ isBottomSheetDisplayed: false })

package/react/BottomSheet/helpers.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import { ANIMATION_DURATION } from './constants'
 import { getSafeAreaValue } from '../helpers/getSafeArea'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
 
 export const computeToolbarHeight = (toolbarProps = {}) => {
   const { ref, height } = toolbarProps

package/react/BottomSheet/helpers.spec.js

@@ -12,7 +12,7 @@ import {
 jest.mock('../helpers/getSafeArea', () => ({
   getSafeAreaValue: jest.fn().mockReturnValue(15)
 }))
-jest.mock('cozy-device-helper', () => ({
+jest.mock('../hooks/useSetFlagshipUi/helpers', () => ({
   getFlagshipMetadata: jest.fn(() => ({ navbarHeight: 10 }))
 }))
 const windowSpy = jest.spyOn(window, 'window', 'get')

package/react/CozyDialogs/Readme.md

@@ -208,50 +208,9 @@ const initialVariants = [{
   withBackground: false
 }]
 
-// The goal of this method is to simulate the
-// immersive mode of the flagship app. So we
-// add the flagship-app class to the body and
-// we set 2 css variables:
-// flagship-top-height
-// flagship-bottom-height
-const setFlagshipVars = () => {
-  const root = document.getElementsByTagName('body')[0]
-  root.style.setProperty('--flagship-top-height',  "40px")
-  root.style.setProperty('--flagship-bottom-height',  "40px")
-  root.classList.add('flagship-app')
-
-  const statusBarDiv = document.createElement("div")
-  statusBarDiv.style.cssText = "position:fixed;top:0;height:40px;z-index:10000000;background-color:red;width:100%"
-  // and give it some content
-  const statusBarDivContent = document.createTextNode("Top Status Bar with clock")
-
-  // add the text node to the newly created div
-  statusBarDiv.appendChild(statusBarDivContent)
-
-
-  const bottomBarDiv = document.createElement("div")
-  bottomBarDiv.style.cssText = "position:fixed;bottom:0;height:40px;z-index:10000000;background-color:red;width:100%"
-  // and give it some content
-  const bottomBarDivContent = document.createTextNode("BottomBar")
-
-  // add the text node to the newly created div
-  bottomBarDiv.appendChild(bottomBarDivContent)
-
-  // add the newly created element and its content into the DOM
-  const currentDiv = document.getElementById("rsg-root")
-  document.body.insertBefore(statusBarDiv, currentDiv)
-  document.body.insertBefore(bottomBarDiv, currentDiv)
-}
-
 ;
 
 <DemoProvider>
-  <Button
-    className="u-mb-1"
-    variant="secondary"
-    label={'Simulate Immersive Flagship Mode'}
-    onClick={() => setFlagshipVars()}
-  />
   <Variants initialVariants={initialVariants}>
     {variant => (
       <>

package/react/Dialog/DialogEffects.spec.tsx

@@ -238,8 +238,11 @@ it('should provide the inversed UI when Cozybar is not black on white, but white
 })
 
 jest.mock('cozy-device-helper', () => ({
-  isFlagshipApp: (): boolean => true,
-  getFlagshipMetadata: (): Record<string, never> => ({})
+  isFlagshipApp: (): boolean => true
+}))
+jest.mock('../hooks/useSetFlagshipUi/helpers', () => ({
+  getFlagshipMetadata: (): Record<string, never> => ({}),
+  setRsgFlagshipElements: (): null => null
 }))
 
 const onOpenMountExpected = {

package/react/Dialog/DialogEffects.ts

@@ -1,7 +1,7 @@
 import { getLuminance, Theme, useTheme } from '@material-ui/core'
 import { useEffect } from 'react'
 
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 
 import {
@@ -9,6 +9,8 @@ import {
   ThemeColor,
   parseArg
 } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { getFlagshipMetadata } from '../hooks/useSetFlagshipUi/helpers'
+import { isRsg } from '../hooks/useSetFlagshipUi/helpers'
 
 interface DialogEffectsOptions {
   cozybar?: Element | null
@@ -192,7 +194,8 @@ export const useDialogSetFlagshipUI = (
   }, [open, webviewIntent]) // eslint-disable-line react-hooks/exhaustive-deps
 }
 
-export const useDialogEffects = isFlagshipApp()
-  ? useHook
-  : // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (): void => {}
+export const useDialogEffects =
+  isFlagshipApp() || isRsg
+    ? useHook
+    : // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (): void => {}

package/react/deprecated/ActionMenu/ActionMenuEffects.ts

@@ -7,6 +7,7 @@ import { Theme, useTheme } from '@material-ui/core'
 import { isFlagshipApp } from 'cozy-device-helper'
 
 import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 
 const getBottomBackground = (theme: Theme): string => {
   const sidebar = document.getElementById('sidebar')
@@ -40,7 +41,8 @@ const useHook = (): void => {
   )
 }
 
-export const useActionMenuEffects = isFlagshipApp()
-  ? useHook
-  : // eslint-disable-next-line @typescript-eslint/no-empty-function
-    (): void => {}
+export const useActionMenuEffects =
+  isFlagshipApp() || isRsg
+    ? useHook
+    : // eslint-disable-next-line @typescript-eslint/no-empty-function
+      (): void => {}

package/react/deprecated/Modal/ModalEffects.ts

@@ -4,9 +4,10 @@
 
 import { Theme, useTheme } from '@material-ui/core'
 
-import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 
 import { useSetFlagshipUI } from '../../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { getFlagshipMetadata } from '../../hooks/useSetFlagshipUi/helpers'
 
 const getTopBackground = (theme: Theme, cozyBar: Element | null): string =>
   (cozyBar && getComputedStyle(cozyBar).getPropertyValue('background-color')) ||

package/react/hooks/useSetFlagshipUi/helpers.js

@@ -0,0 +1,149 @@
+// eslint-disable-next-line no-unused-vars
+import { FlagshipUI } from './useSetFlagshipUI'
+import { getFlagshipMetadata as getFlagshipMetadataFromDeviceHelper } from 'cozy-device-helper'
+
+/**
+ * The goal of this method is to simulate the immersive mode of the flagship app.
+ * So we add the flagship-app class to the body and we set css variables:
+ * If the "contained" mode is activated, it simulates an classic app behavior
+ * If the "immersive" mode is activated, it simulates a fullscreen app like Home
+ */
+export const addFlagshipElements = () => {
+  const root = document.getElementsByTagName('body')[0]
+  root.style.setProperty('--flagship-top-height', '40px')
+  root.style.setProperty('--flagship-top-bgcolor', 'white') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-top-overlay', 'transparent') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-top-color', 'black') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-height', '40px')
+  root.style.setProperty('--flagship-bottom-bgcolor', 'white') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-overlay', 'transparent') // used only for cozy-ui docs
+  root.style.setProperty('--flagship-bottom-color', 'black') // used only for cozy-ui docs
+  root.classList.add('flagship-app')
+
+  // create status bar
+  const statusBarDiv = document.createElement('div')
+  statusBarDiv.setAttribute('id', 'flagshipStatusBar')
+  statusBarDiv.style.cssText =
+    'position:fixed;top:0;height:var(--flagship-top-height);z-index:10000000;color:var(--flagship-top-color);background-color:var(--flagship-top-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'
+  // create status bar overlay
+  const statusBarOverlay = document.createElement('div')
+  statusBarOverlay.setAttribute('id', 'flagshipStatusBarOverlay')
+  statusBarOverlay.style.cssText =
+    'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-top-overlay)'
+  statusBarDiv.appendChild(statusBarOverlay)
+  // create status bar text
+  const statusBarText = document.createElement('div')
+  statusBarText.setAttribute('id', 'flagshipStatusBarText')
+  statusBarText.innerText = 'Flagship Top Status Bar with clock'
+  statusBarDiv.appendChild(statusBarText)
+
+  // create nav bar
+  const navBarDiv = document.createElement('div')
+  navBarDiv.setAttribute('id', 'flagshipNavBar')
+  navBarDiv.style.cssText =
+    'position:fixed;bottom:0;height:var(--flagship-bottom-height);z-index:10000000;color:var(--flagship-bottom-color);background-color:var(--flagship-bottom-bgcolor);width:100%;display:flex;align-items:center;justify-content:center'
+  // create nav bar overlay
+  const navBarOverlay = document.createElement('div')
+  navBarOverlay.setAttribute('id', 'flagshipNavBarOverlay')
+  navBarOverlay.style.cssText =
+    'position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background-color:var(--flagship-bottom-overlay)'
+  navBarDiv.appendChild(navBarOverlay)
+  // create nav bar text
+  const navBarText = document.createElement('div')
+  navBarText.setAttribute('id', 'flagshipNavBarText')
+  navBarText.innerText = 'Flagship Nav Bar'
+  navBarDiv.appendChild(navBarText)
+
+  // add status and nav bar and its content into the DOM
+  const currentDiv = document.getElementById('rsg-root')
+  document.body.insertBefore(statusBarDiv, currentDiv)
+  document.body.insertBefore(navBarDiv, currentDiv)
+}
+
+/**
+ * Remove fake DOM element that simulates native Status and Nav bar
+ */
+export const removeFlagshipElements = () => {
+  const root = document.getElementsByTagName('body')[0]
+  root.style.removeProperty('--flagship-top-height')
+  root.style.removeProperty('--flagship-top-bgcolor')
+  root.style.removeProperty('--flagship-top-overlay')
+  root.style.removeProperty('--flagship-top-color')
+  root.style.removeProperty('--flagship-bottom-height')
+  root.style.removeProperty('--flagship-bottom-bgcolor')
+  root.style.removeProperty('--flagship-bottom-overlay')
+  root.style.removeProperty('--flagship-bottom-color')
+  root.classList.remove('flagship-app')
+
+  document.getElementById('flagshipStatusBar')?.remove()
+  document.getElementById('flagshipNavBar')?.remove()
+}
+
+/**
+ * Whether we are in cozy-ui documentation (Rsg is for ReactStyleGuide)
+ * @returns {boolean}
+ */
+export const isRsg = !!document.getElementById('rsg-root')
+
+/**
+ * Overrides flagship metadata
+ * See https://github.com/cozy/cozy-libs/blob/master/packages/cozy-device-helper/src/flagship.ts#L13
+ */
+export const getFlagshipMetadata = isRsg
+  ? () => ({
+      immersive:
+        JSON.parse(localStorage.getItem('flagship-app'))?.contained === 'off' ||
+        false,
+      statusBarHeight: 40,
+      navbarHeight: 40
+    })
+  : getFlagshipMetadataFromDeviceHelper
+
+/**
+ * Set the css values for Status and Nav bar inside cozy-ui documentation
+ * see https://github.com/cozy/cozy-libs/blob/master/packages/cozy-intent/src/api/models/applications.ts#L33
+ * @param {undefined | Partial<FlagshipUI>} param0
+ * @returns
+ */
+export const setRsgFlagshipElements = ({
+  topBackground,
+  topOverlay,
+  topTheme,
+  bottomBackground,
+  bottomOverlay,
+  bottomTheme
+} = {}) => {
+  if (!isRsg) return
+
+  const root = document.getElementsByTagName('body')[0]
+
+  if (topBackground) {
+    root.style.setProperty('--flagship-top-bgcolor', topBackground)
+  }
+
+  if (topOverlay) {
+    root.style.setProperty('--flagship-top-overlay', topOverlay)
+  }
+
+  if (topTheme) {
+    root.style.setProperty(
+      '--flagship-top-color',
+      topTheme === 'dark' ? 'black' : 'white'
+    )
+  }
+
+  if (bottomBackground) {
+    root.style.setProperty('--flagship-bottom-bgcolor', bottomBackground)
+  }
+
+  if (bottomOverlay) {
+    root.style.setProperty('--flagship-bottom-overlay', bottomOverlay)
+  }
+
+  if (bottomTheme) {
+    root.style.setProperty(
+      '--flagship-bottom-color',
+      bottomTheme === 'dark' ? 'black' : 'white'
+    )
+  }
+}

package/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts

@@ -8,6 +8,8 @@ import { useWebviewIntent } from 'cozy-intent'
 import { FlagshipUI as IntentInterface } from 'cozy-intent/dist/api/models/applications'
 import { WebviewService } from 'cozy-intent/dist/api/services/WebviewService'
 
+import { setRsgFlagshipElements } from './helpers'
+
 export enum ThemeColor {
   Dark = 'dark',
   Light = 'light'
@@ -23,11 +25,13 @@ export const parseArg = (
   arg?: FlagshipUI,
   caller?: string
 ): void => {
-  if (!webviewIntent) return
-
-  const sanitized = isObject(arg) && pickBy(arg, identity)
+  const sanitized = isObject(arg) ? pickBy(arg, identity) : undefined
   const validUI = !isEmpty(sanitized) && sanitized
 
+  setRsgFlagshipElements(sanitized)
+
+  if (!webviewIntent) return
+
   validUI && webviewIntent.call('setFlagshipUI', validUI, caller)
 }