✨ Add 'connectToShopify' text support for internationalization

♻️ Refactor to use 'shopifyContext' for consistent context data access
✨ Implement 'connectToShopify' button functionality in OffKeyAuth
📝 Update stories to include 'shopifyContext' and demonstrate new 'connectToShopify' action

✨ (Various files): Introduce dynamic product titles in unlock messages
♻️ (Various files): Refactor to use `shopifyContext` for consistent data handling
💡 (Various files): Update interpolation keys for clarity in user messages

✨ (useShopifyCustomer.spec.tsx, useShopifyCustomer.tsx): add product context to Shopify hook for enhanced feature integration
♻️ (useShopifyCustomer.spec.tsx): refactor mockLinkedCustomer address to use full-length Ethereum addresses for accuracy in tests
📝 (shopifyCampaignParameters.query.gql): update GraphQL query to include connectToShopify text for UI improvements
✨ (context.tsx, hooks.ts, types.ts): introduce product information in iframe context and hook for enriched Shopify integration

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

@@ -78,6 +78,7 @@ export default async function GateNotConnected({
   const propsAuth = {
     organizerId: campaign.organizerId,
     textAuth: {
+      connectToShopify: authTexts.connectToShopify,
       createNewAccount: authTexts.createNewAccount,
       useExistingAccount: authTexts.useExistingAccount,
       useAnotherAccount: authTexts.useAnotherAccount,

libs/features/unlock/shopify/src/lib/OffKeyAuth/OffKeyAuth.stories.tsx

@@ -6,17 +6,16 @@ import {
 } from '@test-utils/storybook-decorators';
 import { ShopifyCustomerStatus } from '../types';
 import OffKeyAuth from './OffKeyAuth';
-import { OffKeyAuthDemo, authMocks, offKeyAuthProps } from './examples';
+import {
+  OffKeyAuthDemo,
+  authMocks,
+  customer,
+  offKeyAuthProps,
+  shopifyContext,
+} from './examples';
 
 const address = '0xB98bD7C7f656290071E52D1aA617D9cB4467Fd6D';
 
-const customer = {
-  id: '1',
-  firstName: 'John',
-  lastName: 'Doe',
-  email: '[email protected]',
-};
-
 const walletConnectedProps = {
   walletAuthMocks: {
     connect: () => Promise.resolve(),
@@ -43,6 +42,7 @@ const meta = {
             status: null,
             customer: null,
             walletInStorage: [{ address }, { address: '0x214123135' }],
+            shopifyContext,
           },
           ...walletConnectedProps,
         }),
@@ -65,11 +65,15 @@ export const NotConnected: Story = {
             status: ShopifyCustomerStatus.NotConnected,
             customer: null,
             walletInStorage: [{ address }, { address: '0x214123135' }],
+            shopifyContext,
           },
           ...walletConnectedProps,
         }),
     },
   },
+  play: async ({ container }) => {
+    userEvent.click(await screen.findByText(/connect to my account/i));
+  },
 };
 
 export const NewAccount: Story = {
@@ -81,6 +85,7 @@ export const NewAccount: Story = {
             status: ShopifyCustomerStatus.NewAccount,
             customer,
             walletInStorage: [],
+            shopifyContext,
           },
           ...walletConnectedProps,
         }),
@@ -101,6 +106,7 @@ export const ExistingAccountNewCustomer: Story = {
             status: ShopifyCustomerStatus.ExistingAccountNewCustomer,
             customer,
             walletInStorage: [{ address }],
+            shopifyContext,
           },
           ...walletConnectedProps,
         }),
@@ -123,6 +129,7 @@ export const ExistingSeveralAccountNewCustomer: Story = {
             status: ShopifyCustomerStatus.ExistingAccountNewCustomer,
             customer,
             walletInStorage: [{ address }, { address: '0x214123135' }],
+            shopifyContext,
           },
           walletAuthMocks: {
             connect: () => Promise.resolve(),
@@ -172,6 +179,7 @@ export const NoMatchingAccount: Story = {
             customer,
             walletInStorage: [{ address }, { address: '0x214123135' }],
             walletToConnect: '0x123456789',
+            shopifyContext,
           },
           ...walletConnectedProps,
         }),

libs/features/unlock/shopify/src/lib/OffKeyAuth/OffKeyAuth.tsx

@@ -12,11 +12,13 @@ import { useShopifyCustomer } from '../hooks/useShopifyCustomer';
 import { ShopifyCustomerStatus } from '../types';
 import { OffKeyAuthSkelton } from './OffKeyAuthSkelton';
 
