Join page 1124

common/constants/messages.js

@@ -7,6 +7,7 @@ export const validationErrorMessages = {
     'Minimum password requirements: 8 characters, 1 Lowercase Letter, 1 Uppercase Letter, 1 Number',
   passwordsMatch: 'Passwords must match',
   codeOfConduct: 'You must agree to our Code of Conduct',
+  slackGuidelines: 'You must agree to our Slack workspace guidelines',
 };
 
 export const networkErrorMessages = {

common/constants/urls.js

@@ -2,5 +2,6 @@ const s3hostName = 'operation-code-assets.s3.us-east-2.amazonaws.com';
 const s3 = `https://${s3hostName}/`;
 const leadershipCircleLink = 'https://secure.lglforms.com/form_engine/s/L428AQ2rrsFJQyy5Fbglvg';
 const codeOfConduct = `https://github.com/OperationCode/operationcode_docs/blob/master/community/code_of_conduct.md`;
+const slackGuidelines = `https://github.com/OperationCode/START_HERE/blob/master/community_guidelines.md`;
 
-module.exports = { s3hostName, s3, leadershipCircleLink, codeOfConduct };
+module.exports = { s3hostName, s3, leadershipCircleLink, codeOfConduct, slackGuidelines };

components/Footer/__tests__/Footer.test.js

@@ -4,7 +4,7 @@ import Footer from '../Footer';
 
 describe('Footer', () => {
   it('should render with no props passed', () => {
-    jest.useFakeTimers().setSystemTime(new Date('2023-01-01'));
+    jest.useFakeTimers().setSystemTime(new Date('2023-03-03'));
     createShallowSnapshotTest(<Footer />);
   });
 });

components/Forms/RegistrationForm/RegistrationForm.js

@@ -7,7 +7,7 @@ import { createUser } from 'common/constants/api';
 import { getServerErrorMessage } from 'common/utils/api-utils';
 import { validationErrorMessages } from 'common/constants/messages';
 import { capitalizeFirstLetter } from 'common/utils/string-utils';
-import { codeOfConduct } from 'common/constants/urls';
+import { codeOfConduct, slackGuidelines } from 'common/constants/urls';
 import Button from 'components/Buttons/Button/Button';
 import Checkbox from 'components/Form/Checkbox/Checkbox';
 import Form from 'components/Form/Form';
@@ -27,6 +27,7 @@ const defaultValues = {
   lastName: '',
   zipcode: '',
   codeOfConduct: false,
+  slackGuidelines: false,
 };
 
 /**
@@ -52,6 +53,7 @@ const registrationSchema = Yup.object().shape({
   lastName: Yup.string().trim().required(validationErrorMessages.required),
   zipcode: Yup.string().trim().required(validationErrorMessages.required),
   codeOfConduct: Yup.boolean().oneOf([true], validationErrorMessages.codeOfConduct),
+  slackGuidelines: Yup.boolean().oneOf([true], validationErrorMessages.slackGuidelines),
 });
 
 RegistrationForm.propTypes = {
@@ -66,6 +68,7 @@ RegistrationForm.propTypes = {
     lastName: string,
     zipcode: oneOfType([string, number]),
     codeOfConduct: boolean,
+    slackGuidelines: boolean,
   }),
 };
 
@@ -114,18 +117,20 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
       validationSchema={registrationSchema}
     >
       {({ isSubmitting }) => (
-        <Form className="w-full flex items-center flex-col [&>p]:my-5 [&>p]:mx-auto">
-          <p>
-            We work closely with military veterans, service members, and spouses who are passionate
-            about transitioning into the tech industry. We work with over 7,000 members who are all
-            working towards relevant goals on Slack and in-person meet-ups. Membership is free!
-            Unfamiliar with Slack?{` `}
-            <Link href="/slack_guide">
-              <a>Learn how to use it!</a>
-            </Link>
-          </p>
-
-          <div className="flex flex-col justify-between w-full max-w-lg">
+        <Form className="flex flex-col items-center w-full">
+          <div className="max-w-xl px-4">
+            <p className="pb-4">
+              We work closely with military veterans, service members, and spouses who are
+              passionate about transitioning into the tech industry. We work with over 7,000 members
+              who are all working towards relevant goals on Slack and in-person meet-ups. Membership
+              is free! Unfamiliar with Slack?{` `}
+              <Link href="/slack_guide">
+                <a>Learn how to use it!</a>
+              </Link>
+            </p>
+          </div>
+
+          <div className="flex flex-col justify-between max-w-md">
             <Field
               type="email"
               name="email"
@@ -198,7 +203,7 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
                 <span>
                   I have read and agree to&nbsp;
                   <OutboundLink
-                    hasIcon={false}
+                    hasIcon
                     href={codeOfConduct}
                     analyticsEventLabel="Registration CoC Checkbox Link"
                   >
@@ -210,25 +215,41 @@ function RegistrationForm({ initialValues, onSubmit, onSuccess }) {
               component={Checkbox}
               disabled={isSubmitting}
             />
+
+            <Field
+              type="checkbox"
+              name="slackGuidelines"
+              label={
+                <span>
+                  I have read and agree to&nbsp;
+                  <OutboundLink
+                    hasIcon
+                    href={slackGuidelines}
+                    analyticsEventLabel="Registration Slack Guidelines Checkbox Link"
+                  >
+                    Operation Code&apos;s Slack Community Guidelines.
+                  </OutboundLink>
+                  *
+                </span>
+              }
+              component={Checkbox}
+              disabled={isSubmitting}
+            />
           </div>
 
           {errorMessage && <Alert type="error">{errorMessage}</Alert>}
 
-          <hr className="my-8 mx-0 w-1/4 border-themeGray200" />
-
-          <p className="bg-white border-1 border-solid border-themeSecondary rounded-md text-sm py-2 px-3">
-            The demographic information you provide, helps us understand our community needs, ensure
-            diversity, and provide specific resources to reach our mission. Thank you in advance for
-            providing honest answers.
-            <br />
-            <span className="font-bold">We do not sell your information to anyone.</span>
-          </p>
-
-          <hr className="my-8 mx-0 w-1/4 border-themeGray200" />
-
-          <Button className="mt-4" type="submit" theme="secondary" disabled={isSubmitting}>
-            Submit
-          </Button>
+          <div className="max-w-md px-3 pt-1">
+            <Button type="submit" theme="secondary" disabled={isSubmitting}>
+              Submit
+            </Button>
+            <p className="pt-5 text-xs">
+              The demographic information you provide, helps us understand our community needs,
+              ensure diversity, and provide specific resources to reach our mission. Thank you in
+              advance for providing honest answers.&nbsp;
+              <span className="font-bold">We do not sell your information to anyone.</span>
+            </p>
+          </div>
         </Form>
       )}
     </Formik>

components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.js.snap

@@ -2,24 +2,30 @@
 
 exports[`RegistrationForm should render with required props 1`] = `
 <form
-  className="w-full flex items-center flex-col [&>p]:my-5 [&>p]:mx-auto"
+  className="flex flex-col items-center w-full"
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <p>
-    We work closely with military veterans, service members, and spouses who are passionate about transitioning into the tech industry. We work with over 7,000 members who are all working towards relevant goals on Slack and in-person meet-ups. Membership is free! Unfamiliar with Slack?
-
-    <a
-      href="/slack_guide"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
+  <div
+    className="max-w-xl px-4"
+  >
+    <p
+      className="pb-4"
     >
-      Learn how to use it!
-    </a>
-  </p>
+      We work closely with military veterans, service members, and spouses who are passionate about transitioning into the tech industry. We work with over 7,000 members who are all working towards relevant goals on Slack and in-person meet-ups. Membership is free! Unfamiliar with Slack?
+
+      <a
+        href="/slack_guide"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+      >
+        Learn how to use it!
+      </a>
+    </p>
+  </div>
   <div
-    className="flex flex-col justify-between w-full max-w-lg"
+    className="flex flex-col justify-between max-w-md"
   >
     <div
       className="field"
@@ -252,38 +258,81 @@ exports[`RegistrationForm should render with required props 1`] = `
             >
               Opens in new window
             </span>
+            <svg
+              className="!fill-current relative my-0 mx-1 bottom-0 w-3"
+            />
+          </a>
+          *
+        </span>
+      </label>
+    </div>
+    <div
+      className="field"
+      data-testid="CHECKBOX"
+    >
+      <label
+        className="text-themeSecondary text-sm"
+        data-testid="LABEL"
+        htmlFor="slackGuidelines"
+      >
+        <input
+          checked={false}
+          className="Checkbox"
+          id="slackGuidelines"
+          name="slackGuidelines"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value=""
+        />
+        <span>
+          I have read and agree to 
+          <a
+            className="inline-flex items-start"
+            href="https://github.com/OperationCode/START_HERE/blob/master/community_guidelines.md"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Operation Code's Slack Community Guidelines.
+            <span
+              className="sr-only"
+              data-testid="SCREEN_READER_ONLY"
+            >
+              Opens in new window
+            </span>
+            <svg
+              className="!fill-current relative my-0 mx-1 bottom-0 w-3"
+            />
           </a>
           *
         </span>
       </label>
     </div>
   </div>
-  <hr
-    className="my-8 mx-0 w-1/4 border-themeGray200"
-  />
-  <p
-    className="bg-white border-1 border-solid border-themeSecondary rounded-md text-sm py-2 px-3"
+  <div
+    className="max-w-md px-3 pt-1"
   >
-    The demographic information you provide, helps us understand our community needs, ensure diversity, and provide specific resources to reach our mission. Thank you in advance for providing honest answers.
-    <br />
-    <span
-      className="font-bold"
+    <button
+      className="Button secondary"
+      data-testid="BUTTON"
+      disabled={false}
+      onClick={[Function]}
+      tabIndex={0}
+      type="submit"
     >
-      We do not sell your information to anyone.
-    </span>
-  </p>
-  <hr
-    className="my-8 mx-0 w-1/4 border-themeGray200"
-  />
-  <button
-    className="Button mt-4 secondary"
-    data-testid="BUTTON"
-    disabled={false}
-    onClick={[Function]}
-    tabIndex={0}
-    type="submit"
-  >
-    Submit
-  </button>
+      Submit
+    </button>
+    <p
+      className="pt-5 text-xs"
+    >
+      The demographic information you provide, helps us understand our community needs, ensure diversity, and provide specific resources to reach our mission. Thank you in advance for providing honest answers. 
+      <span
+        className="font-bold"
+      >
+        We do not sell your information to anyone.
+      </span>
+    </p>
+  </div>
 </form>
 `;