diff --git a/CHANGELOG.md b/CHANGELOG.md index b99959a..78dd407 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index 8d662a1..a757bd2 100644 --- a/docs/README.md +++ b/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 diff --git a/react/Iframe.tsx b/react/Iframe.tsx index 7dcfac5..434f52f 100644 --- a/react/Iframe.tsx +++ b/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,8 +18,19 @@ 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 @@ -25,11 +38,15 @@ function Iframe(props: Props) { return Function('IframeHandler', `"use strict";(${onLoad});`)(onLoad) } + const processSrc = () => srcAccount?.[runtime.account] ?? src + + console.log('processSrc =>', processSrc()) + return (