Apply latest string changes/formats

docs/component.md

@@ -17,15 +17,70 @@ const component = Strivve.createComponent({ core, appearance, localization });
 ## Localization
 
 Interface representing localization options.
-
-### Properties
-
-| Name                   | Type   | Description                                                            |
-| ---------------------- | ------ | ---------------------------------------------------------------------- |
-| selectSiteTitle        | string | Optional. The title to display when selecting a site.                  |
-| selectSiteTitleHaveJob | string | Optional. The title to display when selecting a site and having a job. |
-| accountLinkTitle       | string | Optional. The title for the account link.                              |
-| accountLinkDescription | string | Optional. The description for the account link.                        |
+```js
+{
+    intro_title: 'Update your card info everywhere you pay, the easier way!',
+    intro_icon_text: 'Save time. Log in. We’ll do the rest.',
+    intro_step_title: 'Here’s how:',
+    intro_step_one: 'STEP 1',
+    intro_step_one_description: 'On the next screen, select sites you shop with, and log in.',
+    intro_step_two: 'STEP 2',
+    intro_step_two_description: 'We’ll update your card information on that site for you.',
+    intro_btn: 'Get Started',
+
+    logon_forgot_signin: "Forgot your sign-in? Let's go find it.",
+    site_selection_btn_all_sites: "View all sites",
+    logon_btn_cancel: "Cancel",
+    logon_btn_link: "Link Account",
+    logon_progress_cancel: "Cancel",
+    logon_link_success_btn_browse: "Browse More Sites",
+    logon_link_error_btn: "Try a Different Site",
+    logon_unpw_btn_verify: "Verify",
+    logon_unpw_cancel: "Cancel",
+    logon_cancel_btn_leave: "Leave",
+    logon_cancel_btn_stay: "Stay",
+    logon_otp_btn_verify: "Verify",
+    logon_otp_cancel: "Cancel",
+    logon_otp_retry_btn_verify: "Verify",
+    logon_otp_retry_cancel: "Cancel",
+    logon_password_btn_verify: "Verify",
+    logon_password_cancel: "Cancel",
+
+    placement_success_details_btn_close: "Close",
+    placement_error_details_btn_close: "Close",
+    logon_title: "Securely link your account",
+    logon_link_success_title: "We're Still Finishing Up",
+    logon_card_placement_success_title: "",
+    placement_success_details_title: "Success!",
+    placement_error_details_title: "Error!",
+    all_sites_search_default: "Enter a site or brand name",
+    logon_username_default: "Email/Username",
+    logon_password_default: "Password",
+    site_selection_title: "Select a site for us to push your updated card to.",
+    all_sites_title: "Select a site for us to push your updated card to.",
+    all_sites_search_site_title: "Search site",
+    all_sites_success_text: "You've placed your card at <n> sites.",
+    all_sites_failure_text: "See your recent <n> site(s) that failed",
+    logon_text: "Rest Easy. Acme does not store your logon credentials",
+    logon_progress_title: "Logging In....",
+    logon_link_success_text: "This might take a minute. Select another site to update while you wait.",
+    logon_card_placement_success_background: "Your card was placed successfully",
+    logon_unpw_retry: "The initial credentials you have provided are incorrect.",
+    long_username_retry: "The initial credentials you have provided are incorrect.",
+    logon_cancel_title: "We're still trying to connect",
+    logon_cancel_text: "We may not be able to. Do you want to stick around and find out?",
+    logon_otp_text: "The site is requiring additional information.",
+    logon_otp_default: "Enter the one-time passcode sent to you.......",
+    logon_otp_retry_text: "The site is requiring additional information.",
+    logon_otp_retry_default: "",
+    logon_password_text: "This site is requiring additional information",
+    my_sites_error_title: "Errors",
+    my_sites_error_text: "The following site encountered a logon error. Click more for details.",
+    my_sites_success_title: "Successful placement",
+    my_sites_success_text: "Your card details were successfully placed on the following sites",
+    placement_success_details_text: "Your card details were successfully placed on this site.",
+  }
+```
 
 ## Method
 

examples/custom-localization/index.html

