commerce icon indicating copy to clipboard operation
commerce copied to clipboard

Bigcommerce Product and Variant types are not accurate

Open maxmezzomo opened this issue 2 years ago • 0 comments

This may not be an issue as I am not sure about the intention of the typings or the completion status of certain aspects of the project. I may also have missed a step in the setup. I think it would be helpful to clarify either way, I may be able to help with certain aspects if needed.

Off a fresh clone and deploy and integration with a new Bigcommerce account. The product variant type in framework/commerce/types/product.ts is defined as such:

export type ProductVariant = {
  id: string | number
  options: ProductOption[]
  availableForSale?: boolean
}

Debugging will show the type of variant, for example, to be

{
  "id": 1,
  "options": [
    {
      "id": 108,
      "values": [
        {
          "label": "XS"
        }
      ],
      "__typename": "MultipleChoiceOption",
      "displayName": "Size"
    },
    {
      "id": 109,
      "values": [
        {
          "label": "Silver",
          "isDefault": false,
          "hexColors": [
            "#cccccc"
          ]
        }
      ],
      "__typename": "MultipleChoiceOption",
      "displayName": "Color"
    }
  ],
  "defaultImage": null,
  "prices": {
    "price": {
      "value": 40.83,
      "currencyCode": "GBP"
    },
    "salePrice": null,
    "retailPrice": null
  },
  "inventory": {
    "aggregated": null,
    "isInStock": true
  }
}

which seems like the schema type from framework/bigcommerce/schema.d.ts with the options field modified. From what I have looked at this is happening in framework/bigcommerce/lib/normalize.ts . This may the desired behaviour to allow for compatibility of core features with all providers.

Then perhaps the normalize function could benefit from some addition in functionality, as an example, the availableForSale field on the ProductVariant seems to be never be defined, I believe this is across providers. The consequence as I understand is that then, unless a particular provider happens to have a field named availableForSale in their API response directly, the field will always be undefined and out of stock or unavailable items can be added to the bag.

Or perhaps, as only provider would be used at a time, the actual types could be resolved, I dont know if that is the intended behaviour, given the file framework/bigcommerce/schema.d.ts is included. Currently I change

          <Button
            ...
            disabled={variant?.availableForSale === false}
          >
            {variant?.availableForSale === false
              ? 'Not Available'
              : 'Add To Cart'}
          </Button>

in components/product/ProductSidebar/ProductSidebar.tsx to

          <Button
            ...
            disabled={variant?.inventory.isInStock=== false}
          >
            {variant?.inventory.isInStock=== false
              ? 'Not Available'
              : 'Add To Cart'}
          </Button>

which works but not with typescript.

Thanks for the time, Best.

maxmezzomo avatar Oct 19 '21 17:10 maxmezzomo