Create phone number field

packages/experiments-realm/CardWithContactPhoneNumber/83289456-e32b-462c-8101-010aaa62527c.json

@@ -0,0 +1,23 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "contactPhone": {
+        "value": "01355889283",
+        "type": {
+          "index": 2,
+          "label": "Work"
+        }
+      },
+      "title": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../phone-number",
+        "name": "CardWithContactPhoneNumber"
+      }
+    }
+  }
+}

packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json

@@ -9,16 +9,24 @@
       "primaryEmail": "[email protected]",
       "secondaryEmail": "[email protected]",
       "phoneMobile": {
-        "type": "office",
-        "country": 1,
-        "area": 415,
-        "number": 123456
+        "phoneNumber": {
+          "number": "1158524828",
+          "countryCode": "60"
+        },
+        "type": {
+          "index": 0,
+          "label": "Mobile"
+        }
       },
       "phoneOffice": {
-        "type": null,
-        "country": null,
-        "area": null,
-        "number": null
+        "phoneNumber": {
+          "number": null,
+          "countryCode": null
+        },
+        "type": {
+          "index": null,
+          "label": null
+        }
       },
       "socialLinks": [
         {

packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json

@@ -26,10 +26,8 @@
         "[email protected]"
       ],
       "phone": {
-        "type": null,
-        "country": null,
-        "area": null,
-        "number": null
+        "number": "1159292211",
+        "countryCode": "60"
       },
       "percentage": 100.159393,
       "currency": {
@@ -105,4 +103,4 @@
       }
     }
   }
-}
+}

packages/experiments-realm/crm/contact.gts

@@ -1,5 +1,5 @@
 import StringField from 'https://cardstack.com/base/string';
-import { PhoneField } from '../phone';
+import { ContactPhoneNumber } from '../phone-number';
 import { EmailField } from '../email';
 import { ContactLinkField } from '../fields/contact-link';
 import {
@@ -701,8 +701,8 @@ export class Contact extends CardDef {
   @field department = contains(StringField);
   @field primaryEmail = contains(EmailField);
   @field secondaryEmail = contains(EmailField);
-  @field phoneMobile = contains(PhoneField);
-  @field phoneOffice = contains(PhoneField);
+  @field phoneMobile = contains(ContactPhoneNumber);
+  @field phoneOffice = contains(ContactPhoneNumber);
   @field socialLinks = containsMany(SocialLinkField);
   @field statusTag = contains(StatusTagField); //this is an empty field that gets computed in subclasses
 

packages/experiments-realm/experiments_fields_preview.gts

@@ -1,7 +1,7 @@
 import { FeaturedImageField } from './fields/featured-image';
 import { ContactLinkField } from './fields/contact-link';
 import { EmailField } from './email';
-import { PhoneField } from './phone';
+import { PhoneField } from './phone-number';
 import { UrlField } from './url';
 import { WebsiteField } from './website';
 import { Address as AddressField } from './address';

packages/experiments-realm/phone-number.gts

@@ -0,0 +1,164 @@
+import {
+  contains,
+  field,
+  Component,
+  FieldDef,
+  StringField,
+} from 'https://cardstack.com/base/card-api';
+import { LooseGooseyField, LooseyGooseyData } from './loosey-goosey';
+import { PhoneInput, Pill } from '@cardstack/boxel-ui/components';
+import { RadioInput } from '@cardstack/boxel-ui/components';
+import { EntityDisplay } from './components/entity-display';
+import { tracked } from '@glimmer/tracking';
+import { fn } from '@ember/helper';
+import { action } from '@ember/object';
+import PhoneIcon from '@cardstack/boxel-icons/phone';
+
+class PhoneNumberTypeEdit extends Component<typeof PhoneNumberType> {
+  @tracked label: string | undefined = this.args.model.label;
+
+  get types() {
+    return PhoneNumberType.values;
+  }
+
+  get selected() {
+    return this.types?.find((type) => {
+      return type.label === this.label;
+    });
+  }
+
+  @action onSelect(type: LooseyGooseyData): void {
+    this.label = type.label;
+    this.args.model.label = this.selected?.label;
+    this.args.model.index = this.selected?.index;
+  }
+  <template>
+    <RadioInput
+      @groupDescription='Office, Work, Home '
+      @items={{this.types}}
+      @checkedId={{this.selected.label}}
+      @orientation='horizontal'
+      @spacing='default'
+      @keyName='label'
+      as |item|
+    >
+      <item.component @onChange={{fn this.onSelect item.data}}>
+        {{item.data.label}}
+      </item.component>
+    </RadioInput>
+  </template>
+}
+
+export class PhoneNumberType extends LooseGooseyField {
+  static displayName = 'Phone Number Type';
+  static values = [
+    { index: 0, label: 'Mobile' },
+    { index: 1, label: 'Home' },
+    { index: 2, label: 'Work' },
+  ];
+  static edit = PhoneNumberTypeEdit;
+}
+
+export class PhoneField extends FieldDef {
+  static displayName = 'Phone Number';
+  @field number = contains(StringField);
+  @field countryCode = contains(StringField);
+
+  setNumber = (number: string) => {
+    this.number = number;
+  };
+
+  setCountryCode = (code: string) => {
+    this.countryCode = code;
+  };
+
+  static edit = class Edit extends Component<typeof PhoneField> {
+    <template>
+      <PhoneInput
+        @countryCode={{@model.countryCode}}
+        @value={{@model.number}}
+        @onInput={{@model.setNumber}}
+        @onCountryCodeChange={{@model.setCountryCode}}
+      />
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof PhoneField> {
+    <template>
+      <EntityDisplay @underline={{false}}>
+        <:title>
+          {{#if @model.countryCode}}
+            +{{@model.countryCode}}{{@model.number}}
+          {{else}}
+            {{@model.number}}
+          {{/if}}
+        </:title>
+        <:thumbnail>
+          <PhoneIcon class='icon' />
+        </:thumbnail>
+      </EntityDisplay>
+      <style scoped>
+        .icon {
+          color: var(--boxel-400);
+        }
+      </style>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof PhoneField> {
+    <template>
+      {{#if @model.countryCode}}
+        <span>+{{@model.countryCode}}{{@model.number}}</span>
+      {{else}}
+        <span>{{@model.number}}</span>
+      {{/if}}
+    </template>
+  };
+}
+
+export class ContactPhoneNumber extends FieldDef {
+  @field phoneNumber = contains(PhoneField);
+  @field type = contains(PhoneNumberType);
+
+  static atom = class Atom extends Component<typeof ContactPhoneNumber> {
+    <template>
+      <EntityDisplay @underline={{false}}>
+        <:title>
+          {{#if @model.phoneNumber.countryCode}}
+            +{{@model.phoneNumber.countryCode}}{{@model.phoneNumber.number}}
+          {{else}}
+            {{@model.phoneNumber.number}}
+          {{/if}}
+        </:title>
+        <:thumbnail>
+          <PhoneIcon class='icon' />
+        </:thumbnail>
+        <:tag>
+          {{#if @model.type.label}}
+            <Pill class='pill-gray'>
+              {{@model.type.label}}
+            </Pill>
+          {{/if}}
+        </:tag>
+      </EntityDisplay>
+      <style scoped>
+        .icon {
+          color: var(--boxel-400);
+        }
+        .pill-gray {
+          --default-pill-padding: 0 var(--boxel-sp-xxxs);
+          background-color: var(--boxel-200);
+          border-color: transparent;
+        }
+      </style>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<
+    typeof ContactPhoneNumber
+  > {
+    <template>
+      <@fields.phoneNumber @format='embedded' />
+    </template>
+  };
+}