Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@W-14016114: Move Storefront Preview Set up to the SDK #1430

Merged
Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
b0fd556
Update Storefront Preview client script URL.
wjhsf Aug 28, 2023
75093f2
Create Storefront Preview component.
wjhsf Aug 30, 2023
2bab299
Temp fixes to see changes.
wjhsf Aug 30, 2023
06068e9
Revert "Temp fixes to see changes."
wjhsf Aug 30, 2023
2dad129
Change Storefront Preview component to hook in react sdk.
wjhsf Aug 31, 2023
64f3c5b
Use origins, not hostnames.
wjhsf Aug 31, 2023
a433631
Affordances for local development.
wjhsf Aug 31, 2023
e5d51d1
Make cleanup fast and loose.
wjhsf Aug 31, 2023
d03135a
Allow Runtime Admin staging environment to host iframes.
wjhsf Aug 31, 2023
7fc2caf
Use parent origin when loading client script.
wjhsf Aug 31, 2023
8d35e9b
Load script in effect instead of component.
wjhsf Aug 31, 2023
c02ccbc
add preview script based on origin
alexvuong Sep 2, 2023
792af53
Merge branch 'feature/v3-storefront-preview' into preview/add-preview…
alexvuong Sep 5, 2023
857341e
create storefront preview Provider
alexvuong Sep 5, 2023
588c2bc
fix naming
alexvuong Sep 5, 2023
2f15a10
use normal component instead of a provider
alexvuong Sep 6, 2023
7342be1
add preview storefront component in app in retail app instead of conf…
alexvuong Sep 6, 2023
db269a6
minor tweak
alexvuong Sep 6, 2023
1c19db5
minor tweak
alexvuong Sep 6, 2023
9cc11b8
set up STOREFRONT_PREVIEW in window object
alexvuong Sep 6, 2023
ec97c7f
linting
alexvuong Sep 6, 2023
8b6925e
clean up
alexvuong Sep 7, 2023
7a6d7b3
PR feedback
alexvuong Sep 7, 2023
6cf285b
add tests
alexvuong Sep 7, 2023
a8d46e1
add tests
alexvuong Sep 7, 2023
2764c0c
add tests
alexvuong Sep 7, 2023
38cc91c
linting
alexvuong Sep 7, 2023
e906c4a
add comment
alexvuong Sep 7, 2023
14f63f6
create path alias
alexvuong Sep 7, 2023
1f270b4
add comment
alexvuong Sep 7, 2023
3b213f7
remove using MRT env detection
alexvuong Sep 8, 2023
134fe93
PR feedback
alexvuong Sep 8, 2023
f19dc6b
PR feedback
alexvuong Sep 8, 2023
0095b3e
PR feedback
alexvuong Sep 8, 2023
d497d9d
PR feedback
alexvuong Sep 8, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use parent origin when loading client script.
wjhsf committed Aug 31, 2023
commit 7fc2caf79935f543d887cef3a813e54a2bc837e4
Original file line number Diff line number Diff line change
@@ -15,14 +15,36 @@ const TRUSTED_ORIGINS = [
'https://runtime-admin-preview.mobify-storefront.com'
]

/** Detects whether the storefront is running in an iframe. */
const detectInIframe = () => typeof window !== 'undefined' && window.parent !== window.self

/** Gets the parent origin when running in an iframe. */
const getParentOrigin = () => {
if (detectInIframe()) {
if (window.location.ancestorOrigins) return window.location.ancestorOrigins[0]
// ancestorOrigins does not exist in Firefox, so we use referrer as a fallback
if (document.referrer) return new URL(document.referrer).origin
}
}

const isParentOriginTrusted = (parentOrigin) => {
return window.location.hostname === 'localhost'
? parentOrigin === 'http://localhost:4000' // Development
: TRUSTED_ORIGINS.includes(parentOrigin) // Production
}

/** Detects whether the storefront is running in an iframe as part of Storefront Preview. */
const detectStorefrontPreview = () => {
if (typeof window === 'undefined' || window.parent === window.self) return false
const parentOrigin = window.location.ancestorOrigins?.[0] ?? new URL(document.referrer).origin
if (window.location.hostname === 'localhost') {
return parentOrigin === 'http://localhost:4000'
}
return TRUSTED_ORIGINS.includes(parentOrigin)
const parentOrigin = getParentOrigin()
return Boolean(parentOrigin) && isParentOriginTrusted(parentOrigin)
}

/** Returns the URL to load the Storefront Preview client script from the parent origin. */
const getClientScript = () => {
const parentOrigin = getParentOrigin() ?? 'https://runtime.commercecloud.com'
return parentOrigin === 'http://localhost:4000'
? 'http://localhost:4000/mobify/bundle/development/static/storefront-preview.js'
: `${parentOrigin}/cc/b2c/preview/preview.client.js`
}

/**
@@ -34,14 +56,11 @@ const detectStorefrontPreview = () => {
*/
export const useStorefrontPreview = (customizations = {}, enabled = detectStorefrontPreview()) => {
const [, forceUpdate] = useReducer((x) => x + 1, 0)
const defaults = {
rerender: () => forceUpdate()
}

useEffect(() => {
if (enabled) {
window.STOREFRONT_PREVIEW = {
...defaults,
rerender: () => forceUpdate(),
...window.STOREFRONT_PREVIEW,
...customizations
}
@@ -52,15 +71,10 @@ export const useStorefrontPreview = (customizations = {}, enabled = detectStoref
}
}, [enabled, forceUpdate])

const clientScript =
process.env.NODE_ENV === 'development'
? 'http://localhost:4000/mobify/bundle/development/static/storefront-preview.js'
: 'https://runtime.commercecloud.com/cc/b2c/preview/preview.client.js'

const StorefrontPreview = () =>
enabled && (
<Helmet>
<script src={clientScript} type="text/javascript"></script>
<script src={getClientScript()} type="text/javascript"></script>
</Helmet>
)