@@ -18,10 +18,66 @@
 <script>
 
   const localization = {
-    selectSiteTitle: 'Select my site',
-    selectSiteTitleHaveJob: 'Select Site',
-    accountLinkTitle: 'Sign in',
-    accountLinkDescription: 'to continue account linking',
+    intro_title: 'Update your card info everywhere you pay, the easier way!',
+    intro_icon_text: 'Save time. Log in. We’ll do the rest.',
+    intro_step_title: 'Here’s how:',
+    intro_step_one: 'STEP 1',
+    intro_step_one_description: 'On the next screen, select sites you shop with, and log in.',
+    intro_step_two: 'STEP 2',
+    intro_step_two_description: 'We’ll update your card information on that site for you.',
+    intro_btn: 'Get Started',
+
+    logon_forgot_signin: "Forgot your sign-in? Let's go find it.",
+    site_selection_btn_all_sites: "View all sites",
+    logon_btn_cancel: "Cancel",
+    logon_btn_link: "Link Account",
+    logon_progress_cancel: "Cancel",
+    logon_link_success_btn_browse: "Browse More Sites",
+    logon_link_error_btn: "Try a Different Site",
+    logon_unpw_btn_verify: "Verify",
+    logon_unpw_cancel: "Cancel",
+    logon_cancel_btn_leave: "Leave",
+    logon_cancel_btn_stay: "Stay",
+    logon_otp_btn_verify: "Verify",
+    logon_otp_cancel: "Cancel",
+    logon_otp_retry_btn_verify: "Verify",
+    logon_otp_retry_cancel: "Cancel",
+    logon_password_btn_verify: "Verify",
+    logon_password_cancel: "Cancel",
+
+    placement_success_details_btn_close: "Close",
+    placement_error_details_btn_close: "Close",
+    logon_title: "Securely link your account",
+    logon_link_success_title: "We're Still Finishing Up",
+    logon_card_placement_success_title: "",
+    placement_success_details_title: "Success!",
+    placement_error_details_title: "Error!",
+    all_sites_search_default: "Enter a site or brand name",
+    logon_username_default: "Email/Username",
+    logon_password_default: "Password",
+    site_selection_title: "Select a site for us to push your updated card to.",
+    all_sites_title: "Select a site for us to push your updated card to.",
+    all_sites_search_site_title: "Search site",
+    all_sites_success_text: "You've placed your card at <n> sites.",
+    all_sites_failure_text: "See your recent <n> site(s) that failed",
+    logon_text: "Rest Easy. Acme does not store your logon credentials",
+    logon_progress_title: "Logging In....",
+    logon_link_success_text: "This might take a minute. Select another site to update while you wait.",
+    logon_card_placement_success_background: "Your card was placed successfully",
+    logon_unpw_retry: "The initial credentials you have provided are incorrect.",
+    long_username_retry: "The initial credentials you have provided are incorrect.",
+    logon_cancel_title: "We're still trying to connect",
+    logon_cancel_text: "We may not be able to. Do you want to stick around and find out?",
+    logon_otp_text: "The site is requiring additional information.",
+    logon_otp_default: "Enter the one-time passcode sent to you.......",
+    logon_otp_retry_text: "The site is requiring additional information.",
+    logon_otp_retry_default: "",
+    logon_password_text: "This site is requiring additional information",
+    my_sites_error_title: "Errors",
+    my_sites_error_text: "The following site encountered a logon error. Click more for details.",
+    my_sites_success_title: "Successful placement",
+    my_sites_success_text: "Your card details were successfully placed on the following sites",
+    placement_success_details_text: "Your card details were successfully placed on this site.",
   };
 
   Strivve.mountLinkingJourney({
@@ -48,6 +104,12 @@
         is_primary: true,
       },
     },
+    intro: {
+      banner: 'https://swch.github.io/Strivve-UX-Components/banner.png',
+      onClickBanner: () => {
+        alert('open banner');
+      },
+    },
   });
 </script>
 

examples/intro-view/index.html

@@ -40,7 +40,6 @@
         is_primary: true,
       },
     },
