shopify / hydrogen-react Goto Github PK

Describe the bug
Using in _app throws the error:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

- "@shopify/hydrogen-react": "^2022.10.2"
- "next": "^13.0.3"
- Node v16.17.1

CartLineQuantityAdjustButton disabled prop needs to come after passthroughProps, otherwise our custom logic gets wiped out by passthrough props.

Create a component that uses SF API's CartLineCost to render the estimated cost of a cart line after discounts.

More details to be added.

• getStorefrontUrl
• get StorefrontHeaders

Describe the bug
Storefront client incorrectly warns "You are attempting to use a private token in an environment where it can be easily accessed by anyone." when running from code on the server.

The cause
In packages/react/src/storefront-client.ts, line 50 the condition used to show the warning checks if globalThis is truthy instead of checking if globalThis.document is truthy. globalThis is defined on both servers and clients.

To Reproduce

Steps to reproduce the behavior:

1. npm create @shopify/hydrogen@latest
2. Demo Store
3. TypeScript
4. Install anywhere
5. Install dependencies with npm? No
6. cd projectDir
7. npx yarn
8. npx yarn dev

Using npm doesn't seem to trigger the warning as it seems to use the "default" module exports instead of the "developer" module exports. The default module exports (production exports) do not contain this warning.

Expected behavior
Code running on the server does not warn about using a private token.

Describe the bug

When using the CartLineQuantityAdjustButton component, any lineItem attributes already present on the item are cleared when using the component - increasing or decreasing.

Underlying Issue

In CartLineQuantityAdjustButton.tsx#L36

linesUpdate([{id: cartLine.id, quantity}]);

To Reproduce

StackBlitz

Add a product to cart and the lineItem will include:

"attributes": [
  {
    "key": "Custom",
    "value": "Hello world"
  }
]

Increasing the quantity in the cart removes the attributes:

  "attributes": []

Expected behaviour

The assumption is that any attributes already attached to the lineItem should be left intact when altering the quantity since the lineItem is the same.

Is your feature request related to a problem? Please describe.
Today, we hardcode a trailing myshopify.com to the developer's storefront domain when creating the storefront client: https://github.com/Shopify/hydrogen-ui/blob/2022-10/packages/react/src/storefront-client.ts#L44-L48

This is because it represents the "permanent domain" for a Shopify storefront, and because it's the most commonly used format.

However, technically any domain pointed at the storefront can field API requests, not just the permanent domain.

Specifically, this unlocks:

• A potential future where a session could be established via cookie when a client-side request is made from the same domain
• Better internal tooling (pointing a Hydrogen v2 installation at a Spin instance of core, for example)

Describe the solution you'd like
The shop domain should respect whatever value I provide to it.

TypeError: _virtual_with_selector_mjs__WEBPACK_IMPORTED_MODULE_4__.w.exports.useSyncExternalStoreWithSelector is not a function

Using react 18.2.0

https://www.typescriptlang.org/tsconfig#isolatedModules

Is your feature request related to a problem? Please describe.
<ShopifyProvider /> documentation is wrong, and doesn't reflect update to shopifyConfig prop

Describe the solution you'd like
Docs updated :]
https://shopify.dev/api/hydrogen/components/global/shopifyprovider#shopifyprovider-in-alternate-frameworks

Is your feature request related to a problem? Please describe.
We currently define an enum called ShopifyAppSource to disambiguate between the Hydrogen and Custom Storefronts channel: https://github.com/Shopify/storefront-kit-react/blob/6184517a2bf2b62198f8601ff798d851b604d386/packages/react/src/analytics-constants.ts#L31

It's probably called this because it's literally referring to an "API Client ID" aka an internal app.

However, this is an internal concern and not a merchant- or dev-facing concern.

This is confusing, because it indicates to me that an "app" is somehow involved with me, an external-facing developer or merchant.

Describe the solution you'd like
Instead, we should call this something like ShopifyChannelType.

During #171 we did another audit of what we have in this package and what we were supposed to have in this package. It was discovered that there are two things missing, and one thing in this package that wasn't supposed to be. A breakdown:

We need to deprecate & remove at next major:

• #173

We need to add:

• CartLineQuantity
• CartLineQuantityAdjustButton

export helper for TypeScript + GraphQL codegen to assign correct usage of SFAPI custom scalars. For example, by default the URL scalar is any - but we know it is actually a string

createStorefrontClient takes in storeDomain like so:

storeDomain: 'hydrogen-preview',

ShopifyProvider takes in storeDomain like so:

storeDomain: `hydrogen-preview.myshopify.com`,

That's annoying and unnecessary. In addition, #70 was just merged that adds a function for getting the fully-qualified URL to createStorefrontClient, which includes the https://. So it would be good to add that to ShopifyProvider, too.

I feel like ideally we go the createStorefrontClient route and only ask for the name (e.g. just hydrogen-preview, and not hydrogen-preview.myshopify.com), but I'm open to other ideas.

