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-14118931: Require getToken prop if enabled to true in StorefrontPreview Component #1440

Merged
merged 6 commits into from
Sep 19, 2023

Conversation

alexvuong
Copy link
Collaborator

@alexvuong alexvuong commented Sep 14, 2023

Description

This PR made change to StorefrontPreview component in the SDK to require getToken prop if enabled to true, and set it up in the retail app

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • (change1)

How to Test-Drive This PR

  • You need to test this change in the Preview context

  • Check out the code

  • Build your pwa-kit-react-sdk

  • Run the storefront

  • Run the Runtime Admin

  • Go to: http://localhost:4000/salesforce-systems/scaffold-pwa/alex/preview

  • Observe that script is loaded as expected, no error about getToken function is prompted in the console

  • To trigger the getProp error, remove the getToken in Retail App _app component

<StorefrontPreview  />
  • Reload preview page. You should see error as such
    image

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@alexvuong alexvuong requested a review from a team as a code owner September 14, 2023 00:19
@alexvuong alexvuong self-assigned this Sep 14, 2023
* @param {boolean} enabled - flag to turn on/off Storefront Preview feature
* @param {{function():string}} getToken - a STOREFRONT_PREVIEW customised function that fetches token of storefront
* @param {boolean} enabled - flag to turn on/off Storefront Preview feature. By default, it is set to true
* @param {function(): string | Promise<string>} getToken - A method that returns the access token for the current user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, with the latest change in Preview code, we expect the function to return either a string or a promise 👍

props['enabled'] === true &&
(props[propName] === undefined || typeof props[propName] !== 'function')
) {
return new Error(`${propName} is required for ${componentName} when enabled is true`)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: not only the prop is required, it should also be a function.

Suggested change
return new Error(`${propName} is required for ${componentName} when enabled is true`)
return new Error(`${propName} is a required function for ${componentName} when enabled is true`)

@@ -113,7 +113,7 @@ const App = (props) => {
const {children} = props
const {data: categoriesTree} = useLazyLoadCategories()
const categories = flatten(categoriesTree || {}, 'categories')

const {token} = useAccessToken()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const {token} = useAccessToken()
const {getTokenWhenReady} = useAccessToken()

How about using getTokenWhenReady instead? Because the token can be null initially.

wjhsf
wjhsf previously approved these changes Sep 18, 2023
@@ -12,8 +12,8 @@ import {detectStorefrontPreview, getClientScript} from './utils'

/**
*
* @param {boolean} enabled - flag to turn on/off Storefront Preview feature
* @param {{function():string}} getToken - a STOREFRONT_PREVIEW customised function that fetches token of storefront
* @param {boolean} enabled - flag to turn on/off Storefront Preview feature. By default, it is set to true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to explain here that enabled: true still only applies when the storefront is in a Runtime Admin iframe?

@alexvuong alexvuong merged commit 034dbe6 into develop Sep 19, 2023
20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants