9573920592

Committed 19 Jun 2024 12:10AM UTC coverage: 15.135% (+0.001%) from 15.134%

Build # 9573920592

Build Type

Pull #8181

github

Committed by

web-flow

Commit Message

Merge b4eba6817 into f876fb111

Pull Request Pull Request #8181: created a reusable growl template

Run Details

3750 of 24335 branches covered (15.41%)

Branch coverage included in aggregate %.

0 of 14 new or added lines in 1 file covered. (0.0%)

3 existing lines in 2 files now uncovered.

5185 of 34702 relevant lines covered (14.94%)

4.82 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx

import React, { useState } from 'react';
import useGrowlStore from 'state/ui/growl';
import { CWCheckbox } from 'views/components/component_kit/cw_checkbox';
import { CWGrowl } from 'views/components/component_kit/cw_growl';
import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
import { CWText } from 'views/components/component_kit/cw_text';
import { CWButton } from '../../component_kit/new_designs/CWButton';
import './CWGrowlTemplate.scss';

const LOCALSTORAGE_GROWL_TEMPLATE_KEY = 'GrowlTemplateHidden';

interface CWGrowlTemplateProps {
  headerText: string;
  bodyText: string;
  buttonText: string;
  buttonLink: string;
  growlImage: string;
}

export const CWGrowlTemplate = ({
  headerText,
  bodyText,
  buttonText,
  buttonLink,
  growlImage,
}: CWGrowlTemplateProps) => {
  const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();

  const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
    useState(false);

  const [isDisabled, setIsDisabled] = useState(
    localStorage.getItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY) === 'true' ||
      isGrowlHidden,
  );

  const handleExit = () => {
    setIsDisabled(true);
    setIsGrowlHidden(true);

    if (shouldHideGrowlPermanently) {
      localStorage.setItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY, 'true');
    }
  };

  return (
    <CWGrowl disabled={isDisabled} position="bottom-right">
      <div className="CWGrowlTemplate">
        <CWIconButton
          iconName="close"
          iconSize="medium"
          className="closeButton"
          onClick={handleExit}
        />
        <img src={growlImage} alt="" className="img" />
        <div className="container">
          <CWText type="h2" fontWeight="bold" isCentered>
            {headerText}
          </CWText>
          <CWText type="b1" fontWeight="medium" isCentered className="body">
            {bodyText}
          </CWText>
          <CWButton
            className="CalenderButton"
            buttonType="primary"
            buttonHeight="med"
            label={buttonText}
            onClick={(e) => {
              e.preventDefault();
              window.open(buttonLink, '_blank');
            }}
          />
          <CWText type="b2" fontWeight="regular" isCentered className="body">
            Have more feedback? Reach out to us on Discord!
          </CWText>
          <a
            href="https://discord.com/channels/799041511165394986/1099034105997426709"
            target="_blank"
            rel="noreferrer"
            style={{ textDecoration: 'none' }}
          >
            <CWText
              type="b1"
              fontWeight="link"
              isCentered
              className="discordLink"
            >
              Open Discord
              <CWIcon
                iconName="arrowSquareOut"
                iconSize="medium"
                className="icon"
              />
            </CWText>
          </a>
        </div>
        <div className="checkboxContainer">
          <CWCheckbox
            onChange={() =>
              setShouldHideGrowlPermanently(!shouldHideGrowlPermanently)
            }
            label="Please don't show this again"
            labelClassName="checkbox"
          />
        </div>
      </div>
    </CWGrowl>
  );
};

export default CWGrowlTemplate;

1	import React, { useState } from 'react';
2	import useGrowlStore from 'state/ui/growl';
3	import { CWCheckbox } from 'views/components/component_kit/cw_checkbox';
4	import { CWGrowl } from 'views/components/component_kit/cw_growl';
5	import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
6	import { CWIcon } from 'views/components/component_kit/cw_icons/cw_icon';
7	import { CWText } from 'views/components/component_kit/cw_text';
8	import { CWButton } from '../../component_kit/new_designs/CWButton';
9	import './CWGrowlTemplate.scss';
10
NEW 11	const LOCALSTORAGE_GROWL_TEMPLATE_KEY = 'GrowlTemplateHidden';	×
12
13	interface CWGrowlTemplateProps {
14	headerText: string;
15	bodyText: string;
16	buttonText: string;
17	buttonLink: string;
18	growlImage: string;
19	}
20
NEW 21	export const CWGrowlTemplate = ({	×
22	headerText,
23	bodyText,
24	buttonText,
25	buttonLink,
26	growlImage,
27	}: CWGrowlTemplateProps) => {
NEW 28	const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();	×
29
30	const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
NEW 31	useState(false);	×
32
NEW 33	const [isDisabled, setIsDisabled] = useState(	×
34	localStorage.getItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY) === 'true' \|\|	×
35	isGrowlHidden,
36	);
37
NEW 38	const handleExit = () => {	×
NEW 39	setIsDisabled(true);	×
NEW 40	setIsGrowlHidden(true);	×
41
NEW 42	if (shouldHideGrowlPermanently) {	×
NEW 43	localStorage.setItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY, 'true');	×
44	}
45	};
46
NEW 47	return (	×
48	<CWGrowl disabled={isDisabled} position="bottom-right">
49	<div className="CWGrowlTemplate">
50	<CWIconButton
51	iconName="close"
52	iconSize="medium"
53	className="closeButton"
54	onClick={handleExit}
55	/>
56	<img src={growlImage} alt="" className="img" />
57	<div className="container">
58	<CWText type="h2" fontWeight="bold" isCentered>
59	{headerText}
60	</CWText>
61	<CWText type="b1" fontWeight="medium" isCentered className="body">
62	{bodyText}
63	</CWText>
64	<CWButton
65	className="CalenderButton"
66	buttonType="primary"
67	buttonHeight="med"
68	label={buttonText}
69	onClick={(e) => {
NEW 70	e.preventDefault();	×
NEW 71	window.open(buttonLink, '_blank');	×
72	}}
73	/>
74	<CWText type="b2" fontWeight="regular" isCentered className="body">
75	Have more feedback? Reach out to us on Discord!
76	</CWText>
77	<a
78	href="https://discord.com/channels/799041511165394986/1099034105997426709"
79	target="_blank"
80	rel="noreferrer"
81	style={{ textDecoration: 'none' }}
82	>
83	<CWText
84	type="b1"
85	fontWeight="link"
86	isCentered
87	className="discordLink"
88	>
89	Open Discord
90	<CWIcon
91	iconName="arrowSquareOut"
92	iconSize="medium"
93	className="icon"
94	/>
95	</CWText>
96	</a>
97	</div>
98	<div className="checkboxContainer">
99	<CWCheckbox
100	onChange={() =>
NEW 101	setShouldHideGrowlPermanently(!shouldHideGrowlPermanently)	×
102	}
103	label="Please don't show this again"
104	labelClassName="checkbox"
105	/>
106	</div>
107	</div>
108	</CWGrowl>
109	);
110	};
111
112	export default CWGrowlTemplate;

hicommonwealth / commonwealth / 9573920592

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous