309 unlock new routes v1 shopify connect and unlock

[sebpalluel]

PR Type

Enhancement, Tests, Dependencies

---

Description

• Added new RootLayout component with multiple providers for Shopify integration.
• Introduced V1Connect and V1Connected components for Shopify features.
• Refactored useShopifyCustomer hook to remove organizerId parameter and added support for additionalData.
• Added useConnectWallet hook for managing wallet connections.
• Updated middleware configuration to exclude 'shopify' from paths.
• Modified various delete actions to return revalidateTagKey.
• Added and updated tests for new and existing functionalities.
• Upgraded dependencies including Next.js, React, and NX to their latest versions.

---

Changes walkthrough 📝

	Relevant files
Enhancement	20 files layout.tsx Add RootLayout Component with Multiple Providers                  apps/unlock/app/shopify/layout.tsx Added a new RootLayout component for Shopify integration. Integrated multiple providers including IFrameProvider, ReactQueryProviders, WalletProvider, and ThemeProvider. Enabled dynamic import for RootLayout to improve loading times. +50/-0    page.tsx Add V1 Shopify Connect Page Component                                        apps/unlock/app/shopify/v1/connect/page.tsx Added a new page component for V1 Shopify Connect. +5/-0      deleteContentSpaceFile.ts Modify deleteContentSpaceFile to Return revalidateTagKey  libs/features/back-office/content-spaces/src/lib/actions/deleteContentSpaceFile.ts Modified deleteContentSpaceFile function to return revalidateTagKey. +5/-1      deleteContentSpaceFiles.ts Modify deleteContentSpaceFiles to Return revalidateTagKey libs/features/back-office/content-spaces/src/lib/actions/deleteContentSpaceFiles.ts Modified deleteContentSpaceFiles function to return revalidateTagKey. +3/-1      deleteEventPassFile.ts Modify deleteEventPassFile to Return revalidateTagKey        libs/features/back-office/events/src/lib/actions/deleteEventPassFile.ts Modified deleteEventPassFile function to return revalidateTagKey. +3/-1      deleteEventPassFiles.ts Modify deleteEventPassFiles to Return revalidateTagKey      libs/features/back-office/events/src/lib/actions/deleteEventPassFiles.ts Modified deleteEventPassFiles function to return revalidateTagKey. +3/-3      index.ts Export V1Connect from Shopify Feature Library                        libs/features/unlock/shopify/src/index.ts Exported V1Connect from the Shopify feature library. +1/-2      OffKeyAuth.tsx Refactor OffKeyAuth to Use useConnectWallet Hook                  libs/features/unlock/shopify/src/lib/OffKeyAuth/OffKeyAuth.tsx Refactored to use the new useConnectWallet hook. +4/-41    OffKeyGate.tsx Simplify useShopifyCustomer Hook Usage in OffKeyGate          libs/features/unlock/shopify/src/lib/OffKeyGate/OffKeyGate.tsx Removed organizerId parameter from useShopifyCustomer hook. +1/-3      OffKeyGateNotConnected.tsx Simplify useShopifyCustomer Hook Usage in OffKeyGateNotConnected libs/features/unlock/shopify/src/lib/OffKeyGateNotConnected/OffKeyGateNotConnected.tsx Removed organizerId parameter from useShopifyCustomer hook. +1/-1      OffKeyHeaderConnected.tsx Simplify useShopifyCustomer Hook Usage in OffKeyHeaderConnected libs/features/unlock/shopify/src/lib/OffKeyHeaderConnected/OffKeyHeaderConnected.tsx Removed organizerId parameter from useShopifyCustomer hook. +1/-3      OffKeyHeaderNotConnected.tsx Simplify useShopifyCustomer Hook Usage in OffKeyHeaderNotConnected libs/features/unlock/shopify/src/lib/OffKeyHeaderNotConnected/OffKeyHeaderNotConnected.tsx Removed organizerId parameter from useShopifyCustomer hook. +1/-3      OffKeyProfile.tsx Simplify useShopifyCustomer Hook Usage in OffKeyProfile    libs/features/unlock/shopify/src/lib/OffKeyProfile/OffKeyProfile.tsx Removed organizerId parameter from useShopifyCustomer hook. +1/-3      useConnectWallet.tsx Add useConnectWallet Hook for Wallet Management                    libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.tsx Added a new useConnectWallet hook for managing wallet connections. +58/-0    useShopifyCustomer.tsx Enhance useShopifyCustomer Hook with Additional Data          libs/features/unlock/shopify/src/lib/hooks/useShopifyCustomer.tsx Removed organizerId parameter. Added support for additionalData in the hook. +14/-6    Connect.tsx Add V1Connect Component for Shopify Integration                    libs/features/unlock/shopify/src/lib/v1/Connect/Connect.tsx Added V1Connect component for Shopify integration. Integrated useConnectWallet and useShopifyCustomer hooks. +124/-0  Connected.tsx Add V1Connected Component                                                                libs/features/unlock/shopify/src/lib/v1/Connected/Connected.tsx Added V1Connected component. +3/-0      context.tsx Enhance IFrameContext with Additional Data Support              libs/next/iframe/src/lib/context.tsx Added support for additionalData in IFrameContext. +12/-3    hooks.ts Enhance IFrame Hooks with Generic Type Support                      libs/next/iframe/src/lib/hooks.ts Updated hooks to support generic types for additionalData. +19/-11  index.ts Modify mint Method to Handle Already Minted Cards                libs/nft/loyalty-card/src/lib/index.ts Modified mint method to return null if the loyalty card is already minted. +2/-2
Configuration changes	3 files middleware.ts Update Middleware Configuration for Shopify Paths                apps/unlock/middleware.ts Updated middleware configuration to exclude 'shopify' from paths. +1/-1      .env.local Update Shopify API Secret                                                                .env.local Updated SHOPIFY_API_SECRET value. +1/-1      .prettierignore Extend .prettierignore with Workspace Data                              .prettierignore Extended .prettierignore to include workspace data. +2/-1
Tests	9 files deleteContentSpaceFile.spec.ts Update Tests for deleteContentSpaceFile Action                      libs/features/back-office/content-spaces/src/lib/actions/deleteContentSpaceFile.spec.ts Mocked revalidateTag function. Updated tests to check for the return value of revalidateTagKey. +8/-6      deleteContentSpaceFiles.spec.ts Update Tests for deleteContentSpaceFiles Action                    libs/features/back-office/content-spaces/src/lib/actions/deleteContentSpaceFiles.spec.ts Updated tests to check for the return value of revalidateTagKey. +5/-5      deleteEventPassFile.spec.ts Update Tests for deleteEventPassFile Action                            libs/features/back-office/events/src/lib/actions/deleteEventPassFile.spec.ts Updated tests to check for the return value of revalidateTagKey. +6/-6      deleteEventPassFiles.spec.ts Update Tests for deleteEventPassFiles Action                          libs/features/back-office/events/src/lib/actions/deleteEventPassFiles.spec.ts Updated tests to check for the return value of revalidateTagKey. +5/-9      useConnectWallet.spec.tsx Add Tests for useConnectWallet Hook                                            libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.spec.tsx Added tests for the new useConnectWallet hook. +198/-0  useShopifyCustomer.spec.tsx Update Tests for useShopifyCustomer Hook                                  libs/features/unlock/shopify/src/lib/hooks/useShopifyCustomer.spec.tsx Updated tests to remove organizerId parameter. Added tests for handling additionalData. +33/-25  Connect.stories.tsx Add Storybook Stories for V1Connect Component                        libs/features/unlock/shopify/src/lib/v1/Connect/Connect.stories.tsx Added Storybook stories for V1Connect component. +78/-0    examples.tsx Add Example Data for V1Connect Component                                  libs/features/unlock/shopify/src/lib/v1/Connect/examples.tsx Added example data and mock functions for V1Connect component. +49/-0    index.spec.ts Update Tests for LoyaltyCardNftWrapper                                      libs/nft/loyalty-card/src/lib/index.spec.ts Updated tests to handle already minted loyalty cards. +5/-4
Dependencies	2 files migrations.json Update NX Migrations to Newer Versions                                      migrations.json Updated NX migrations to newer versions. +19/-50  package.json Upgrade Dependencies for Next.js, React, and NX                    package.json Upgraded various dependencies including Next.js, React, and NX. +33/-33

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
back-office	⬜️ Ignored (Inspect)			Jul 15, 2024 2:37pm
marketplace	⬜️ Ignored (Inspect)			Jul 15, 2024 2:37pm
unlock	⬜️ Ignored (Inspect)			Jul 15, 2024 2:37pm

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 Security concerns Sensitive information exposure: The .env.local file exposes SHOPIFY_API_SECRET in the PR diff. This is a security risk as it exposes sensitive credentials. It's recommended to use environment variables set outside of the codebase for such sensitive information.

