withFooBarPropInjected.tsx with generics etc

withFooBarPropInjected.tsx

import React from 'react';

import { useCheckoutSessionId } from '../useCheckoutSessionId';

type ComponentThatRequiresCheckoutSessionId<TProps> = (
  yourBaseProps: TProps,
) => JSX.Element | null;

/** Patches return type */
type RemoveProp<
  TComponent extends (...args: any) => any,
  TPropKey extends string,
> = (
  topLevelProps: Omit<Parameters<TComponent>[0], TPropKey>,
) => JSX.Element | null;

type ReturnedComp<TProps> = RemoveProp<
  (topLevelProps: TProps) => Element | null,
  'checkoutSessionId'
>;

export function injectCheckoutSessionIdProp<
  TProps extends {
    checkoutSessionId: string;
    children: any;
    [key: string]: any;
  },
>(
  ComponentThatRequiresCheckoutSessionId: ComponentThatRequiresCheckoutSessionId<TProps>,
): ReturnedComp<TProps> {
  return function ComponentEnrichedWithCheckoutSessionIdProp(
    topLevelProps: TProps,
  ) {
    const checkoutSessionId = useCheckoutSessionId();

    if (!checkoutSessionId) {
      return null;
    }

    return (
      <ComponentThatRequiresCheckoutSessionId
        {...topLevelProps}
        checkoutSessionId={checkoutSessionId}
      />
    );
  } as ReturnedComp<TProps>;
}

https://stackoverflow.com/questions/53056494/typescript-object-with-at-least-one-property-of-type-t
https://www.reddit.com/r/typescript/comments/icr0cr/specify_generic_type_must_have_at_least_one/

https://www.google.com/search?q=typescript+generics+object+has+at+least+one+property+extends&sxsrf=AB5stBgjVyEfhCOvHaMTPwpXy9NPNNcwfQ%3A1688960507117&ei=-32rZL3jBtqhptQPncyzaA&ved=0ahUKEwj9zMOYnIOAAxXakIkEHR3mDA0Q4dUDCBA&uact=5&oq=typescript+generics+object+has+at+least+one+property+extends&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCCEQoAE6CggAEEcQ1gQQsAM6BQghEKsCSgQIQRgAULMDWKoKYI4NaAFwAHgAgAGZAYgB8QiSAQMxLjiYAQCgAQHAAQHIAQg&sclient=gws-wiz-serp