fix: Handle www and value changes in link-field (#5597)

Author: iamareebjamal

app/components/widgets/forms/link-field.hbs

@@ -6,6 +6,7 @@
       </div>
       <Input 
         {{did-update this.prefixUpdated @prefix}}
+        {{did-update this.valueUpdated @value}}
         @id={{@inputId}}
         @type="text"
         value={{this.fixedValue}}

app/components/widgets/forms/link-field.ts

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { socialMediaExtraPrefixes } from 'open-event-frontend/utils/dictionary/social-media';
 
 interface Args {
   prefix: string | undefined,
@@ -48,6 +49,13 @@ export default class LinkField extends Component<Args> {
    */
   fixValue(value: string): string {
     const splitted = value.split(this.prefix);
+    if (!splitted[1]) {
+      const extraPrefix = socialMediaExtraPrefixes[this.prefix];
+      const extraSplit = value.split(extraPrefix);
+      if (extraSplit[1]) {
+        return extraSplit[1];
+      }
+    }
     return splitted[1] || splitted[0];
   }
 
@@ -63,4 +71,10 @@ export default class LinkField extends Component<Args> {
     this.args.onChange(this.finalValue);
   }
 
+  @action
+  valueUpdated(): void {
+    this.value = this.parseValue();
+    this.args.onChange(this.finalValue);
+  }
+
 }

app/models/social-link.js

@@ -13,15 +13,19 @@ export default ModelBase.extend({
 
   event: belongsTo('event'),
 
-  normalizedName: computed('name', function() {
+  normalizedName: computed('site', function() {
+    return this.site === 'website' ? 'globe' : this.site;
+  }),
+
+  site: computed('name', function() {
     // Even though name is required for social links and is non-nullable
     // and non-null name is being sent from API, for some reason, for certain events,
     // this throws an error, so we check first if name exists
     // https://github.com/fossasia/open-event-frontend/issues/4777
 
     const normalizedName = this.name?.trim().toLowerCase();
     if (!socialMediaIdentifiers.includes(normalizedName)) {
-      return 'globe';
+      return 'website';
     }
     return normalizedName;
   }),

app/templates/components/forms/wizard/other-details-step.hbs

@@ -14,7 +14,7 @@
 
     {{#each this.socialMediaLinks as |socialLink|}}
       <Widgets::Forms::SocialLinkField
-        @site={{socialLink.name}}
+        @site={{socialLink.site}}
         @onSiteChange={{action (mut socialLink.name)}}
         @value={{socialLink.link}}
         @onChange={{action (mut socialLink.link)}}>
@@ -36,7 +36,7 @@
     {{#each this.customLinks as |socialLink|}}
       <Widgets::Forms::SocialLinkField
         @custom={{true}}
-        @site={{socialLink.name}}
+        @site={{socialLink.site}}
         @onSiteChange={{action (mut socialLink.name)}}
         @value={{socialLink.link}}
         @onChange={{action (mut socialLink.link)}}>

app/utils/dictionary/social-media.ts

@@ -31,3 +31,8 @@ export const socialMediaMap: SocialMediaMap = socialMediaIdentifiers.reduce((obj
   obj[identifier] = socialMediaSites[index];
   return obj;
 }, {});
+
+export const socialMediaExtraPrefixes = Object.values(socialMediaMap).reduce((obj: { [key: string]: string}, media: SocialMedia) => {
+  obj[media.prefix ?? media.identifier] = `https://www.${media.identifier}.com/`;
+  return obj;
+}, {});