diff --git a/.changeset/mighty-toys-eat.md b/.changeset/mighty-toys-eat.md
new file mode 100644
index 00000000..5efebe66
--- /dev/null
+++ b/.changeset/mighty-toys-eat.md
@@ -0,0 +1,5 @@
+---
+"@godaddy/react": patch
+---
+
+Add currency code from sku for product card
diff --git a/packages/react/src/components/storefront/hooks/use-add-to-cart.ts b/packages/react/src/components/storefront/hooks/use-add-to-cart.ts
index 43cd8b8d..7ea043c5 100644
--- a/packages/react/src/components/storefront/hooks/use-add-to-cart.ts
+++ b/packages/react/src/components/storefront/hooks/use-add-to-cart.ts
@@ -28,14 +28,6 @@ export function useAddToCart(options?: UseAddToCartOptions) {
storeId: context?.storeId || '',
channelId: context?.channelId || '',
},
- totals: {
- subTotal: { value: 0, currencyCode: 'USD' },
- shippingTotal: { value: 0, currencyCode: 'USD' },
- discountTotal: { value: 0, currencyCode: 'USD' },
- feeTotal: { value: 0, currencyCode: 'USD' },
- taxTotal: { value: 0, currencyCode: 'USD' },
- total: { value: 0, currencyCode: 'USD' },
- },
},
context.storeId!,
context.clientId!,
diff --git a/packages/react/src/components/storefront/product-card.tsx b/packages/react/src/components/storefront/product-card.tsx
index 0829d9b5..cf89354a 100644
--- a/packages/react/src/components/storefront/product-card.tsx
+++ b/packages/react/src/components/storefront/product-card.tsx
@@ -108,6 +108,10 @@ export function ProductCard({
const priceMax = product?.priceRange?.max || priceMin;
const compareAtMin = product?.compareAtPriceRange?.min;
const isOnSale = compareAtMin && compareAtMin > priceMin;
+ const currencyCode =
+ product?.skus?.edges?.find(
+ edge => edge?.node?.prices?.edges?.[0]?.node?.value?.currencyCode
+ )?.node?.prices?.edges?.[0]?.node?.value?.currencyCode || 'USD';
const hasOptions = false;
const isPriceRange = priceMin !== priceMax;
@@ -225,12 +229,11 @@ export function ProductCard({
- {/* TODO: Use dynamic currency from store/product when available instead of hardcoded USD */}
{isPriceRange
- ? `${formatCurrency({ amount: priceMin, currencyCode: 'USD', inputInMinorUnits: true })} - ${formatCurrency({ amount: priceMax, currencyCode: 'USD', inputInMinorUnits: true })}`
+ ? `${formatCurrency({ amount: priceMin, currencyCode, inputInMinorUnits: true })} - ${formatCurrency({ amount: priceMax, currencyCode, inputInMinorUnits: true })}`
: formatCurrency({
amount: priceMin,
- currencyCode: 'USD',
+ currencyCode,
inputInMinorUnits: true,
})}
diff --git a/packages/react/src/components/storefront/product-details.tsx b/packages/react/src/components/storefront/product-details.tsx
index 7e072ca8..71ffb60d 100644
--- a/packages/react/src/components/storefront/product-details.tsx
+++ b/packages/react/src/components/storefront/product-details.tsx
@@ -349,6 +349,14 @@ export function ProductDetails({
const compareAtMax = selectedSku
? compareAtMin
: product?.compareAtPriceRange?.max;
+ const currencyCode =
+ skuPrice?.value?.currencyCode ||
+ product?.skus?.edges?.find(
+ edge => edge?.node?.prices?.edges?.[0]?.node?.value?.currencyCode
+ )?.node?.prices?.edges?.[0]?.node?.value?.currencyCode ||
+ 'USD';
+ const compareAtCurrencyCode =
+ skuPrice?.compareAtValue?.currencyCode || currencyCode;
const isOnSale = compareAtMin && compareAtMin > priceMin;
const isPriceRange = priceMin !== priceMax;
const isCompareAtPriceRange =
@@ -540,20 +548,20 @@ export function ProductDetails({
{isPriceRange
- ? `${formatCurrency({ amount: priceMin, currencyCode: 'USD', inputInMinorUnits: true })} - ${formatCurrency({ amount: priceMax, currencyCode: 'USD', inputInMinorUnits: true })}`
+ ? `${formatCurrency({ amount: priceMin, currencyCode, inputInMinorUnits: true })} - ${formatCurrency({ amount: priceMax, currencyCode, inputInMinorUnits: true })}`
: formatCurrency({
amount: priceMin,
- currencyCode: 'USD',
+ currencyCode,
inputInMinorUnits: true,
})}
{isOnSale && compareAtMin && (
{isCompareAtPriceRange
- ? `${formatCurrency({ amount: compareAtMin, currencyCode: 'USD', inputInMinorUnits: true })} - ${formatCurrency({ amount: compareAtMax!, currencyCode: 'USD', inputInMinorUnits: true })}`
+ ? `${formatCurrency({ amount: compareAtMin, currencyCode: compareAtCurrencyCode, inputInMinorUnits: true })} - ${formatCurrency({ amount: compareAtMax!, currencyCode: compareAtCurrencyCode, inputInMinorUnits: true })}`
: formatCurrency({
amount: compareAtMin,
- currencyCode: 'USD',
+ currencyCode: compareAtCurrencyCode,
inputInMinorUnits: true,
})}
diff --git a/packages/react/src/lib/godaddy/catalog-storefront-queries.ts b/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
index 66158673..385624d3 100644
--- a/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
+++ b/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
@@ -54,6 +54,15 @@ export const SkuGroupsQuery = graphql(`
id
label
name
+ prices(first: 1) {
+ edges {
+ node {
+ value {
+ currencyCode
+ }
+ }
+ }
+ }
inventoryCounts {
edges {
node {
@@ -133,6 +142,15 @@ export const SkuGroupQuery = graphql(`
id
label
name
+ prices(first: 1) {
+ edges {
+ node {
+ value {
+ currencyCode
+ }
+ }
+ }
+ }
inventoryCounts {
edges {
node {