Merge pull request #122 from midday-ai/feature/connect-bank-country-code

Save country code

apps/dashboard/src/actions/change-country-code-action.ts

@@ -0,0 +1,15 @@
+"use server";
+
+import { Cookies } from "@/utils/constants";
+import { cookies } from "next/headers";
+import { z } from "zod";
+import { action } from "./safe-action";
+
+export const changeCountryCodeAction = action(z.string(), async (value) => {
+  cookies().set({
+    name: Cookies.CountryCode,
+    value,
+  });
+
+  return value;
+});

apps/dashboard/src/app/[locale]/(app)/@dashboard/(root)/layout.tsx

@@ -20,7 +20,10 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   const user = await getUser();
-  const countryCode = getCountryCode();
+  const countryCode = cookies().has(Cookies.CountryCode)
+    ? cookies().get(Cookies.CountryCode)?.value
+    : getCountryCode();
+
   const isEU = isEUCountry(countryCode);
   const mobileOverlay = cookies().has(Cookies.MobileOverlay);
 

apps/dashboard/src/components/country-selector.tsx

@@ -48,7 +48,7 @@ export function CountrySelector({ defaultValue, onSelect }) {
       </PopoverTrigger>
       <PopoverContentWithoutPortal className="w-[225px] p-0">
         <Command>
-          <CommandInput placeholder="Search country..." className="h-9" />
+          <CommandInput placeholder="Search country..." className="h-9 px-2" />
           <CommandEmpty>No country found.</CommandEmpty>
           <CommandGroup className="overflow-y-auto max-h-[230px] pt-2">
             {Object.values(countries).map((country) => (

apps/dashboard/src/components/modals/connect-gocardless-modal.tsx

@@ -2,6 +2,7 @@
 
 import { createEndUserAgreementAction } from "@/actions/banks/create-end-user-agreement-action";
 import { getBanks } from "@/actions/banks/get-banks";
+import { changeCountryCodeAction } from "@/actions/change-country-code-action";
 import { Button } from "@midday/ui/button";
 import {
   Dialog,
@@ -102,6 +103,10 @@ export function ConnectGoCardLessModal({ countryCode: initialCountryCode }) {
   const [results, setResults] = useState([]);
   const [filteredResults, setFilteredResults] = useState([]);
 
+  const changeCountryCode = useAction(changeCountryCodeAction, {
+    onSuccess: (value) => setCountryCode(value),
+  });
+
   const createEndUserAgreement = useAction(createEndUserAgreementAction);
 
   const [step, setStep] = useQueryState("step");
@@ -177,7 +182,7 @@ export function ConnectGoCardLessModal({ countryCode: initialCountryCode }) {
 
                 <CountrySelector
                   defaultValue={countryCode}
-                  onSelect={setCountryCode}
+                  onSelect={changeCountryCode.execute}
                 />
               </div>
 

apps/dashboard/src/components/modals/select-bank-accounts.tsx

@@ -139,12 +139,12 @@ export function SelectBankAccountsModal({ countryCode }: Props) {
           accessToken: token,
           enrollmentId: enrollment_id,
           accounts: data.map((account) => ({
-            account_id: account.id,
-            bank_name: account.institution.name,
-            currency: account.currency,
             name: account.name,
             institution_id: account.institution.id,
             logo_url: account.institution?.logo,
+            account_id: account.id,
+            bank_name: account.institution.name,
+            currency: account.currency,
             enabled: false,
           })),
         });

apps/dashboard/src/utils/constants.ts

@@ -11,4 +11,5 @@ export const Cookies = {
   TrackingConsent: "tracking-consent",
   ChartCurrency: "chart-currency",
   InboxOrder: "inbox-order",
+  CountryCode: "country-code",
 };

packages/ui/src/components/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-xl border dark:border-none dark:p-px text-primary rounded-lg z-50 data-[state=closed]:animate-[dialog-content-hide_100ms] data-[state=open]:animate-[dialog-content-show_100ms]",
+        "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-xl border dark:border-none dark:p-px text-primary z-50 data-[state=closed]:animate-[dialog-content-hide_100ms] data-[state=open]:animate-[dialog-content-show_100ms]",
         className
       )}
       style={{
@@ -44,9 +44,7 @@ const DialogContent = React.forwardRef<
       }}
       {...props}
     >
-      <div className="bg-background p-2 rounded-lg dark:rounded-[8px]">
-        {children}
-      </div>
+      <div className="bg-background p-2">{children}</div>
 
       {!hideClose && (
         <DialogPrimitive.Close className="absolute right-6 top-6 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">

packages/ui/src/components/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full border bg-transparent px-3 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}