+import { useIframeConnect } from '@next/iframe';
 import { ConnectProps, OffKeyAuthSignIn } from './OffKeyAuthSignIn';
 
 export interface OffKeyAuthProps {
   organizerId: string;
   textAuth: {
+    connectToShopify: string;
     createNewAccount: string;
     useExistingAccount: string;
     useAnotherAccount: string;
@@ -47,13 +49,14 @@ export default function OffKeyAuth({
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const {
-    customer,
+    shopifyContext,
     status: shopifyCustomerStatus,
     walletToConnect,
     walletInStorage,
   } = useShopifyCustomer({
     organizerId,
   });
+  const { connectToShopify } = useIframeConnect();
 
   const connectWalletMutation = useMutation({
     mutationFn: ({
@@ -85,40 +88,49 @@ export default function OffKeyAuth({
     },
   });
   if (!isWalletReady || !shopifyCustomerStatus) return <OffKeyAuthSkelton />;
-  else if (shopifyCustomerStatus === ShopifyCustomerStatus.NotConnected)
-    return null;
   const texts = {
+    connectToShopify: interpolateString(
+      textAuth.connectToShopify,
+      locale,
+      shopifyContext,
+    ),
     createNewAccount: interpolateString(
       textAuth.createNewAccount,
       locale,
-      customer,
+      shopifyContext,
     ),
     useExistingAccount: interpolateString(
       textAuth.useExistingAccount,
       locale,
-      customer,
+      shopifyContext,
     ),
     noMatchingAccount: {
       useExistingAccount: interpolateString(
         textAuth.noMatchingAccount.useExistingAccount,
         locale,
-        customer,
+        shopifyContext,
       ),
       recoverMyAccount: interpolateString(
         textAuth.noMatchingAccount.recoverMyAccount,
         locale,
-        customer,
+        shopifyContext,
       ),
     },
-    signIn: interpolateString(textAuth.signIn, locale, customer),
+    signIn: interpolateString(textAuth.signIn, locale, shopifyContext),
     useAnotherAccount: interpolateString(
       textAuth.useAnotherAccount,
       locale,
-      customer,
+      shopifyContext,
     ),
   };
   const renderStatusActions = () => {
     switch (shopifyCustomerStatus) {
+      case ShopifyCustomerStatus.NotConnected:
+        return (
+          <Button block onClick={() => connectToShopify()}>
+            {texts.connectToShopify}
+          </Button>
+        );
       case ShopifyCustomerStatus.NewAccount:
         return (
           <>

libs/features/unlock/shopify/src/lib/OffKeyAuth/examples.tsx

@@ -16,6 +16,7 @@ import OffKeyAuth, { OffKeyAuthProps } from './OffKeyAuth';
 export const offKeyAuthProps: OffKeyAuthProps = {
   organizerId: 'organizerId',
   textAuth: {
+    connectToShopify: 'Connect to my account',
     createNewAccount: 'Create new account',
     useExistingAccount: 'Use existing account',
     useAnotherAccount: 'Use another account',
@@ -57,3 +58,18 @@ export function authMocks({
   mockWallet.mockReturnValue(walletAuthMocks);
   return [shopifyMocks(shopifyCustomerMocks), mockWallet];
 }
+
+export const customer = {
+  id: '1',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: '[email protected]',
+};
+
+export const shopifyContext = {
+  customerFirstName: customer.firstName,
+  customerLastName: customer.lastName,
+  customerEmail: customer.email,
+  productTitle: 'My Product',
+  productAvailable: true,
+};

libs/features/unlock/shopify/src/lib/OffKeyGate/OffKeyGate.stories.tsx

@@ -56,6 +56,7 @@ type Story = StoryObj<typeof meta>;
 export const Unlocked: Story = {
   play: async ({ container }) => {
     await screen.findAllByText(/Unlocked/i);
+    await screen.findByText(/My Product/i);
   },
 };
 
@@ -91,6 +92,7 @@ export const Used: Story = {
     },
   },
   play: async ({ container }) => {
+    await screen.findByText(/My Product/i);
     await screen.findAllByText(/Used/i);
   },
 };
@@ -109,6 +111,7 @@ export const Locked: Story = {
     },
   },
   play: async ({ container }) => {
+    await screen.findByText(/My Product/i);
     await screen.findAllByText(/Locked/i);
   },
 };

libs/features/unlock/shopify/src/lib/OffKeyGate/OffKeyGate.tsx

@@ -42,49 +42,51 @@ export default function OffKeyGate({
   locale,
   textGate,
 }: OffKeyGateProps) {
-  const { offKeyState, customer } = useShopifyCustomer({ organizerId });
+  const { offKeyState, customer, shopifyContext } = useShopifyCustomer({
+    organizerId,
+  });
   const textsSubtitle = {
     [OffKeyState.Unlocked]: interpolateString(
       textGate.subtitle[OffKeyState.Unlocked],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Unlocking]: interpolateString(
       textGate.subtitle[OffKeyState.Unlocking],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Used]: interpolateString(
       textGate.subtitle[OffKeyState.Used],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Locked]: interpolateString(
       textGate.subtitle[OffKeyState.Locked],
       locale,
-      customer,
+      shopifyContext,
     ),
   };
   const textsMainText = {
     [OffKeyState.Unlocked]: interpolateString(
       textGate.mainText[OffKeyState.Unlocked],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Unlocking]: interpolateString(
       textGate.mainText[OffKeyState.Unlocking],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Used]: interpolateString(
       textGate.mainText[OffKeyState.Used],
       locale,
-      customer,
+      shopifyContext,
     ),
     [OffKeyState.Locked]: interpolateString(
       textGate.mainText[OffKeyState.Locked],
       locale,
-      customer,
+      shopifyContext,
     ),
   };
   const textsKeyStatus = {
@@ -93,7 +95,7 @@ export default function OffKeyGate({
     [OffKeyState.Used]: textGate.key.statusText[OffKeyState.Used],
     [OffKeyState.Locked]: textGate.key.statusText[OffKeyState.Locked],
   };
-  const gateName = interpolateString(textGate.key.name, locale, customer);
+  const gateName = interpolateString(textGate.key.name, locale, shopifyContext);
   return (
     <AutoAnimate>
       {offKeyState && customer ? (

libs/features/unlock/shopify/src/lib/OffKeyGate/examples.tsx

@@ -22,13 +22,13 @@ export const offKeyGateProps: OffKeyGateProps = {
     },
     mainText: {
       [OffKeyState.Unlocked]:
-        'You have unlocked this item and can now add it to your cart.',
+        'You have unlocked "{productTitle}" and can now add it to your cart.',
       [OffKeyState.Unlocking]:
         'Your key is being created and will be ready in a few seconds.',
       [OffKeyState.Used]:
-        "Unfortunately your key has already been used so you can't proceed with the purchase of this item",
+        'Unfortunately your key has already been used so you can\'t proceed with the purchase of "{productTitle}"',
       [OffKeyState.Locked]:
-        'Unfortunately as of now you do not have access to the key to unlock this product. Check out how to get the key and proceed with the purchase.',
+        'Unfortunately as of now you do not have access to the key to unlock "{productTitle}". Check out how to get the key and proceed with the purchase.',
     },
     key: {
       statusText: {

libs/features/unlock/shopify/src/lib/OffKeyGateNotConnected/OffKeyGateNotConnected.tsx

@@ -34,63 +34,65 @@ export default function OffKeyGateNotConnected({
   textGateNotConnected,
   locale,
 }: OffKeyGateNotConnectedProps) {
-  const { customer, status } = useShopifyCustomer({ organizerId });
+  const { shopifyContext, status } = useShopifyCustomer({ organizerId });
 
   const textsSubtitle = {
     [ShopifyCustomerStatus.NotConnected]: interpolateString(
       textGateNotConnected.subtitle[ShopifyCustomerStatus.NotConnected],
       locale,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.ExistingAccountNewCustomer]: interpolateString(
       textGateNotConnected.subtitle[
         ShopifyCustomerStatus.ExistingAccountNewCustomer
       ],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.NewAccount]: interpolateString(
       textGateNotConnected.subtitle[ShopifyCustomerStatus.NewAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.MatchingAccount]: interpolateString(
       textGateNotConnected.subtitle[ShopifyCustomerStatus.MatchingAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.NoMatchingAccount]: interpolateString(
       textGateNotConnected.subtitle[ShopifyCustomerStatus.NoMatchingAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
   };
 
   const textsMainText = {
     [ShopifyCustomerStatus.NotConnected]: interpolateString(
       textGateNotConnected.mainText[ShopifyCustomerStatus.NotConnected],
       locale,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.ExistingAccountNewCustomer]: interpolateString(
       textGateNotConnected.mainText[
         ShopifyCustomerStatus.ExistingAccountNewCustomer
       ],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.NewAccount]: interpolateString(
       textGateNotConnected.mainText[ShopifyCustomerStatus.NewAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.MatchingAccount]: interpolateString(
       textGateNotConnected.mainText[ShopifyCustomerStatus.MatchingAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
     [ShopifyCustomerStatus.NoMatchingAccount]: interpolateString(
       textGateNotConnected.mainText[ShopifyCustomerStatus.NoMatchingAccount],
       locale,
-      customer,
+      shopifyContext,
     ),
   };