-    mount: 'intro',
     intro: {
       banner: 'https://swch.github.io/Strivve-UX-Components/banner.png',
       onClickBanner: () => {

src/component/AccountLinkContainer.tsx

@@ -29,13 +29,13 @@ function AccountLinkContainer({
             className="accountLinkHeaderTitle"
             css={appearance.elements?.accountLinkHeaderTitle}
           >
-            {localization.accountLinkTitle}
+            {localization.logon_title}
           </h3>
           <p
             className="accountLinkHeaderDescription"
             css={appearance.elements?.accountLinkHeaderDescription}
           >
-            {localization.accountLinkDescription?.replace('{appName}', appName)}
+            {localization.logon_text?.replace('<appName>', appName)}
           </p>
         </>
       )}

src/component/AccountLinkForm.tsx

@@ -30,7 +30,7 @@ function AccountLinkForm({
   core,
   site,
 }: AccountLinkFormProps) {
-  const { appearance } = useBase();
+  const { appearance, localization } = useBase();
 
   const host = site?.host || '';
 
@@ -99,7 +99,7 @@ function AccountLinkForm({
             });
           }}
         >
-          Forgot your sign-in? Let’s go find it.
+          {localization.logon_forgot_signin}
         </a>
       )}
       <div
@@ -117,11 +117,11 @@ function AccountLinkForm({
               });
             }}
             type="button"
-            title={'Cancel'}
+            title={localization.logon_btn_cancel}
             variant="outlined"
           />
         )}
-        <Button type="submit" title={'Link Account'} disabled={disabled} />
+        <Button type="submit" title={localization.logon_btn_link} disabled={disabled} />
       </div>
     </form>
   );

src/component/AccountLinkView.tsx

