Added feature to have custom src per account

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- New prop `srcAccount`
+
 ## [0.6.0] - 2023-05-15
 
 ### Added

docs/README.md

@@ -96,6 +96,26 @@ An app that makes it possible to render external iframes on a store.
 | `id`         | String | ID attribute of the iframe                                        | `null`        |
 | `className`  | String | class attribute of the iframe                                     | `null`        |
 | `onLoad`     | String | onLoad attribute of the iframe                                    | `null`        |
+| `srcAccount` | Object | Object with account name and src                                  | `null`        |
+
+### srcAccount
+
+Using srcAccount
+
+```json
+  "iframe#logout": {
+    "props": {
+      "src": "//www.mywebsiteprod.com/logout",
+      "srcAccount": {
+        "mywebsiteprod": "//www.mywebsite.com/logout",
+        "mywebsiteqa": "//qa.mywebsite.com/logout"
+      },
+      "onLoad": "setTimeout(() => {window.location.href='/'}, 5000)",
+      "className": "iframeLogout",
+      "id": "iframeLogout"
+    }
+  },
+```
 
 ## Customization
 

react/Iframe.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable no-console */
 import React from 'react'
 import { useCssHandles } from 'vtex.css-handles'
+import { useRuntime } from 'vtex.render-runtime'
 
 const CSS_HANDLES = ['container'] as const
 
 interface Props {
   src?: string
+  srcAccount?: any
   width?: number
   height?: number
   allow?: string
@@ -16,20 +18,35 @@ interface Props {
 }
 
 function Iframe(props: Props) {
-  const { src, width, height, title, allow, id, className, onLoad } = props
+  const {
+    src,
+    srcAccount,
+    width,
+    height,
+    title,
+    allow,
+    id,
+    className,
+    onLoad,
+  } = props
   const handles = useCssHandles(CSS_HANDLES)
+  const runtime = useRuntime()
 
   const handleIframeLoad = () => {
     if (!onLoad) return null
     // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
     return Function('IframeHandler', `"use strict";(${onLoad});`)(onLoad)
   }
 
+  const processSrc = () => srcAccount?.[runtime.account] ?? src
+
+  console.log('processSrc =>', processSrc())
+
   return (
     <div className={`${handles.container} w-100 flex justify-center`}>
       <iframe
         title={title}
-        src={src}
+        src={processSrc()}
         width={width}
         height={height}
         allow={allow}
@@ -52,6 +69,12 @@ Iframe.schema = {
       type: 'string',
       default: null,
     },
+    srcAccount: {
+      title: 'editor.iframe.srcAccount.title',
+      description: 'editor.iframe.srcAccount.description',
+      type: 'string',
+      default: null,
+    },
     width: {
       title: 'editor.iframe.width.title',
       type: 'number',