fix: persist "show more" state in payment method selector (#452)

* fix: persist "show more" state in payment method selector

* fix lint

Author: Fishbakh-N

packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/index.tsx

@@ -187,8 +187,9 @@ export const LargePaymentMethodSelect = () => {
 export const SmallPaymentMethodSelect = () => {
 	const methods = usePaymentMethods();
 	const {primaryColor} = useConfigContext();
+	const {showMorePaymentMethods, setShowMorePaymentMethods} =
+		useWidgetContext();
 
-	const [showMore, setShowMore] = useState(false);
 	if (methods.length === 1) {
 		return null;
 	}
@@ -200,19 +201,19 @@ export const SmallPaymentMethodSelect = () => {
 				{methods.slice(0, 4).map((method) => (
 					<PaymentMethodListItem key={method} small method={method} />
 				))}
-				{showMore &&
+				{showMorePaymentMethods &&
 					methods
 						.slice(4)
 						.map((method) => (
 							<PaymentMethodListItem key={method} small method={method} />
 						))}
 			</ul>
-			{!showMore && (
+			{!showMorePaymentMethods && (
 				<button
 					type="button"
 					className={showMoreButtonCss(primaryColor)}
 					onClick={() => {
-						setShowMore(true);
+						setShowMorePaymentMethods(true);
 					}}
 				>
 					More options

packages/donate-button-v4/src/components/widget/context/WidgetContext.tsx

@@ -22,6 +22,9 @@ interface WidgetContextProps {
 	selectedPaymentMethod: PaymentMethod;
 	setSelectedPaymentMethod: StateUpdater<PaymentMethod>;
 
+	showMorePaymentMethods: boolean;
+	setShowMorePaymentMethods: StateUpdater<boolean>;
+
 	stockAmount?: number;
 	setStockAmount: StateUpdater<number | undefined>;
 
@@ -80,6 +83,9 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 		}
 	}, [config.methods, selectedPaymentMethod]);
 
+	const [showMorePaymentMethods, setShowMorePaymentMethods] =
+		useState<boolean>(false);
+
 	const [stockAmount, setStockAmount] = useState<number>();
 	const [stockSymbol, setStockSymbol] = useState<string>();
 
@@ -107,6 +113,8 @@ export const WidgetContextProvider: FunctionalComponent<{hide: () => void}> = ({
 				setSubmitError,
 				selectedPaymentMethod,
 				setSelectedPaymentMethod,
+				showMorePaymentMethods,
+				setShowMorePaymentMethods,
 				stockAmount,
 				setStockAmount,
 				stockSymbol,