feat: add yearly donation frequency option (#457)

Author: Fishbakh-N

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

@@ -67,6 +67,25 @@ export const Frequency = () => {
 		<fieldset className={fieldSetCss}>
 			<legend className={legendCss}>Frequency</legend>
 			<div className={inputContainerCss(primaryColor)}>
+				<div className={inputItemCss(primaryColor)}>
+					<input
+						type="radio"
+						name="frequency"
+						id="yearly"
+						checked={frequency === DonationFrequency.Yearly}
+						value={DonationFrequency.Yearly}
+					/>
+					<label
+						className={inputLabelCss(primaryColor)}
+						id="frequency-yearly"
+						htmlFor="yearly"
+						onClick={() => {
+							setFrequency(DonationFrequency.Yearly);
+						}}
+					>
+						Yearly
+					</label>
+				</div>
 				<div className={inputItemCss(primaryColor)}>
 					<input
 						type="radio"
@@ -83,7 +102,7 @@ export const Frequency = () => {
 							setFrequency(DonationFrequency.Monthly);
 						}}
 					>
-						Give Monthly
+						Monthly
 					</label>
 				</div>
 				<div className={inputItemCss(primaryColor)}>

packages/donate-button-v4/src/components/widget/types/DonationFrequency.ts

@@ -1,5 +1,6 @@
 export enum DonationFrequency {
 	Monthly = 'monthly',
 	OneTime = 'once',
+	Yearly = 'yearly',
 	Unselected = ''
 }