Release Notes

v2 10 0 this release adds an option to return expanded orders objects ( orderbig instead of ordersmall ) from the useorders hook to use, pass this configuration object to either the useorders hook or the loadorders method useorders({ includedetails true }) see additional documentation here v2 9 0 this release adds support for recurring prepaid subscriptions and an emptycart method to the usecart hook v2 8 4 this release refactors the functionality added in v2 8 2 around the \<chordprovider/ > re initializing it fixes issues where page navigation changes could inadvertently recreate the application state and cause it to act unpredictibly with this update, the state is created exactly once, when the app initializes, and any subsequent updates to it will not cause it to be created again v2 8 3 this release adds support for chord's update prepaid subscription redemption methods you can now setup your storefront to have prepaid subscription redeemable via redemption code, right in time for the holiday season! v2 8 2 this pr fixes a case where any re render of the \<chordprovider> component caused a re initialization of the application state now, the application state is only re initialized when one of the \<chordprovider> props changes the config param object doesn't need to be memoized before passing to \<chordprovider> , because we're doing a deep equal check, but any functions that are part of the config param should be v2 8 1 this pr updates usecart hook methods to return the current cart object this makes complex interactions with this hook much easier to orchestrate in user space code for example import { useeffect } from 'react' import { usecart, useanalytics } from '@chordcommerce/react autonomy' const impliedcheckoutpage = ({ sku }) => { const { addtocart } = usecart() const { trackcartviewed } = useanalytics() useeffect(() => { addtocart({ sku, quantity 1 }) then((cart) => trackcartviewed({ products cart lineitems, })) }, \[sku]) } without this, we would need multiple useeffects listening to the changes in cart, which may not coincide with the item being added to the cart (i e a promo code being added in this above component could cause the event to fire twice) v2 8 0 adds checkredemptioncodevalidity , redeemgiftcard , and redeemprepaidsubscription methods to the usecart hook v2 7 0 adds a getprice method to the useproduct hook v2 5 0 this release adds support for changing the product sku and quantity of a subscription using the updatesubscription method v2 4 1 this release adds exports for the useorder and useorders hooks previously, these hooks existed but had to be imported from @chordcommerce/react autonomy/dist now, these hooks can be imported like v2 4 0 this release had internal changes only v2 3 1 this release has fixes to the segment events “product added”, “subscription cancelled”, “subscriptionpaused”, “subscriptionresumed”, and “subscriptionskipped” “product added” fixes the “product added” event for subscriptions previously had an empty string for the url property the url property is now consistent with other segment events the “product added” event for subscriptions previously had the numeric product id for the product id property the product id property is now the product slug, which is the value chord uses for the product id property in all other events the “product added” event for subscriptions previously used the product’s image miniurl for the image url property the image url property now defaults to first the largeurl , then the smallurl , and then the miniurl , choosing the first one that’s available this is the logic chord uses for the image url property in all other events the “product added” event for subscriptions previously could have an incorrect quantity property when, prior to the event, another subscription for the same sku had been added to the cart this has been fixed “subscription cancelled”, “subscriptionpaused”, “subscriptionresumed”, and “subscriptionskipped” fixes previously, if the optional products argument was not provided to the corresponding sdk methods, the products array in the segment event would be empty this fix uses the subscription line item details to populate the products array in the segment event, so that if the optional products argument isn’t provided, some product data is still available in the segment events v2 2 4 this release fixes a bug where sdk methods returned by the useauth hook could cause a react component to re render when the methods were listed in the dependency array of a useeffect hook v2 2 3 this release populates the coupon property of segment events with the correct coupon prior to this release, if the coupon property referred to a specific line item or product (as in "product added", or the products array of "order completed"), the coupon property was always an empty string v2 2 2 this release fixes a bug where orders created after a user logged in (usually by placing an order, and then placing a second order immediately afterwards) were not always correctly associated with the user account prior to checking out and therefore didn't see applicable store credit this was a race condition between establishing the user authentication session on the order confirmation page and creating a new order v2 2 1 this release adds two properties to the "coupon denied" segment event, coupon id and reason "coupon denied" is sent when the addpromocode method results in an error because the promo code is invalid chord's tracking plan indicates that the coupon id property is required and the reason property is optional v2 2 0 this release adds an optional producturlformatter property to the \<chordprovider> config options producturlformatter can be used to globally customize product urls in segment event payloads example of using this option import { chordprovider } from '@chordcommerce/react autonomy' \<chordprovider config={{ producturlformatter product => { return product url || `/products/${product variant? slug}` }, }} \> default behavior if producturlformatter is not provided by the user, the default producturlformatter (which behaves in a backwards compatible way) is used (product product) string => { return product url || '' } v2 1 0 this release adds the getstockavailability method to the useproduct hook it can be used to check whether or not a given sku is in stock and can be used like so import { usestate, useeffect } from 'react' import { useproduct } from '@chordcommerce/react autonomy' const buynowbutton = ({ sku, onclick }) => { const { getstockavailability } = useproduct() const \[disabled, setdisabled] = usestate(false) useeffect(() => { getstockavailability({ sku }) then(a => setdisabled(!a instock)) }, \[sku]) return ( \<button disabled={disabled} onclick={onclick}> {disabled ? 'out of stock' 'buy now'} \</button> ) } v2 0 4 this release adds two properties to the "order completed" segment event has subscription and is recurring these properties already exist on the "order completed" event segment event sent by the chord oms has subscription is a boolean that indicates whether the order contains a subscription is recurring is a boolean that indicates whether the order is a subscription installment order and will always be false, since subscription installment orders are not placed via the sdk v2 0 3 this release adds a url property to the product type that is an optional or required argument you can pass to the following methods useanalytics() trackcartviewed() useanalytics() trackproductclicked() useanalytics() trackproductviewed() useanalytics() trackvariantclicked() usecart() addtocart() usecart() removefromcart() usecheckout() finalizecheckout() usecheckout() preparecheckout() useproduct() createstockrequest() usesubscription() cancelsubscription() usesubscription() pausesubscription() usesubscription() resumesubscription() usesubscription() skipsubscription() when the url property is given a value, the value will be sent as the url property in the resulting segment event v2 0 2 this release corrects how we send the acs store header to the oms this is necessary for storefronts with multiple stores (i e d2c and b2b chord setups) in order to use this functionality, you must supply a storeslug prop like so import chordprovider from '@chordcommerce/react autonomy' import { stytchclient } from '@chordcommerce/chord stytch' import { stytchprovider } from '@stytch/nextjs' const app = ({ component, pageprops }) => { const authclient = new stytchclient({ apikey process env stytch api key, }) return ( \<chordprovider config={{ domain process env chord oms domain, brandname process env chord oms brand name, storeid process env chord oms store id, omsid process env chord oms id, tenantid process env chord oms tenant id, // add this prop to the config for multiple storefront operations storeslug process env chord oms store slug, }} authclient={authclient} \> \<stytchprovider stytch={authclient getserviceclient()}> \<component { pageprops} /> \</stytchprovider> \</chordprovider> ) } omitting this value will cause all requests to go against the default storefront in the oms you can find the storefront's slug in the oms on the following screen v2 0 0 this release adds an “order completed” segment event to the finalizecheckout() method previously, finalizecheckout() sent a “checkout completed” segment event now, finalizecheckout() sends both “order completed” and “checkout completed” no changes to your website code are required to upgrade to this release however, we’re releasing this change as a new major version because the “order completed” event is a standard event that many segment destinations process automatically, and adding it may impact the way your segment destinations track conversions and revenue “order completed” is part of the segment ecommerce event spec https //segment com/docs/connections/spec/ecommerce/v2/ it is usually mapped by default to standard conversion/purchase events in segment destinations like the facebook pixel https //segment com/docs/connections/destinations/catalog/facebook pixel/ and tiktok conversions https //segment com/docs/connections/destinations/catalog/tiktok conversions/ destinations you can override this mapping in the segment destination settings you may have changed the event mapping in your segment destination settings to map “checkout completed” to the conversion/purchase event for the destination this will continue to work the chord oms back end segment source has always sent an “order completed” event, and you may have connected segment destinations to this source that are using this event to track conversions and revenue we recommend continuing to rely on this “order completed” event, if possible, because events from back end sources tend to be more reliable and accurate (you can read more about this from segment https //segment com/academy/collecting data/when to track on the client vs server/ ) if you currently have any segment destinations connected to both the chord oms back end segment source (typically named "my company back end (production)”) and your website front end segment source (typically named "my company front end (production)”), you may want to add a destination filter https //segment com/docs/guides/filtering data/#destination filters to stop your destination from receiving “order completed” events from one of the two chord segment sources if a destination receives an “order completed” event from both sources, that could result in revenue or conversions being double counted note regarding the google universal analytics segment destination this destination accepts total or revenue as a property on "order completed", but not both the "order completed" event does include both of these properties, to match the segment ecommerce spec and to be compatible with other segment destinations you may need to add a destination specific transformation to remove one of the two properties v1 7 0 this release adds eventing for when a subscription is added or removed from the cart adding a subscription to the cart will trigger a product added event with the interval and actionable date attached to it removing a subscription from the cart will trigger a product removed event with the same attributes reach out to chord support for instructions on how to add these properties to your tracking plan v1 5 0 / v1 6 0 these releases introduce the ability to purchase prepaid / gift subscriptions in your storefront through the purchaseprepaidsubscription method in usecart the purchasing flow for prepaid subscriptions roughly follows customer clicks purchase on the prepaid subscription storefront collects the email, name and shipping information for the recipient of prepaid subscription that information is passed to the sdk method which will return a checkout session token the caller should direct the customer directly to checkout, where the only item in the cart will be the prepaid subscription and the shipping information will already be filled in upon successful purchase, the subscription is immediately activated and will begin shipping to the recipient in future releases, the shipping date, notifications and redemption methods will be controllable through this new method if the customer backs out of the purchase, the order is lost more detailed documentation is below sdk documentation for the new method api documentation for the endpoint the sdk method calls (optional) instructions for how one might setup a prepaid subscription type in the cms v1 2 0 / 1 3 0 these releases have several fixes related to associating an existing guest cart with a user that has logged in passwordless, magic link contexts the major change to be aware of here is that, eventually, your application is going to need to have a route that explictly handles the code exchange in these contexts this should already be the case for users using chord stytch, but will be a new requirement if you are using chord magic with this library here is an example of what that page might look like, should you need inspiration v1 0 0 this release has authentication, cart, and user related fixes that may be breaking in some contexts previous to this, we were loading authentication tokens, carts, and users outside of our core redux initialization logic and offloading that to application level useeffects or in useeffects in useauth, usecart, and useuser with this release, we have moved those requests to the store initialization logic such that they are only requested once when the site loads for the first time this change means that your application will make less requests and will sidestep a potential race condition around chord's login logic what this means for you if you have any calls in your components that use useauth's gettoken function, usecart's loadcart function, and/or useuser's loaduser function, you should probably remove those and respond to the state provided by these hooks v0 1 0 this is the initial release similar react hooks and methods were previously available in the next js starter and gatsby theme these have been moved into react autonomy , and improved with these changes typescript support react autonomy has complete typescript support with type definitions removed dependency on cms product catalog previously, all products in the cms had to belong to a single catalog a bootstrapreduxstore query fetched the catalog from the cms on every page, and redux stored the catalog and used it to add product metadata, like descriptions and images, to product related segment tracking events react autonomy removes this dependency on a product catalog and instead adds an optional product argument to some sdk methods, allowing you to provide the product from the cms and control the cms query jsdoc documentation react autonomy includes function documentation following the jsdoc specification improved hooks and methods names, parameters, and behavior has been standardized across the sdk