Handle empty unitEnum in getUnitString function

[lynchv]

TL;DR

Closes https://github.com/shop/issues-headless/issues/1281

Added handling for null or undefined unit values in the getUnitString function.

Inital Error

TypeError: Cannot read properties of null (reading 'toLowerCase')

Why make this change?

When a product variant has unitPrice but its unitPriceMeasurement.referenceUnit is null, getUnitString() calls .toLowerCase() on null, crashing the render. This cascading failure then causes a secondary error when downstream code accesses .cart on the undefined result of the failed component initialization.

[lynchv]

• Handle empty unitEnum in getUnitString function #938 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[kdaviduik]

Needs a changeset. https://github.com/Shopify/buy-button-js/blob/main/DEPLOYING.md#deploying-and-publishing-a-new-version-of-buybuttonjs

[kdaviduik]

Fixing the issue purely at this level returns an empty string, causing the template to render "$10.00 /" (price with trailing slash, no unit). This looks broken.

Imo we should add in a check for this inside of showUnitPrice

get showUnitPrice() {
    if (!this.selectedVariant ||
        !this.selectedVariant.unitPrice ||
        !this.options.contents.unitPrice) {
      return false;
    }
    // Add this validation
    const measurement = this.selectedVariant.unitPriceMeasurement;
    if (!measurement || !measurement.referenceUnit) {
      return false;
    }
    return true;
  }

Also this change needs tests