@@ -35,6 +35,8 @@ export function AccountLinkView({
   const isSuccessJob = state?.message?.termination_type === 'BILLABLE'
   const isFailedJob = failedStatus.includes(state?.message?.termination_type);
 
+  console.log('===', state);
+
   useEffect(() => {
     const accountLink = core.createAccountLink(options);
     accountLink.subscribe((state: AccountLinkState) => {
@@ -157,7 +159,7 @@ export function AccountLinkView({
                   className="accountLinkProgressTitle"
                   css={appearance.elements?.accountLinkProgressTitle}
                 >
-                  {localization.accountLinkProgressTitle}
+                  {state?.message?.status?.replaceAll('_', ' ')?.toLowerCase() || localization.logon_progress_title}
                 </p>
                 <SecurityIcon />
                 <p
@@ -180,10 +182,10 @@ export function AccountLinkView({
             open={state?.success}
             variant={isFailedJob ? "error" : isSuccessJob ? "success" : "pending"}
             title={isFailedJob ? "Error!" : isSuccessJob ? "Success!" : "We’re Still Finishing Up"}
-            description={ isFailedJob ? state.message?.status_message : isSuccessJob ? "Your card details were successfully placed on this site." :
-              'This might take a minute. Select another site to update while you wait.'
+            description={ isFailedJob ? state.message?.status_message : isSuccessJob ? localization.logon_card_placement_success_background :
+              localization.logon_link_success_text
             }
-            buttonText="Browse More Sites"
+            buttonText={localization.logon_link_success_btn_browse}
             onClickButton={() => {
               options.onCancel?.();
               core?.sendEvent({
@@ -204,9 +206,9 @@ export function AccountLinkView({
           <StatusModal
             open={state?.failed}
             variant="error"
-            title="Error!"
+            title={localization.placement_error_details_title}
             description={state?.message?.status_message}
-            buttonText="Try a Different Site"
+            buttonText={localization.logon_link_error_btn}
             onClickButton={() => {
               options.onCancel?.();
               core?.sendEvent({
@@ -228,7 +230,7 @@ export function AccountLinkView({
             open={Boolean(state?.pending)}
             title={pendingMessage[state?.pending?.status] || ''}
             description={state?.message?.status_message}
-            buttonText="Verify"
+            buttonText={localization.logon_otp_btn_verify || ''}
             onClickClose={() => {
               core?.sendEvent({
                 component: 'pending_form_modal',
@@ -275,7 +277,7 @@ export function AccountLinkView({
                 site: host,
               });
             }}
-            title="Cancel"
+            title={localization.logon_otp_cancel}
           />
         </div>
       </div>

src/component/IntroView.tsx

@@ -20,20 +20,20 @@ function IntroView({
         <div>
           <Header />
           <p css={appearance.elements?.introTitle} className="introTitle">
-            {localization.introTitle}
+            {localization.intro_title}
           </p>
           <div
             css={appearance.elements?.introIconWrapper}
             className="introIconWrapper"
           >
             <TimeIcon />
-            <p>{localization.introIconText}</p>
+            <p>{localization.intro_icon_text}</p>
           </div>
           <p
             css={appearance.elements?.introStepTitle}
             className="introStepTitle"
           >
-            {localization.introStepTitle}
+            {localization.intro_step_title}
           </p>
           <div
             css={appearance.elements?.introStepWrapper}
@@ -44,27 +44,27 @@ function IntroView({
                 css={appearance.elements?.introStepIconWrapper}
                 className="introStepIconWrapper"
               >
-                <StepOneIcon /> {localization.introStepOne}
+                <StepOneIcon /> {localization.intro_step_one}
               </div>
               <div
                 css={appearance.elements?.introStepDescription}
                 className="introStepDescription"
               >
-                {localization.introStepOneDescription}
+                {localization.intro_step_one_description}
               </div>
             </div>
             <div>
               <div
                 css={appearance.elements?.introStepIconWrapper}
                 className="introStepIconWrapper"
               >
-                <StepTwoIcon /> {localization.introStepTwo}
+                <StepTwoIcon /> {localization.intro_step_two}
               </div>
               <div
                 css={appearance.elements?.introStepDescription}
                 className="introStepDescription"
               >
-                {localization.introStepTwoDescription}
+                {localization.intro_step_two_description}
               </div>
             </div>
           </div>
@@ -84,7 +84,7 @@ function IntroView({
           className="introStepButtonWrapper"
         >
           <Button
-            title={localization.introButtonText}
+            title={localization.intro_btn}
             onClick={options?.onClickButton}
           />
         </div>

src/component/MySiteList.tsx

@@ -29,7 +29,7 @@ function MySiteList({
   onSelectItem,
   sendEvent,
 }: MySiteListProps) {
-  const { appearance } = useBase();
+  const { appearance, localization } = useBase();
   const [openStatus, setOpenStatus] = useState<MerchantSite | null>(null);
   const [scroll, setScroll] = useState<boolean | null>(null);
 
@@ -154,9 +154,9 @@ function MySiteList({
       >
         {errors.length > 0 && (
           <div>
-            <p css={appearance.elements?.mySiteTitle}>Failures</p>
+            <p css={appearance.elements?.mySiteTitle}>{localization.my_sites_error_title}</p>
             <p css={appearance.elements?.mySiteDescription}>
-            We were unable to place your card on the following sites.
+              {localization.my_sites_error_text}
             </p>
             {errors?.map(renderitem)}
           </div>
@@ -172,9 +172,9 @@ function MySiteList({
         )}
         {successful.length > 0 && (
           <div>
-            <p css={appearance.elements?.mySiteTitle}>Successful placements</p>
+            <p css={appearance.elements?.mySiteTitle}>{localization.my_sites_error_title}</p>
             <p css={appearance.elements?.mySiteDescription}>
-              Your card details were successfully placed on the following sites.
+              {localization.my_sites_error_text}
             </p>
             {successful?.map(renderitem)}
           </div>
@@ -184,11 +184,11 @@ function MySiteList({
         variant={!isError ? 'success' : 'error'}
         description={
           !isError
-            ? 'Your card details were successfully placed on this site.'
+            ? localization.placement_success_details_text
             : openStatus?.job?.status_message || ''
         }
-        title={!isError ? 'Success!' : 'Error!'}
-        buttonText="Close"
+        title={!isError ? localization.placement_success_details_title : localization.placement_error_details_title}
+        buttonText={isError ? localization.placement_error_details_btn_close : localization.placement_success_details_btn_close}
         open={Boolean(openStatus)}
         onClickClose={() => setOpenStatus(null)}
         onClickButton={() => setOpenStatus(null)}