⚡ Key issues to review Code Organization The RootLayout component in layout.tsx is deeply nested and handles multiple contexts and providers, which might make it difficult to maintain and test. Consider breaking this component into smaller, more focused components to improve readability and maintainability. Error Handling The error handling in useConnectWallet hook seems to only check for a specific error message 'Wallet address does not match'. It's recommended to handle different types of errors more robustly to avoid potential issues in production. Error Handling Change The method mint in LoyaltyCardNftWrapper class has changed from throwing an error to returning null when the loyalty card is already minted. Ensure that all calling code properly handles this new return value to avoid unintended behavior.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Add optional chaining to callback invocations to guard against them being undefined Consider handling the case where options.onSuccess or options.onError might not be provided in the useMutation mock implementation. This will prevent potential runtime errors if these callbacks are not defined. libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.spec.tsx [13-17] try { const result = await options.mutationFn(props); - options.onSuccess(result, props); + options.onSuccess?.(result, props); } catch (error) { - options.onError(error); + options.onError?.(error); } Apply this suggestion Suggestion importance[1-10]: 9 Why: Adding optional chaining to the callback invocations is a good practice to prevent potential runtime errors if these callbacks are not defined. This suggestion addresses a possible bug and improves the robustness of the code.	9
	Add validation for identifiers used in revalidateTagKey to avoid runtime errors Ensure that revalidateTagKey is properly formatted and does not include any undefined or null values by checking the variables organizerId, eventId, and eventPassId before using them. libs/features/back-office/events/src/lib/actions/deleteEventPassFile.ts [20] +if (!organizerId || !eventId || !eventPassId) { + throw new Error('Invalid identifiers provided'); +} const revalidateTagKey = `${organizerId}-${eventId}-${eventPassId}-getEventPassNftFile`; Apply this suggestion Suggestion importance[1-10]: 9 Why: This suggestion is important as it ensures that the identifiers used to construct revalidateTagKey are valid, preventing potential runtime errors and improving the robustness of the code.	9
	Add a check to ensure the 'customer' object is defined before accessing its properties Consider adding a check to ensure that customer is defined before attempting to access its properties. This will prevent potential runtime errors if customer is null or undefined. libs/features/unlock/shopify/src/lib/hooks/useShopifyCustomer.tsx [14] const { customer } = useShopifyCustomer(); +if (!customer) { + console.error('Customer data is undefined.'); + return; +} Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential runtime error by ensuring that 'customer' is defined before accessing its properties, which is crucial for preventing crashes.	8
	Add a type check for 'customer.id' to ensure it is a string before using it in 'connectToDappMutation.mutate' To ensure that the customer.id is not undefined when used as an argument in connectToDappMutation.mutate, add a check before calling the mutate function. libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.tsx [44-46] if (wallet && customer?.id && connectToDappMutation.status === 'idle') { - connectToDappMutation.mutate(customer.id); + if (typeof customer.id === 'string') { + connectToDappMutation.mutate(customer.id); + } else { + console.error('Invalid customer ID'); + } } Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential bug by ensuring 'customer.id' is a string before using it, which is important for preventing unexpected behavior.	8
	Add nullish coalescing to handle potential undefined values from useShopifyCustomer Consider handling the case where shopifyContext is undefined or null to prevent runtime errors in scenarios where the Shopify context might not be set. libs/features/unlock/shopify/src/lib/OffKeyHeaderNotConnected/OffKeyHeaderNotConnected.tsx [24] -const { customer, status, shopifyContext } = useShopifyCustomer(); +const { customer, status, shopifyContext } = useShopifyCustomer() || {}; Apply this suggestion Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential runtime error by ensuring that shopifyContext is not undefined, which is crucial for preventing crashes in the application.	8
	Add nullish coalescing to handle potential undefined values from 'useIframeOffKey' It's recommended to handle the case where useIframeOffKey might return undefined or null for any of the destructured properties to prevent runtime errors. libs/features/unlock/shopify/src/lib/hooks/useShopifyCustomer.tsx [7-13] const { customer, product, isReady, offKeyState, linkedCustomer, additionalData, -} = useIframeOffKey<T>(); +} = useIframeOffKey<T>() ?? {}; Apply this suggestion Suggestion importance[1-10]: 7 Why: This suggestion improves the robustness of the code by handling cases where 'useIframeOffKey' might return undefined, preventing potential runtime errors.	7
