Localize text

Author: yunakim714

packages/template-retail-react-app/app/components/passkey-registration-modal/index.jsx

@@ -50,7 +50,6 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
     const form = useForm()
 
     const config = getConfig()
-    const commerceApiConfig = config.app.commerceAPI
     const webauthnConfig = config.app.login.passkey
     const authorizeWebauthnRegistration = useAuthHelper(AuthHelpers.AuthorizeWebauthnRegistration)
 
@@ -62,7 +61,6 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
             await authorizeWebauthnRegistration.mutateAsync({
                 user_id: customer.email,
                 mode: webauthnConfig.mode,
-                channel_id: commerceApiConfig.parameters.siteId,
                 ...(webauthnConfig.mode === 'callback' && {
                     callback_uri: webauthnConfig.callbackURI
                 })
@@ -130,7 +128,7 @@ const PasskeyRegistrationModal = ({isOpen, onClose}) => {
                         <FormControl>
                             <FormLabel>
                                 {formatMessage({
-                                    defaultMessage: 'Passkey Nickname',
+                                    defaultMessage: 'Passkey Nickname (optional)',
                                     id: 'auth_modal.passkey.label.nickname'
                                 })}
                             </FormLabel>

packages/template-retail-react-app/app/hooks/use-passkey-registration.js

@@ -6,6 +6,7 @@
  */
 
 import React from 'react'
+import {useIntl} from 'react-intl'
 import {
     Box,
     Button,
@@ -21,6 +22,7 @@ import {usePasskeyRegistrationContext} from '@salesforce/retail-react-app/app/co
 export const usePasskeyRegistration = () => {
     const toast = useToast()
     const {passkeyModal} = usePasskeyRegistrationContext()
+    const {formatMessage} = useIntl()
 
     const showToast = () => {
         toast({
@@ -43,10 +45,16 @@ export const usePasskeyRegistration = () => {
                         top={2}
                         color="white"
                         onClick={onClose}
-                        aria-label="Close toast"
+                        aria-label={formatMessage({
+                            id: 'passkey_registration.toast.button.close.assistive_msg',
+                            defaultMessage: 'Close toast'
+                        })}
                     />
                     <Box mb={3} fontWeight="medium">
-                        Create a passkey for a more secure and easier login
+                        {formatMessage({
+                            id: 'passkey_registration.toast.message',
+                            defaultMessage: 'Create a passkey for a more secure and easier login'
+                        })}
                     </Box>
                     <Button
                         size="sm"
@@ -56,7 +64,10 @@ export const usePasskeyRegistration = () => {
                             passkeyModal.onOpen()
                         }}
                     >
-                        Create Passkey
+                        {formatMessage({
+                            id: 'passkey_registration.toast.button.create',
+                            defaultMessage: 'Create Passkey'
+                        })}
                     </Button>
                 </Box>
             )