Best way to access the customer group id/name across checkout?

[ff4500]

In the customers.mock.ts file, there's a line item for the id/name of the Customer's group membership:

checkout-js/src/app/customer/customers.mock.ts

Lines 41 to 44 in 13c66c5

	customerGroup: {
	id: 1,
	name: 'Customer group',
	},

Since it's not already implemented in the project, what's the best way to go about getting this information into the checkout flow? I realize that it would be fairly simple to tack it onto the existing customer data, say in CustomerInfo.tsx, but I'd like to have that data available for the whole Checkout process, in order to conditionally show some messages to certain customer groups, and not others.

It looks like it was implemented in the checkout-sdk-js awhile back. As I'm stumbling my way through Typescript on this trying to make it work, I've been relatively successful, but it seemed like this was the place to ask to get it implemented the right way.

I have already thrown some data into a file named CustomerGroup.tsx (based on CustomerInfo.tsx), and am able to pull the customer group info now, but exporting a component is clunky. I'd really like to be able to use the state info in other files in the repo: (truncated, but you get the idea)

...

interface WithCheckoutCustomerGroupProps {
  group: string;
}

const CustomerGroup: FunctionComponent<CustomerGroupProps & WithCheckoutCustomerGroupProps> = ({
  group,
  isSignedIn,
}) => {

  return (
    <>
      { isSignedIn && <>
        { group }
      </> }
    </>
  );
};

function mapToWithCheckoutCustomerGroupProps(
  { checkoutService, checkoutState }: CheckoutContextProps
): WithCheckoutCustomerGroupProps | null {
  const {
    data: { getCheckout, getCustomer },
    statuses: { isSigningOut },
  } = checkoutState;

 ...

  const { customerGroup } = customer;

  const group = (() => {
    if (customerGroup) {
      const { name } = customerGroup;
      if (name) {
        return name;
      } else {
        return '';
      }
    } else {
      return 'No Group';
    }
  })();

  return {
    group,
    methodId,
    isSignedIn: canSignOut(customer, checkout, methodId),
    isSigningOut: isSigningOut(),
    signOut: checkoutService.signOutCustomer,
  };
}

Thoughts on the best way to get this group info propagated across the project, for use in other places? It seems like the ability to get the group data exported on WithCheckout(CustomerGroup) is where the magic needs to happen.

Thanks.

[Laban1]

I have the same question...

[bc-0dp]

@bigcommerce/team-checkout could you have a look at this one 🙇