Feature: re-add select a different company option (#22)

* feature: add select a different company option * refactor: adjust label spacing and tweak dropdown arrow style * fix: add prevent default
impress-org · Sep 3, 2024 · aa13b29 · aa13b29
1 parent 9c71d66
commit aa13b29
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/DoubleTheDonation/FormExtension/Template/Components/styles.scss b/src/DoubleTheDonation/FormExtension/Template/Components/styles.scss
@@ -1,7 +1,8 @@
 .give-dtd-company-search {
     position: relative;
-    margin-left: -5px;
-    margin-right: -5px;
+    margin: 5px -5px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    box-sizing: border-box;
 
     label {
         font-size: 1.1rem;
@@ -14,10 +15,10 @@
     .components-flex-item::before {
         position: absolute;
         color: #8c8c8c;
+        margin-top: 4px;
         right: 20px;
         line-height: 1.5;
-        margin-top: -2px;
-        font-size: 26px;
+        font-size: 22px;
         content: '⌄';
         pointer-events: none;
     }

diff --git a/src/DoubleTheDonation/FormExtension/Template/Variations/Default.tsx b/src/DoubleTheDonation/FormExtension/Template/Variations/Default.tsx
@@ -1,4 +1,5 @@
 import type {Company} from '../types';
+import {__} from '@wordpress/i18n';
 import {useEffect, useState} from 'react';
 import {CompanySearch} from '../Components';
 import './styles.scss';
@@ -80,6 +81,28 @@ export default ({inputProps: {name}, label}) => {
         });
     };
 
+    if (selectedCompany?.company_name) {
+        return (
+            <div className="give-dtd-company-search">
+                <label>
+                    {label}
+                </label>
+                <div style={{display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 10, padding: 5}}>
+                    {__('Company selected', 'give-double-the-donation')}: <strong>{selectedCompany.company_name}.</strong>
+                    <a
+                        href="#"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            setValue(name, null);
+                        }}
+                    >
+                        {__('Select a different company', 'give-double-the-donation')}
+                    </a>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <CompanySearch
             selected={selectedCompany?.company_id}