300 unlock 6 shopify customer

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/@auth/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyAuthSkelton } from '@features/unlock/shopify';
+
+export default function Loading() {
+  return <OffKeyAuthSkelton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/@auth/page.tsx

@@ -1,9 +1,7 @@
-// import { ShopifyAuth } from '@features/unlock/shopify';
-
-import { OffKeyAuth } from '@features/unlock/shopify';
-import { messages, type Locale } from '@next/i18n';
-import { deepPick } from '@utils';
-import { NextIntlClientProvider } from 'next-intl';
+import { getShopifyCampaignParametersForNotConnected } from '@features/unlock/shopify-api';
+import { Locale } from '@gql/shared/types';
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
 
 interface AuthProps {
   params: {
@@ -12,11 +10,33 @@ interface AuthProps {
   };
 }
 
-export default function Auth({ params: { locale } }: AuthProps) {
-  const localeMessages = deepPick(messages[locale], ['Shopify.OffKeyAuth']);
-  return (
-    <NextIntlClientProvider locale={locale} messages={localeMessages}>
-      <OffKeyAuth />
-    </NextIntlClientProvider>
-  );
+const OffKeyAuth = dynamic(
+  () => import('@features/unlock/shopify').then((mod) => mod.OffKeyAuth),
+  { ssr: false },
+);
+
+export default async function Auth({ params: { locale, gateId } }: AuthProps) {
+  const campaign = await getShopifyCampaignParametersForNotConnected({
+    gateId,
+    locale,
+  });
+  if (!campaign) {
+    notFound();
+  }
+  const authTexts = campaign.shopifyCampaignTemplate.authTexts;
+  const props = {
+    organizerId: campaign.organizerId,
+    textAuth: {
+      createNewAccount: authTexts.createNewAccount,
+      useExistingAccount: authTexts.useExistingAccount,
+      useAnotherAccount: authTexts.useAnotherAccount,
+      noMatchingAccount: {
+        useExistingAccount: authTexts.noMatchingAccountUseExistingAccount,
+        recoverMyAccount: authTexts.noMatchingAccountRecoverMyAccount,
+      },
+      signIn: authTexts.signIn,
+    },
+    locale,
+  };
+  return <OffKeyAuth {...props} />;
 }

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/@header/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyHeaderNotConnectedSkeleton } from '@features/unlock/shopify';
+
+export default function Loading() {
+  return <OffKeyHeaderNotConnectedSkeleton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/@header/page.tsx

@@ -1,5 +1,7 @@
-import { OffKeyHeader } from '@features/unlock/shopify';
-import { type Locale } from '@next/i18n';
+import { getShopifyCampaignParametersForNotConnected } from '@features/unlock/shopify-api';
+import { Locale } from '@gql/shared/types';
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
 
 interface HeaderProps {
   params: {
@@ -8,6 +10,34 @@ interface HeaderProps {
   };
 }
 
-export default function Header({ params }: HeaderProps) {
-  return <OffKeyHeader title="title" />;
+const OffKeyHeaderNotConnected = dynamic(
+  () =>
+    import('@features/unlock/shopify').then(
+      (mod) => mod.OffKeyHeaderNotConnected,
+    ),
+  { ssr: false },
+);
+
+export default async function Header({
+  params: { locale, gateId },
+}: HeaderProps) {
+  const campaign = await getShopifyCampaignParametersForNotConnected({
+    gateId,
+    locale,
+  });
+  if (!campaign) {
+    notFound();
+  }
+  const headerNotConnectedTexts =
+    campaign.shopifyCampaignTemplate.headerNotConnectedTexts;
+
+  const props = {
+    organizerId: campaign.organizerId,
+    textHeaderNotConnected: {
+      customerNotConnected: headerNotConnectedTexts.titleCustomerNotConnected,
+      customerConnected: headerNotConnectedTexts.titleCustomerConnected,
+    },
+    locale,
+  };
+  return <OffKeyHeaderNotConnected {...props} />;
 }

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/layout.tsx

@@ -1,7 +1,5 @@
-// import { ShopifyCard, ShopifyCardHeader } from '@features/unlock/shopify';
 import { OffKeyLayout } from '@features/unlock/shopify';
-import { messages, type Locale } from '@next/i18n';
-import { deepPick } from '@utils';
+import { type Locale } from '@next/i18n';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -19,21 +17,10 @@ export default function Layout({
   header,
   params: { locale },
 }: LayoutProps) {
-  const localeMessages = deepPick(messages[locale], ['Shopify.Auth']);
   return (
     <OffKeyLayout header={header}>
       {children}
       {auth}
     </OffKeyLayout>
-    // <ShopifyCard
-    //   footer={
-    //     <NextIntlClientProvider locale={locale} messages={localeMessages}>
-    //       {auth}
-    //     </NextIntlClientProvider>
-    //   }
-    //   header={<ShopifyCardHeader />}
-    // >
-    //   {children}
-    // </ShopifyCard>
   );
 }

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyGateNotConnectedSkeleton } from '@features/unlock/shopify';
+
+export default function Loading() {
+  return <OffKeyGateNotConnectedSkeleton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/(notConnected)/page.tsx

@@ -1,14 +1,65 @@
-import { OffKeyGateSignIn } from '@features/unlock/shopify';
+import { ShopifyCustomerStatus } from '@features/unlock/shopify';
+import { getShopifyCampaignParametersForNotConnected } from '@features/unlock/shopify-api';
 import { Locale } from '@gql/shared/types';
-interface GateSignInProps {
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
+
+const OffKeyGateNotConnected = dynamic(
+  () =>
+    import('@features/unlock/shopify').then(
+      (mod) => mod.OffKeyGateNotConnected,
+    ),
+  { ssr: false },
+);
+
+interface GateNotConnectedProps {
   params: {
     locale: Locale;
     gateId: string;
   };
 }
 
-export default function GateSignIn({
+export default async function GateSignIn({
   params: { locale, gateId },
-}: GateSignInProps) {
-  return <OffKeyGateSignIn gateId={gateId} />;
+}: GateNotConnectedProps) {
+  const campaign = await getShopifyCampaignParametersForNotConnected({
+    gateId,
+    locale,
+  });
+  if (!campaign) {
+    notFound();
+  }
+  const gateNotConnectedTexts =
+    campaign.shopifyCampaignTemplate.gateNotConnectedTexts;
+  const props = {
+    organizerId: campaign.organizerId,
+    textGateNotConnected: {
+      subtitle: {
+        [ShopifyCustomerStatus.NotConnected]:
+          gateNotConnectedTexts.subtitleCustomerNotConnected,
+        [ShopifyCustomerStatus.ExistingAccountNewCustomer]:
+          gateNotConnectedTexts.subtitleExistingAccountNewCustomer,
+        [ShopifyCustomerStatus.NewAccount]:
+          gateNotConnectedTexts.subtitleNewAccount,
+        [ShopifyCustomerStatus.MatchingAccount]:
+          gateNotConnectedTexts.subtitleMatchingAccount,
+        [ShopifyCustomerStatus.NoMatchingAccount]:
+          gateNotConnectedTexts.subtitleNoMatchingAccount,
+      },
+      mainText: {
+        [ShopifyCustomerStatus.NotConnected]:
+          gateNotConnectedTexts.paragraphCustomerNotConnected,
+        [ShopifyCustomerStatus.ExistingAccountNewCustomer]:
+          gateNotConnectedTexts.paragraphExistingAccountNewCustomer,
+        [ShopifyCustomerStatus.NewAccount]:
+          gateNotConnectedTexts.paragraphNewAccount,
+        [ShopifyCustomerStatus.MatchingAccount]:
+          gateNotConnectedTexts.paragraphMatchingAccount,
+        [ShopifyCustomerStatus.NoMatchingAccount]:
+          gateNotConnectedTexts.paragraphNoMatchingAccount,
+      },
+    },
+    locale,
+  };
+  return <OffKeyGateNotConnected className="flex-1 py-2" {...props} />;
 }

apps/unlock/app/[locale]/shopify/[gateId]/[address]/@header/page.tsx

@@ -1,11 +1,8 @@
-import {
-  OffKeyHeaderConnected,
-  OffKeyViewHeaderConnected,
-} from '@features/unlock/shopify';
-import { messages, type Locale } from '@next/i18n';
-import { deepPick } from '@utils';
-import { NextIntlClientProvider } from 'next-intl';
+import { OffKeyViewHeaderConnected } from '@features/unlock/shopify';
+import { getShopifyCampaignParametersForConnected } from '@features/unlock/shopify-api';
+import { Locale } from '@gql/shared/types';
 import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
 
 interface HeaderProps {
   params: {
@@ -19,19 +16,46 @@ const OffKeyProfile = dynamic(
   () => import('@features/unlock/shopify').then((mod) => mod.OffKeyProfile),
   { ssr: false },
 );
+const OffKeyHeaderConnected = dynamic(
+  () =>
+    import('@features/unlock/shopify').then((mod) => mod.OffKeyHeaderConnected),
+  { ssr: false },
+);
 
-export default function Header({
+export default async function Header({
   params: { locale, gateId, address },
 }: HeaderProps) {
-  const localeMessages = deepPick(messages[locale], ['Shopify.OffKeyProfile']);
+  const campaign = await getShopifyCampaignParametersForConnected({
+    gateId,
+    locale,
+  });
+  if (!campaign) {
+    notFound();
+  }
+  const headerConnectedTexts =
+    campaign.shopifyCampaignTemplate.headerConnectedTexts;
+  const headerProps = {
+    organizerId: campaign.organizerId,
+    textHeaderConnected: {
+      default: headerConnectedTexts.titleDefault,
+      howToGet: headerConnectedTexts.titleHowToGet,
+    },
+    locale,
+  };
+  const profileTexts = campaign.shopifyCampaignTemplate.profileTexts;
+  const profileProps = {
+    organizerId: campaign.organizerId,
+    textProfile: {
+      myAccount: profileTexts.menuSectionMyAccount,
+      signOut: profileTexts.menuActionSignOut,
+    },
+    locale,
+  };
   return (
     <OffKeyHeaderConnected
+      {...headerProps}
       viewType={OffKeyViewHeaderConnected.Default}
-      profile={
-        <NextIntlClientProvider locale={locale} messages={localeMessages}>
-          <OffKeyProfile user={{ id: '', address }} />
-        </NextIntlClientProvider>
-      }
+      profile={<OffKeyProfile {...profileProps} user={{ id: '', address }} />}
     />
   );
 }

apps/unlock/app/[locale]/shopify/[gateId]/[address]/layout.tsx

@@ -1,4 +1,3 @@
-// import { ShopifyCard, ShopifyCardHeader } from '@features/unlock/shopify';
 import { OffKeyLayout } from '@features/unlock/shopify';
 import { type Locale } from '@next/i18n';
 

apps/unlock/app/[locale]/shopify/[gateId]/[address]/loading.tsx

@@ -0,0 +1,5 @@
+import { OffKeyGateSkeleton } from '@features/unlock/shopify';
+
+export default function Loading() {
+  return <OffKeyGateSkeleton />;
+}

apps/unlock/app/[locale]/shopify/[gateId]/[address]/page.tsx

@@ -1,7 +1,8 @@
-import { messages, type Locale } from '@next/i18n';
-import { deepPick } from '@utils';
-import { NextIntlClientProvider } from 'next-intl';
+import { getShopifyCampaignParametersForConnected } from '@features/unlock/shopify-api';
+import { Locale } from '@gql/shared/types';
+import { OffKeyState } from '@next/iframe';
 import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
 
 interface GateProps {
   params: {
@@ -16,16 +17,44 @@ const OffKeyGate = dynamic(
   { ssr: false },
 );
 
-export default function Gate({
+export default async function Gate({
   params: { locale, gateId, address },
 }: GateProps) {
-  const localeMessages = deepPick(messages[locale], [
-    'Shopify.OffKeyGate',
-    'Shopify.OffKeyInfo',
-  ]);
-  return (
-    <NextIntlClientProvider locale={locale} messages={localeMessages}>
-      <OffKeyGate className="flex-1 pt-2" gateId={gateId} address={address} />
-    </NextIntlClientProvider>
-  );
+  const campaign = await getShopifyCampaignParametersForConnected({
+    gateId,
+    locale,
+  });
+  if (!campaign) {
+    notFound();
+  }
+  const gateConnectedTexts =
+    campaign.shopifyCampaignTemplate.gateConnectedTexts;
+  const props = {
+    organizerId: campaign.organizerId,
+    textGate: {
+      subtitle: {
+        [OffKeyState.Unlocked]: gateConnectedTexts.subtitleUnlocked,
+        [OffKeyState.Unlocking]: gateConnectedTexts.subtitleUnlocking,
+        [OffKeyState.Used]: gateConnectedTexts.subtitleUsed,
+        [OffKeyState.Locked]: gateConnectedTexts.subtitleLocked,
+      },
+      mainText: {
+        [OffKeyState.Unlocked]: gateConnectedTexts.paragraphUnlocked,
+        [OffKeyState.Unlocking]: gateConnectedTexts.paragraphUnlocking,
+        [OffKeyState.Used]: gateConnectedTexts.paragraphUsed,
+        [OffKeyState.Locked]: gateConnectedTexts.paragraphLocked,
+      },
+      key: {
+        statusText: {
+          [OffKeyState.Unlocked]: gateConnectedTexts.gateStatus.unlocked,
+          [OffKeyState.Unlocking]: gateConnectedTexts.gateStatus.unlocking,
+          [OffKeyState.Used]: gateConnectedTexts.gateStatus.used,
+          [OffKeyState.Locked]: gateConnectedTexts.gateStatus.locked,
+        },
+        name: gateConnectedTexts.gateStatus.name,
+      },
+    },
+    locale,
+  };
+  return <OffKeyGate className="flex-1 pt-2" {...props} />;
 }