REN-398-checkout-styling

.vscode/settings.json

@@ -5,5 +5,9 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.biome": "explicit"
-  }
+  },
+  "i18n-ally.localesPaths": [
+    "components/data/i18n",
+    "public/static/locales"
+  ]
 }

@typings/checkout.d.ts

@@ -23,6 +23,7 @@ interface CheckoutSettings {
   slug: string
   logoUrl: NullableType<string>
   companyName: string
+  partnerId: string
   language: string
   primaryColor: string
   favicon: string
@@ -34,6 +35,37 @@ interface CheckoutSettings {
   config: Organization.DefaultConfig | null
 }
 
+interface BrandColors {
+    dark: string,
+    accent: string,
+    base: string
+}
+
+interface HeaderLogo {
+  image: string
+  alt: string
+}
+
+interface PartnerSettings {
+//   brandName: string
+    brandColors: BrandColors
+    headerLogo: HeaderLogo
+//   email: string
+//   phone: string
+//   linkPartner: string
+//   currency: string
+//   logoHeaderPath: string
+//   logoHeaderAlt: string
+//   logoFooterPath: string
+//   logoFooterAlt: string
+//   faviconIcoPath: string
+//   splashFilePath: string
+//   splashFileAlt: string
+//   splashFileType: string
+//   privacyPolicy: string
+//   termsAndConditions: string
+}
+
 interface InvalidCheckoutSettings {
   validCheckout: false
   retryOnError: boolean

@typings/storyblok.d.ts

@@ -0,0 +1,265 @@
+// This file was generated by the storyblok CLI.
+// DO NOT MODIFY THIS FILE BY HAND.
+export interface ComponentAccordionListStoryblok {
+  accordion_list?: FragmentAccordionStoryblok[]
+  component: 'ComponentAccordionList'
+  _uid: string
+  [k: string]: any
+}
+
+export interface AssetStoryblok {
+  alt: string | null
+  copyright?: string | null
+  fieldtype: 'asset'
+  id: number
+  filename: string | null
+  name: string
+  title: string | null
+  focus: string | null
+  meta_data?: {
+    [k: string]: any
+  }
+  source?: string | null
+  is_external_url?: boolean
+  is_private?: boolean
+  src?: string
+  updated_at?: string
+  width?: number | null
+  height?: number | null
+  aspect_ratio?: number | null
+  public_id?: string | null
+  content_type?: string
+  [k: string]: any
+}
+
+export interface FaviconsStoryblok {
+  apple_touch_favicon?: AssetStoryblok
+  favicon_96?: AssetStoryblok
+  favicon_ico?: AssetStoryblok
+  favicon_svg?: AssetStoryblok
+  favicon_192?: AssetStoryblok
+  favicon_512?: AssetStoryblok
+  component: 'favicons'
+  _uid: string
+  [k: string]: any
+}
+
+export interface RichtextStoryblok {
+  type: string
+  content?: RichtextStoryblok[]
+  marks?: RichtextStoryblok[]
+  attrs?: any
+  text?: string
+  [k: string]: any
+}
+
+export interface FragmentAccordionStoryblok {
+  question?: string
+  answer?: RichtextStoryblok
+  component: 'FragmentAccordion'
+  _uid: string
+  [k: string]: any
+}
+
+export type MultiassetStoryblok = {
+  alt: string | null
+  copyright?: string | null
+  fieldtype: 'asset'
+  id: number
+  filename: string | null
+  name: string
+  title: string | null
+  focus: string | null
+  meta_data?: {
+    [k: string]: any
+  }
+  source?: string | null
+  is_external_url?: boolean
+  is_private?: boolean
+  src?: string
+  updated_at?: string
+  width?: number | null
+  height?: number | null
+  aspect_ratio?: number | null
+  public_id?: string | null
+  content_type?: string
+  [k: string]: any
+}[]
+
+export interface HomepageStoryblok {
+  internal_title?: string
+  title?: string
+  subtitle?: string
+  content?: RichtextStoryblok
+  Image?: MultiassetStoryblok
+  component: 'Homepage'
+  _uid: string
+  [k: string]: any
+}
+
+export type MultilinkStoryblok =
+  | {
+      fieldtype: 'multilink'
+      id: string
+      url: string
+      cached_url: string
+      target?: '_blank' | '_self'
+      anchor?: string
+      rel?: string
+      title?: string
+      prep?: string
+      linktype: 'story'
+      story?: {
+        name: string
+        created_at?: string
+        published_at?: string
+        id: number
+        uuid: string
+        content?: {
+          [k: string]: any
+        }
+        slug: string
+        full_slug: string
+        sort_by_date?: null | string
+        position?: number
+        tag_list?: string[]
+        is_startpage?: boolean
+        parent_id?: null | number
+        meta_data?: null | {
+          [k: string]: any
+        }
+        group_id?: string
+        first_published_at?: string
+        release_id?: null | number
+        lang?: string
+        path?: null | string
+        alternates?: any[]
+        default_full_slug?: null | string
+        translated_slugs?: null | any[]
+        [k: string]: any
+      }
+      [k: string]: any
+    }
+  | {
+      fieldtype: 'multilink'
+      id: string
+      url: string
+      cached_url: string
+      target?: '_blank' | '_self'
+      linktype: 'url'
+      rel?: string
+      title?: string
+      [k: string]: any
+    }
+  | {
+      fieldtype: 'multilink'
+      id: string
+      url: string
+      cached_url: string
+      target?: '_blank' | '_self'
+      email?: string
+      linktype: 'email'
+      [k: string]: any
+    }
+  | {
+      fieldtype: 'multilink'
+      id: string
+      url: string
+      cached_url: string
+      target?: '_blank' | '_self'
+      linktype: 'asset'
+      [k: string]: any
+    }
+
+export interface SettingsGlobalAppStoryblok {
+  internal_title?: string
+  name_brand?: string
+  phone?: string
+  email?: string
+  link_partner?: Exclude<
+    MultilinkStoryblok,
+    { linktype?: 'email' } | { linktype?: 'asset' }
+  >
+  brand_colors?: any
+  brand_font: string
+  notify_pdp?: RichtextStoryblok
+  message_delivery_pdp?: RichtextStoryblok
+  logo?: AssetStoryblok
+  logo_footer?: AssetStoryblok
+  currency: 'USD' | 'EUR'
+  modal_need_help?: TopicModalStoryblok[]
+  modal_quit?: TopicModalStoryblok[]
+  Favicons?: FaviconsStoryblok[]
+  splash_page?: SplashPageStoryblok[]
+  dark?: string
+  accent?: string
+  base?: string
+  privacy_policy?: Exclude<
+    MultilinkStoryblok,
+    { linktype?: 'email' } | { linktype?: 'asset' }
+  >
+  terms_and_conditions?: Exclude<
+    MultilinkStoryblok,
+    { linktype?: 'email' } | { linktype?: 'asset' }
+  >
+  component: 'SettingsGlobalApp'
+  _uid: string
+  [k: string]: any
+}
+
+export interface StaticDataFilesStoryblok {
+  name?: string
+  product_descriptions?: AssetStoryblok
+  component: 'StaticDataFiles'
+  _uid: string
+  [k: string]: any
+}
+
+export interface SplashPageStoryblok {
+  type?: '' | 'Lottiefiles' | 'Image'
+  splash_file?: AssetStoryblok
+  component: 'splash_page'
+  _uid: string
+  [k: string]: any
+}
+
+export interface StepPageStoryblok {
+  title_primary: string
+  description_primary?: RichtextStoryblok
+  title_secondary?: string
+  description_secondary?: RichtextStoryblok
+  component: 'StepPage'
+  _uid: string
+  [k: string]: any
+}
+
+export interface TopicModalStoryblok {
+  internal_title?: string
+  type?: string
+  title?: string
+  subtitle?: string
+  description?: RichtextStoryblok
+  qa?: ComponentAccordionListStoryblok[]
+  component: 'TopicModal'
+  _uid: string
+  [k: string]: any
+}
+
+export interface TopicTutorialStoryblok {
+  internal_title?: string
+  title?: string
+  description?: string
+  video_tutorial?: AssetStoryblok
+  fullscreenVideo?: boolean
+  component: 'TopicTutorial'
+  _uid: string
+  [k: string]: any
+}
+
+export interface TutorialPageStoryblok {
+  internal_title?: string
+  steps?: TopicTutorialStoryblok[]
+  component: 'TutorialPage'
+  _uid: string
+  [k: string]: any
+}

app/api/partner-settings/route.ts

@@ -0,0 +1,51 @@
+import type { NextRequest } from "next/server";
+// export const runtime = "nodejs";
+
+export async function GET(
+  req: NextRequest
+) {
+  const searchParams = req.nextUrl.searchParams
+  const partnerId = searchParams.get('partner-id');
+  console.log("API partner-settings called with partnerId:", partnerId);
+
+  if (!partnerId) {
+    return new Response(JSON.stringify({ message: "Invalid partner ID" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const token = process.env.SB_TOKEN;
+  const isProduction = process.env.NODE_ENV === "production";
+  const deliveryId = "_settings";
+  const url = `https://api-us.storyblok.com/v2/cdn/stories/${partnerId}/${deliveryId}?token=${token}&version=${isProduction ? "published" : "draft"}`;
+
+  try {
+    const res = await fetch(url, { headers: { "Content-Type": "application/json" } });
+    if (!res.ok) {
+      return new Response(JSON.stringify({ message: "Settings not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    const json = await res.json();
+
+    if (!json.story) {
+      return new Response(JSON.stringify({ message: "Settings not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(JSON.stringify(json.story), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("Error fetching Storyblok settings:", error);
+    return new Response(JSON.stringify({ message: "Storyblok request error" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+}