Maintainability	Refactor the button rendering logic into a separate component for better code organization Refactor the renderStatusActions function to a separate component to improve readability and maintainability of the V1Connect component. This also helps in isolating different cases for unit testing. libs/features/unlock/shopify/src/lib/v1/Connect/Connect.tsx [54-106] -const renderStatusActions = () => { +// This would be in a separate file, e.g., StatusActions.tsx +const StatusActions = ({ shopifyCustomerStatus, isLoading, connectToShopify, connectWalletMutation, additionalData, locale, shopifyContext }) => { switch (shopifyCustomerStatus) { case ShopifyCustomerStatus.NotConnected: return ( <Button block isLoading={isLoading} onClick={() => connectToShopify()} > {interpolateString( additionalData.signUpCTAText, locale, shopifyContext, )} </Button> ); case ShopifyCustomerStatus.NewAccount: return ( <Button block isLoading={isLoading} onClick={() => connectWalletMutation.mutateAsync({ isCreatingAccount: true }) } > {interpolateString( additionalData.signUpCTAText, locale, shopifyContext, )} </Button> ); case ShopifyCustomerStatus.ExistingAccountNewCustomer: case ShopifyCustomerStatus.MatchingAccount: case ShopifyCustomerStatus.NoMatchingAccount: return ( <Button block isLoading={isLoading} onClick={() => connectWalletMutation.mutateAsync({ walletToConnect }) } > {interpolateString( additionalData.signUpCTAText, locale, shopifyContext, )} </Button> ); default: return null; } }; Apply this suggestion Suggestion importance[1-10]: 8 Why: Refactoring the button rendering logic into a separate component improves code organization and maintainability. It also makes the code easier to test and understand.	8
Enhancement	Refine error messages to ensure precise error handling in tests To improve the testability and error handling, explicitly check for the error message content in the catch block when setting accountNotMatching to true. This avoids inadvertently setting it for unrelated errors that might contain the same string elsewhere in the message. libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.spec.tsx [70] -mockConnect.mockRejectedValue(new Error('Wallet address does not match')); +mockConnect.mockRejectedValue(new Error('Wallet address does not match expected address')); Apply this suggestion Suggestion importance[1-10]: 7 Why: Refining error messages to ensure precise error handling in tests is a good enhancement. However, the existing error message is already quite specific, so the improvement is minor.	7
	Wrap the V1Connect component in an error boundary for better error handling Since this is a new page component, ensure that it handles errors gracefully, perhaps by wrapping the component in an error boundary or implementing error handling within the component itself. apps/unlock/app/shopify/v1/connect/page.tsx [5] -export default V1Connect; +import ErrorBoundary from 'path/to/ErrorBoundary'; +export default function SafeV1Connect() { + return ( + <ErrorBoundary> + <V1Connect /> + </ErrorBoundary> + ); +} Apply this suggestion Suggestion importance[1-10]: 7 Why: This suggestion enhances the robustness of the new page component by ensuring it handles errors gracefully, which is beneficial but not critical for initial implementation.	7
	Specify the error type in the onError callback for better type safety and error handling To improve error handling, consider specifying the type of the error in the onError callback of connectToDappMutation to enhance type safety and error handling. libs/features/unlock/shopify/src/lib/hooks/useConnectWallet.tsx [21-23] -onError: (error: any) => { - console.error('Error connecting to dapp:', error); +onError: (error: Error) => { + console.error('Error connecting to dapp:', error.message); }, Apply this suggestion Suggestion importance[1-10]: 6 Why: This suggestion enhances type safety and error handling by specifying the error type, which is a good practice but not critical.	6
	Destructure textGate in the function parameters for direct property access Consider destructuring textGate directly in the function parameters to simplify access to its properties and improve code readability. libs/features/unlock/shopify/src/lib/OffKeyGate/OffKeyGate.tsx [45] const { offKeyState, customer, shopifyContext } = useShopifyCustomer(); +const { subtitle } = textGate; Apply this suggestion Suggestion importance[1-10]: 6 Why: While this suggestion improves code readability and maintainability, it is not crucial for functionality. It is a minor enhancement that simplifies property access.	6
Performance	Use useMemo for memoizing computed values to optimize performance To ensure that the component does not re-render unnecessarily, wrap the interpolateString calls with useMemo to memoize the results based on dependencies. This is particularly useful if interpolateString is computationally expensive or if its dependencies change infrequently. libs/features/unlock/shopify/src/lib/v1/Connect/Connect.tsx [63-67] -{interpolateString( +const signUpText = useMemo(() => interpolateString( additionalData.signUpCTAText, locale, shopifyContext, -)} +), [additionalData.signUpCTAText, locale, shopifyContext]); Apply this suggestion Suggestion importance[1-10]: 6 Why: Using useMemo for memoizing computed values can optimize performance by preventing unnecessary re-renders. However, the performance gain might be minimal unless interpolateString is computationally expensive.	6