feat(contractor-onboarding): add Remote Payments setup section (#700)

* feat(onboarding): add Remote Payments setup section to contractor review step

* move remote payments block

Author: gabrielseco

example/src/ReviewContractorOnboardingStep.tsx

@@ -1,10 +1,53 @@
 import {
   ContractorOnboardingRenderProps,
   NormalizedFieldError,
+  useMagicLink,
 } from '@remoteoss/remote-flows';
+import { Button } from '@remoteoss/remote-flows/internals';
+import { InfoIcon } from 'lucide-react';
 import { InviteSection, ReviewMeta } from './ReviewOnboardingStep';
 import { AlertError } from './AlertError';
 
+const RemotePaymentServicesSetUp = () => {
+  const magicLink = useMagicLink();
+
+  const generateMagicLinkToPayments = async () => {
+    const response = await magicLink.mutateAsync({
+      path: `/dashboard/company-settings/payments`,
+      user_id: import.meta.env.VITE_USER_ID,
+    });
+
+    if (response.data) {
+      window.open(response.data.data.url, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  return (
+    <div className='flex items-center gap-4 rounded-lg border bg-card px-4 py-3'>
+      <div className='flex h-10 w-10 shrink-0 items-center justify-center rounded-full'>
+        <InfoIcon className='h-4 w-4' />
+      </div>
+      <div className='flex-1'>
+        <h3 className='font-medium text-card-foreground'>
+          Set up Remote Payments
+        </h3>
+        <p className='text-sm text-muted-foreground'>
+          Gain access to additional payment methods and streamlined payment
+          management.
+        </p>
+      </div>
+      <Button
+        className='bg-[#000000] text-white hover:bg-[#000000]/80'
+        onClick={generateMagicLinkToPayments}
+      >
+        Set up now
+      </Button>
+    </div>
+  );
+};
+
+// ... existing code ...
+
 export const ReviewContractorOnboardingStep = ({
   onboardingBag,
   components,
@@ -83,9 +126,7 @@ export const ReviewContractorOnboardingStep = ({
             has been invited to Remote. We’ll let you know once they complete
             their onboarding process
           </p>
-          <div>
-            <button type='submit'>Go to dashboard</button>
-          </div>
+          <RemotePaymentServicesSetUp />
         </div>
       )}
 

src/styles/global.css

@@ -1,6 +1,6 @@
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme);
-@import 'tailwindcss/utilities.css' layer(utilities);
+@import 'tailwindcss';
+
+@source '../**/*.{tsx,ts,jsx,js}';
 
 :root {
   --background: oklch(1 0 0);

tailwind.config.js

@@ -2,5 +2,4 @@
 
 export default {
   darkMode: ['class'],
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 };