#73 (comment)

Enable devs to report bugs/issues easily by providing a Stackblitz to reproduce them

Describe the bug
When fetching the cart with Hydrogen builtin components, the cart and its products is fetched in the default language - not in a selected language.

When looking at the source graphql query, only the countryCode is taking into account, not the languageCode:

https://github.com/Shopify/hydrogen/blob/2aaf9ae7b32d5dc3d01aa1974490b5191f491d4d/packages/hydrogen/src/components/CartProvider/cart-queries.ts#L103

To Reproduce
Fetch a cart with a product. It won't take the selected language into account.

Expected behaviour
Fetch the cart and its products in a given language.

Additional context
Add any other context about the problem here. eg.

• Hydrogen version: 1.3.0
• Node version: 16.15.1
• Device details: MacOS

Components to be removed:

• CartLineImage
• CartLineProductTitle
• CartLines

Describe the bug
When adding multiple discounts to a cart with cartCreate() from useCart() it only adds the first discount in the array provided.

To Reproduce

1. Create a cart using cartCreate()
   cartCreate({ discountCodes: ['discount_1', 'discount_2', 'discount_3'], lines: line_items })

2. Go to checkout with that cart and see that only 'discount_1' is added.

Expected behaviour
It should add all discounts provided in the array of discounts.

Additional context
Since Shopify now supports multiple discounts it should be supported by Hydrogen stores as well.

• Hydrogen version: ^1.2.0
• Node version: v18.6.0

The useMoney() example references a variable named variant which is undefined

Is your feature request related to a problem? Please describe.
Now that you can now create Rich Text metafields in the admin it would be great to be able to easily parse them using parseMetafield inside of React Storefront Kit. The rich_text_field type doesn't seem to be currently supported

Describe the solution you'd like
Recognizing the rich_text_field and translating the value to either an HTML string or React Nodes.

Describe alternatives you've considered
I've created a utility based on experimenting with the JSON format but an official solution would probably be best when we deploy.

As I was building the guides for hydrogen 2, some of the feedback I received was that wrapping the whole app in just to use the Shop Pay button felt strange.

Snooping on the code a bit, it looks like the only code that is being pulled from the provider is the shop ID.

Describe the solution you'd like
Include 2 ways to use Shop Pay button (and other components where it makes sense).

If wrapped in a Provider, you don't need to pass in props like shop ID.
If not wrapped in a Provider, you can pass in props to the component.

Additional context
I think the overall goal is to have something copy/pasteable that works in any context.

Description

We need to add the ability to purchase product(s) with Google Pay.
In Shopify storefronts with Liquid, there are two use cases for the Google Pay button:

• On the product page
  • When clicked, it opens the Google Pay flow for purchasing just the product from the product page
• On the cart page
  • When clicked, it open the Google Pay flow for purchasing the entire cart

Requirements

• The button should only be visible when the merchant has Google Pay enabled
• When clicked, the Google Pay checkout flow should be initiated
  • On the product page: for purchasing just that product
  • On the cart page: for purchasing the entire cart
• The button should be rendered by the DynamicCheckoutButton component when appropriate

Notes

