diff --git a/apps/frontend/src/api/apiClient.ts b/apps/frontend/src/api/apiClient.ts index 9cee8a4..b80ae3e 100644 --- a/apps/frontend/src/api/apiClient.ts +++ b/apps/frontend/src/api/apiClient.ts @@ -1,7 +1,7 @@ import axios, { type AxiosInstance } from 'axios'; const defaultBaseUrl = - import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3000'; + import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3001'; export type DonationCreateRequest = { firstName: string; diff --git a/apps/frontend/src/assets/facebook.png b/apps/frontend/src/assets/facebook.png new file mode 100644 index 0000000..2a4d617 Binary files /dev/null and b/apps/frontend/src/assets/facebook.png differ diff --git a/apps/frontend/src/assets/linkedin.png b/apps/frontend/src/assets/linkedin.png new file mode 100644 index 0000000..1166fc6 Binary files /dev/null and b/apps/frontend/src/assets/linkedin.png differ diff --git a/apps/frontend/src/assets/x.png b/apps/frontend/src/assets/x.png new file mode 100644 index 0000000..9a957c2 Binary files /dev/null and b/apps/frontend/src/assets/x.png differ diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx index 860f07a..8fd438f 100644 --- a/apps/frontend/src/containers/donations/DonationForm.tsx +++ b/apps/frontend/src/containers/donations/DonationForm.tsx @@ -279,17 +279,17 @@ export const DonationForm: React.FC = ({
= 1 ? 'progress-bar-purple' : 'progress-bar-grey' } >
= 2 ? 'progress-bar-purple' : 'progress-bar-grey' } >
= 3 ? 'progress-bar-purple' : 'progress-bar-grey' } >
diff --git a/apps/frontend/src/containers/donations/donations.css b/apps/frontend/src/containers/donations/donations.css index 7ffb27f..be5f6e2 100644 --- a/apps/frontend/src/containers/donations/donations.css +++ b/apps/frontend/src/containers/donations/donations.css @@ -328,7 +328,7 @@ width: 31%; aspect-ratio: 14 / 1; border-radius: 10px; - background: #650d77; + background: #3D3E6E; } .step2-container { diff --git a/apps/frontend/src/containers/donations/steps/Step4Receipt.tsx b/apps/frontend/src/containers/donations/steps/Step4Receipt.tsx index dd44315..798d0d1 100644 --- a/apps/frontend/src/containers/donations/steps/Step4Receipt.tsx +++ b/apps/frontend/src/containers/donations/steps/Step4Receipt.tsx @@ -1,14 +1,126 @@ -import React from 'react'; +'use client'; + +import React, { useState } from 'react'; interface Step4ReceiptProps { - receiptId: string | null; + receiptId?: string | null; } export const Step4Receipt: React.FC = () => { + const [feedback, setFeedback] = useState(''); + + const handleSpreadTheWord = () => { + if (navigator.share) { + navigator + .share({ + title: 'I just donated to FCC!', + text: 'Join me in supporting FCC and making a difference in our community.', + url: window.location.origin, + }) + .catch((error) => { + if (error.name !== 'AbortError') { + console.error('Error sharing:', error); + } + }); + } + }; + return ( -
-

Step 4: Receipt

-

Thank you for your donation!

-
+
+
+

+ THANK YOU +

+

+ For making a difference. +

+
+
+
+

+ A receipt has been sent to your email. +

+
+
+
+ +