fix(sdk): update styles as per design (#667)

* fix: Design QA changes * fix: Bumped apasra version * Updated turbo schema
raystack · Jul 9, 2024 · ea9a82a · ea9a82a
1 parent 58e8d48
commit ea9a82a
Show file tree

Hide file tree

Showing 7 changed files with 7,086 additions and 5,504 deletions.
diff --git a/sdks/js/package.json b/sdks/js/package.json
@@ -18,9 +18,9 @@
     "@turbo/gen": "^1.10.14",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
-    "turbo": "latest"
+    "turbo": "2.0.6"
   },
-  "packageManager": "pnpm@7.15.0",
+  "packageManager": "pnpm@9.3.0",
   "dependencies": {
     "@changesets/cli": "^2.26.2",
     "eslint": "^7.32.0",
@@ -36,4 +36,4 @@
   "engines": {
     "node": ">=20.6.1"
   }
-}
+}
diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
-    "@raystack/apsara": "^0.15.0",
+    "@raystack/apsara": "^0.16.0",
     "@tanstack/react-router": "0.0.1-beta.194",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",

diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx
@@ -5,6 +5,7 @@ import React, {
   ComponentPropsWithRef,
   useCallback,
   useEffect,
+  useRef,
   useState
 } from 'react';
 import { Container } from '~/react/components/Container';
@@ -26,16 +27,19 @@ export const MagicLinkVerify = ({
   ...props
 }: MagicLinkVerifyProps) => {
   const [loading, setLoading] = useState<boolean>(false);
-  const { client, config, strategies = [] } = useFrontier();
-  const [email, setEmail] = useState<string>('');
+  const { client, config } = useFrontier();
   const [emailParam, setEmailParam] = useState<string>('');
   const [stateParam, setStateParam] = useState<string>('');
   const [codeParam, setCodeParam] = useState<string>('');
   const [otp, setOTP] = useState<string>('');
   const [submitError, setSubmitError] = useState<string>('');
+  const isButtonDisabledRef = useRef(true);
 
   const handleOTPChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setOTP(event.target.value);
+    const { value } = event.target;
+    isButtonDisabledRef.current = value.length === 0;
+    if (submitError.length > 0) setSubmitError('');
+    setOTP(value);
   };
 
   useEffect(() => {
@@ -72,6 +76,7 @@ export const MagicLinkVerify = ({
         window.location = redirectURL ? redirectURL : window.location.origin;
       } catch (error) {
         console.log(error);
+        isButtonDisabledRef.current = true;
         setSubmitError('Please enter a valid verification code');
       } finally {
         setLoading(false);
@@ -91,37 +96,42 @@ export const MagicLinkVerify = ({
           </Text>
         )}
       </Flex>
-      <form
-        onSubmit={OTPVerifyHandler}
-        className={styles.container80}
-        style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
-      >
-        <Flex direction="column">
+
+      <form onSubmit={OTPVerifyHandler} className={styles.container80}>
+        <Flex
+          direction="column"
+          gap="extra-small"
+          className={styles.optInputContainer}
+        >
           <TextField
+            data-test-id="enter-code"
             autoFocus
             // @ts-ignore
             size="medium"
             key={'code'}
             placeholder="Enter code"
             onChange={handleOTPChange}
+            className={styles.textFieldCode}
           />
-          <Text size={1} className={styles.error}>
+
+          <Text size={2} className={styles.error}>
             {submitError && String(submitError)}
           </Text>
         </Flex>
+
         <Button
+          data-test-id="continue-with-login-code"
           size="medium"
           variant="primary"
           className={styles.container}
-          disabled={!otp}
+          disabled={isButtonDisabledRef.current}
           type="submit"
         >
-          <Text className={styles.continue}>
-            {loading ? 'Submitting...' : 'Continue with login code'}
-          </Text>
+          {loading ? 'Submitting...' : 'Continue with login code'}
         </Button>
       </form>
-      <Link href={config.redirectLogin}>
+
+      <Link href={config.redirectLogin} data-test-id="back-to-login">
         <Text size={2}>Back to login</Text>
       </Link>
     </Container>

diff --git a/sdks/js/packages/core/react/components/onboarding/magiclink.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx
@@ -15,8 +15,7 @@ const styles = {
 
   button: {
     width: '100%'
-  },
-  disabled: { opacity: 1 }
+  }
 };
 
 type MagicLinkProps = {
@@ -84,7 +83,7 @@ export const MagicLink = ({
         style={styles.button}
         onClick={() => setVisiable(true)}
       >
-        <Text>Continue with Email</Text>
+        Continue with Email
       </Button>
     );
 
@@ -131,16 +130,11 @@ export const MagicLink = ({
         size="medium"
         variant="primary"
         {...props}
-        style={{
-          ...styles.button,
-          ...(!email ? styles.disabled : {})
-        }}
+        style={{ ...styles.button }}
         disabled={!email}
         type="submit"
       >
-        <Text style={{ color: 'var(--foreground-inverted)' }}>
-          {loading ? 'loading...' : 'Continue with Email'}
-        </Text>
+        {loading ? 'loading...' : 'Continue with Email'}
       </Button>
     </form>
   );

diff --git a/sdks/js/packages/core/react/components/onboarding/onboarding.module.css b/sdks/js/packages/core/react/components/onboarding/onboarding.module.css
@@ -3,22 +3,37 @@
 }
 .container80 {
   width: 80%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  letter-spacing: 0.4px;
+}
+
+.optInputContainer {
+  position: relative;
 }
 
 .error {
   color: var(--foreground-danger);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
 }
 
-.continue { 
+.continue {
   color: var(--foreground-inverted);
 }
 
-
 .OIDCContainer {
   width: 100%;
   gap: var(--pd-16);
 }
 
 .redirectLink {
-  color: var(--foreground-accent)
-}
+  color: var(--foreground-accent);
+}
+
+.textFieldCode {
+  text-align: center;
+}