Select Nonprofit

The select-nonprofit component integrates with the cart to allow customers to select a nonprofit to support as they check out.

Base component

File: src/app/components/beam/beam-select-nonprofit.tsx

"use client"
import React, { useEffect, useState, type FC } from 'react'
import dynamic from "next/dynamic";
import { events } from '@beamimpact/web-sdk/dist/integrations/utils'
import { BEAM_PUBLIC_API_KEY, BEAM_STORE_ID } from '@/components/beam/constants'
import { updateCartAttributes } from '@/common/updateCartAttributes' // App-specific implementation

const BeamSelectNonprofit = dynamic(
  () => import("@beamimpact/web-sdk/dist/react/select-nonprofit"), 
  { loading: () => null, ssr: false },
)

export const BeamSelectNonprofitWrapper: FC = () => {
  // Optional: state for handling nonprofit selection in app
  const [selectedNonprofit, setSelectedNonprofit] = useState({id: null, name: null})
  
  const handleNonprofitSelect = (event: events.BeamNonprofitSelectEvent) => {
	  const { selectedNonprofitId, nonprofitName, selectionId } = event.detail;
	  // Nonprofit details can be displayed in a message, saved on server, etc.
	  setSelectedNonprofit({
      name: nonprofitName,
      id: selectedNonprofitId,
    })
    // Update your cart with Beam metadata, if applicable
    const cartId = '{{ Insert your method for getting a unique cart id here }}'
    updateCartAttributes({
      beam_cart_id: cartId,
      beam_chain_id: BEAM_CHAIN_ID,
      beam_store_id: BEAM_STORE_ID,
      beam_nonprofit_id: selectedNonprofitId,
      beam_selection_id: selectionId,
	  })
  }

  return (
    <BeamSelectNonprofit 
      apiKey={BEAM_API_KEY}
      storeId={BEAM_STORE_ID}
      onNonprofitSelect={handleNonprofitSelect}
    />
  )
}

---

Set up Beam cart tracking, adding the Select Nonprofit widget

Cart tracking is typically added wherever your cart component is located. In this example, we’re showing a “cart” component, importing the Cart tracking

File: src/app/components/cart

import { type FC } from 'react'
import BeamSelectNonprofit from '@/components/beam/beam-select-nonprofit'
import {
  BeamTrackCart,
  type TBeamCart,
  publishBeamCartUpdate
} from '~/src/components/beam/beam-track-cart'

export const Cart: FC = () => {
  const handleCartChange = cartDetails => {
    // ... Your app's cart change handling here ...
    // Emit a change event to the Beam Cart tracking script
    // This function should be called whenever your cart changes
    const beamCart: TBeamCart = {/*...*/}
    publishBeamCartUpdate(beamCart)
  }

  return (
    <>
      {/* Your cart elements here */}
      <BeamSelectNonprofit />
    </>
  )
}