• The DynamicCheckoutButton component has a really rough first pass on displaying the GooglePay button (see code here. We'll likely want to extract this code into its own component GooglePayButton and iterate on it from there.

Describe the bug
Using the buyerIdentityUpdate function from the useCart hook, doesn't respect the deliveryAddressPreferences object entered.

To Reproduce

1. Call function with values

buyerIdentityUpdate({
      countryCode: 'GB',
      email: '[email protected]',
      phone: '123412344',
      deliveryAddressPreferences: [{
        deliveryAddress: {
          address1: '1',
          address2: '2',
          city: 'London',
          country: 'GB',
          firstName: 'Test',
          lastName: 'Example',
          phone: '123412344',
          zip: 'SW12 1JG',
          province: 'London',
        }
      }]
 })

2. Go to the checkout link, either via component or fetch checkoutUrl from hook
3. Note shipping address is empty

Expected behavior
Shipping address to be populated

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

• Hydrogen UI version: 2022.10.5
• Framework used: NextJS
• Node version: v16.18.0
• Browser: Chrome 108.0.5359.98

Is there a reason Analytics is supported in Hydrogen but not -ui?

Describe the bug

Importing and using anything from @shopify/hydrogen-react in a client component in a Hydrogen project causes the following error.

Error: Failed to resolve entry for package "@shopify/hydrogen-react". The package may have incorrect main/module/exports specified in its package.json

I run into this when attempting to use the new metafieldParser function introduced with #45, but I can replicate this by trying to use anything from the library.

To Reproduce

1. Install Hydrogen UI (e.g. yarn add @shopify/hydrogen-react)
2. Import anything (e.g. import { Metafield } from '@shopify/hydrogen-react')
3. Use the import (e.g. <Metafield data={metafield} />)
4. Start development (e.g. yarn run dev)

Expected behavior

Using the Hydrogen UI library in a Hydrogen project shouldn't throw an error.

Additional context

• Hydrogen UI version 2022.10.4
• Framework used Hydrogen
• Node version 16.18.0
• Browser Google Chrome Version 107.0.5304.110 (Official Build) (64-bit)

Describe the bug
I'm using a custom cart fragment to also fetch discountAllocations from the API. They properly update when adding a coupon using discountCodesUpdate, but when I remove a coupon, the discount is still being allocated to the cart. In the checkout, there is no discount applied anymore (as expected).

I guess this is more of an API problem rather than a bug in the Hydrogen React framework, but maybe you can still help or forward this issue to the API team.

Expected behavior
There should be no more discountAllocations applied to the cart after all discount codes have been removed.

Screenshots

No discount codes, but discount is still being applied

Additional context

• Hydrogen React version: 2023.1.5
• Framework used: Gatsby
• Browser: Chrome

Describe the bug
When adding items to the shopping cart with AddToCartButton using attributes passed through the attributes prop, the attributes later appear to be overridden and removed if the quantity for that cart line is adjusted using CartLineQuantityAdjustButton.

To Reproduce

https://stackblitz.com/edit/shopify-hydrogen-n3hfqc

I have minimally modified this to pass attributes through the AddToCartButton in ProductForm.client.jsx, and to display any attributes in the CartLineItem.client.jsx. To reproduce the bug, add an item to the shopping cart. It should show the attribute 'Test: Testing' when you open the shopping cart.

Once the quantity is increased, the 'Test: Testing' attribute disappears.

Expected behaviour
I expected attributes to be retained unchanged when the quantity of the cart line item is adjusted.

Screenshots
If applicable, add screenshots to help explain your problem.

Description

We need to add the ability to purchase with PayPal Express when the merchant has it enabled.
PayPal Express currently appears in two places in Liquid Shopify storefronts:

• On the product page
  • When clicked, it open the PayPal Express purchase flow for the product
• On the cart page
  • When clicked, it opens the PayPal Express purchase flow for the entire cart

Requirements

• The button should only be visible when the merchant has PayPal Express enabled
• When clicked, the PayPal checkout flow should be initiated
  • On the product page: only the product is being purchased
  • On the cart page: the entire cart is being purchased
• The button should be rendered by the DynamicCheckoutButton component

Notes

• The DynamicCheckoutButton component has a really rough first pass on displaying the PayPal button (see code here). We'll likely want to extract this code into its own component PayPalButton and iterate on it from there.

I think it would be nice to include that ruleset for eslint, especially since it's also recommended to include it as a default.

https://typescript-eslint.io/linting/typed-linting

However, there appears to be issues with the TS parser + ESLint configs and our *.example.(t|j)sx files; no matter what sort of configuration I attempt, those files still aren't "picked up" by TS+Eslint and there are errors with them. I've followed https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file and other guides and still get the error.

If we could work that out, then it would be nice as there are a bunch of errors+warnings that arise in the rest of our files because of that preset.

There's a chance that this repo get pulled back into the main hydrogen repo. If it does, then we'll need to migrate from yarn to npm.

I'll leave this as "blocked" for now as we aren't fully sure if that's going to happen or not

Describe the bug

The parseMetafield and parseMetafieldValue utilities don't return an array of strings for metafields of type list.single_line_text_field.

To Reproduce

1. Add metafield definition
2. Expose metafield to Storefront API
3. Select "Single line text" and "List of values"
4. Query product with metafield
5. Parse metafield using parseMetafield orparseMetafieldValue

Expected behaviour

The parseMetafield and parseMetafieldValue utilities should return an array of strings instead of a stringified array for this type of metafield.

Additional context

• Hydrogen version 1.3.2
• Node version 16.14.0
• Device details iMac (macOS Monterey 12.4)

Describe the bug
Typscript className prop does not exist on MediaFile. On the StackBlitz, the rendered tag does take the className even though TS shows an error. However, on my dev environment I get the error and the tag does not render the className.

To Reproduce
https://stackblitz.com/edit/vitejs-vite-vb4fw6?file=src%2Fcomponents%2Fproduct-gallery.client.tsx%3AL24-L24&terminal=dev

Expected behaviour
Passing className to MediaFile should render the media tag with the passed class name string.

Is your feature request related to a problem? Please describe.
Hydrogen UI discoverability (not a problem, but this issue is to help with that)

Describe the solution you'd like
Update https://shopify.dev/custom-storefronts/tools for Hydrogen UI

Describe alternatives you've considered

• Unclear on content at this point, so not sure whether a dedicated page is required or just an update to /tools

cc. @elisenyang

• Needs a link to the CONTRIBUTING.md file from the root readme
• contributing.md needs to clarify where certain commands are run from (e.g. ladle)

probably more to be added 🙂