Skip to content

Commit

Permalink
feat: remove fetchAvailableCountries query from client (#1200)
Browse files Browse the repository at this point in the history
* refactor(core): use graphql for retrieving a list of countries

* feat(client): remove unused fetchAvailableCountries query
  • Loading branch information
chanceaclark authored Aug 1, 2024
1 parent 880753c commit 51704d9
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 64 deletions.
5 changes: 5 additions & 0 deletions .changeset/afraid-steaks-explode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-client": minor
---

Remove the `fetchAvailableCountries` query as it is no longer needed in Catalyst. This helps us remove queries that are dependent on the access token.
5 changes: 5 additions & 0 deletions .changeset/silly-spies-behave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": patch
---

Use the `geography` node to retrieve a list of countries. This removes one less dependency on the access token.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FragmentOf, graphql } from '~/client/graphql';
import { CouponCode } from './coupon-code';
import { CouponCodeFragment } from './coupon-code/fragment';
import { ShippingEstimator } from './shipping-estimator';
import { ShippingEstimatorFragment } from './shipping-estimator/fragment';
import { GeographyFragment, ShippingEstimatorFragment } from './shipping-estimator/fragment';
import { getShippingCountries } from './shipping-estimator/get-shipping-countries';

const MoneyFieldsFragment = graphql(`
Expand Down Expand Up @@ -42,18 +42,19 @@ export const CheckoutSummaryFragment = graphql(
);

interface Props {
data: FragmentOf<typeof CheckoutSummaryFragment>;
checkout: FragmentOf<typeof CheckoutSummaryFragment>;
geography: FragmentOf<typeof GeographyFragment>;
}

export const CheckoutSummary = async ({ data }: Props) => {
export const CheckoutSummary = async ({ checkout, geography }: Props) => {
const locale = await getLocale();
const t = await getTranslations({ locale, namespace: 'Cart.CheckoutSummary' });
const format = await getFormatter({ locale });
const messages = await getMessages({ locale });

const shippingCountries = await getShippingCountries();
const { cart, grandTotal, subtotal, taxTotal } = checkout;

const { cart, grandTotal, subtotal, taxTotal } = data;
const shippingCountries = await getShippingCountries({ geography });

return (
<>
Expand All @@ -68,7 +69,7 @@ export const CheckoutSummary = async ({ data }: Props) => {
</div>

<NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
<ShippingEstimator checkout={data} shippingCountries={shippingCountries} />
<ShippingEstimator checkout={checkout} shippingCountries={shippingCountries} />
</NextIntlClientProvider>

{cart?.discountedAmount && (
Expand All @@ -85,7 +86,7 @@ export const CheckoutSummary = async ({ data }: Props) => {
)}

<NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
<CouponCode checkout={data} />
<CouponCode checkout={checkout} />
</NextIntlClientProvider>

{taxTotal && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,16 @@ export const ShippingEstimatorFragment = graphql(
`,
[ShippingOptionsFragment, ShippingInfoFragment],
);

export const GeographyFragment = graphql(
`
fragment GeographyFragment on Geography {
countries {
entityId
name
code
}
}
`,
[],
);
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import { getCountries } from '~/client/management/get-countries';
import { FragmentOf } from 'gql.tada';

import { getShippingZones } from '~/client/management/get-shipping-zones';

export const getShippingCountries = async () => {
const [shippingZones, allCountries] = await Promise.all([getShippingZones(), getCountries()]);
import { GeographyFragment } from './fragment';

interface GetShippingCountries {
geography: FragmentOf<typeof GeographyFragment>;
}

export const getShippingCountries = async ({ geography }: GetShippingCountries) => {
const shippingZones = await getShippingZones();

const uniqueCountryZones = shippingZones.reduce<string[]>((zones, item) => {
item.locations.forEach(({ country_iso2 }) => {
Expand All @@ -24,11 +31,12 @@ export const getShippingCountries = async () => {
return zones;
}, []);

const shippingCountries = allCountries.flatMap((countryDetails) => {
const isCountryInTheList = uniqueCountryZones.includes(countryDetails.country_iso2);
const countries = geography.countries ?? [];
const shippingCountries = countries.flatMap((countryDetails) => {
const isCountryInTheList = uniqueCountryZones.includes(countryDetails.code);

if (isCountryInTheList) {
const { id, country: name, country_iso2: countryCode } = countryDetails;
const { entityId: id, name, code: countryCode } = countryDetails;

return { id, name, countryCode };
}
Expand Down
9 changes: 7 additions & 2 deletions core/app/[locale]/(default)/cart/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { CartItem, CartItemFragment } from './_components/cart-item';
import { CheckoutButton } from './_components/checkout-button';
import { CheckoutSummary, CheckoutSummaryFragment } from './_components/checkout-summary';
import { EmptyCart } from './_components/empty-cart';
import { GeographyFragment } from './_components/shipping-estimator/fragment';

export const metadata = {
title: 'Cart',
Expand All @@ -38,9 +39,12 @@ const CartPageQuery = graphql(
...CheckoutSummaryFragment
}
}
geography {
...GeographyFragment
}
}
`,
[CartItemFragment, CheckoutSummaryFragment],
[CartItemFragment, CheckoutSummaryFragment, GeographyFragment],
);

export default async function CartPage({ params: { locale } }: Props) {
Expand Down Expand Up @@ -70,6 +74,7 @@ export default async function CartPage({ params: { locale } }: Props) {

const cart = data.site.cart;
const checkout = data.site.checkout;
const geography = data.geography;

if (!cart) {
return <EmptyCart locale={locale} />;
Expand All @@ -88,7 +93,7 @@ export default async function CartPage({ params: { locale } }: Props) {
</ul>

<div className="col-span-1 col-start-2 lg:col-start-3">
{checkout && <CheckoutSummary data={checkout} />}
{checkout && <CheckoutSummary checkout={checkout} geography={geography} />}

<NextIntlClientProvider locale={locale} messages={{ Cart }}>
<CheckoutButton cartId={cartId} />
Expand Down
28 changes: 0 additions & 28 deletions core/client/management/get-countries.ts

This file was deleted.

21 changes: 0 additions & 21 deletions packages/client/src/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,27 +105,6 @@ class Client<FetcherRequestInit extends RequestInit = RequestInit> {
return response.json() as Promise<BigCommerceResponse<TResult>>;
}

async fetchAvailableCountries() {
const response = await fetch(
`https://${adminApiHostname}/stores/${this.config.storeHash}/v2/countries?limit=250`,
{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-Auth-Token': this.config.xAuthToken,
'User-Agent': this.backendUserAgent,
},
},
);

if (!response.ok) {
throw new Error(`Unable to get available Countries List: ${response.statusText}`);
}

return response.json() as Promise<unknown>;
}

async fetchCountryStates(id: number) {
const response = await fetch(
`https://${adminApiHostname}/stores/${this.config.storeHash}/v2/countries/${id}/states?limit=60`,
Expand Down

0 comments on commit 51704d9

Please sign in to comment.